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











郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。