IOS 图片切换展示的实现

浏览数：36 / 时间：2015年06月11日

先看看我们的效果

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

分析

这里我用了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