码迷,mamicode.com
首页 > 移动开发 > 详细

IOS 图片切换展示的实现

时间:2015-02-27 11:59:17      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:ios   导航展示   

先看看我们的效果

技术分享
这种图片切换经常出现商城或者论坛的首页用于展示

分析

这里我用了UIScrollView和pageControll实现了一种平铺导航,涉及到两种操作:
1 点击pageControl换页
2 换页转换pageControll

实现

#import "ViewController.h"
#define WEIGHT [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height

@interface ViewController ()<UIScrollViewDelegate>

@end

@implementation ViewController
@synthesize topDisplayScroller;
@synthesize page;

- (void)viewDidLoad {
    [super viewDidLoad];
    [self createTopIndex];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

#pragma mark- 创建主页上方滑动视图
/*
 *  原理:创建一个分page的,scrollView , 在创建一个浮在上面的pageController————滑动展示
 */
-(void)createTopIndex
{
    topDisplayScroller.contentSize=CGSizeMake(WEIGHT*5, topDisplayScroller.frame.size.height);
    topDisplayScroller.pagingEnabled=YES;//允许分页滑动
    
    for (int i=0; i<5; i++) {
        UIImageView *ImagePage=[[UIImageView alloc]initWithFrame:CGRectMake(WEIGHT*i, 0, WEIGHT, topDisplayScroller.frame.size.height)];
        ImagePage.image=[UIImage imageNamed:@"1"];
        [topDisplayScroller addSubview:ImagePage];
    }
    /*
     *  注明:添加pageControl,但是不能添加到scroller的内容视图上,为啥呢?因为添加到上面去以后pageControl会随之滑动
     */
    page=[[UIPageControl alloc]initWithFrame:CGRectMake(WEIGHT/6, 20+topDisplayScroller.frame.size.height*2/3, 50, 20)];
    page.numberOfPages=5;
    page.currentPageIndicatorTintColor=[UIColor orangeColor];
    page.pageIndicatorTintColor=[UIColor whiteColor];
    [self.page addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:page];
}

/*
 *  功能:滑动scroller,带动pageControl
 */

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint offset=scrollView.contentOffset;
    self.page.currentPage=offset.x/WEIGHT;
}

/*
 *  功能:点击pageControll,动画
 */
- (void)changePage:(id)sender
{
    [UIView animateWithDuration:0.3f animations:^{
        NSInteger whichPage = self.page.currentPage;
        topDisplayScroller.contentOffset = CGPointMake(WEIGHT* whichPage, 0.0f);
    }];
}

@end


源代码:

https://git.oschina.net/zhengaoxing/TopIndex
本文原创,转载请注明出处:http://blog.csdn.net/zhenggaoxing/article/details/43965373











IOS 图片切换展示的实现

标签:ios   导航展示   

原文地址:http://blog.csdn.net/zhenggaoxing/article/details/43965373

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!