【转】 iOS开发UI篇—UIScrollView控件实现图片轮播

原文：http://www.cnblogs.com/wendingding/p/3763527.html

iOS开发UI篇—UIScrollView控件实现图片轮播

一、实现效果

实现图片的自动轮播

          

二、实现代码

storyboard中布局

代码：

#import "YYViewController.h"

@interface YYViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollview;
/**
 *  页码
 */
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

@property (nonatomic, strong) NSTimer *timer;
@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
//    图片的宽
    CGFloat imageW = self.scrollview.frame.size.width;
//    CGFloat imageW = 300;
//    图片高
    CGFloat imageH = self.scrollview.frame.size.height;
//    图片的Y
    CGFloat imageY = 0;
//    图片中数
    NSInteger totalCount = 5;
//   1.添加5张图片
    for (int i = 0; i < totalCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
//        图片X
        CGFloat imageX = i * imageW;
//        设置frame
        imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
//        设置图片
        NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];
        imageView.image = [UIImage imageNamed:name];
//        隐藏指示条
        self.scrollview.showsHorizontalScrollIndicator = NO;
        
        [self.scrollview addSubview:imageView];
    }
    
//    2.设置scrollview的滚动范围
    CGFloat contentW = totalCount *imageW;
    //不允许在垂直方向上进行滚动
    self.scrollview.contentSize = CGSizeMake(contentW, 0);
    
//    3.设置分页
    self.scrollview.pagingEnabled = YES;
    
//    4.监听scrollview的滚动
    self.scrollview.delegate = self;
    
    [self addTimer];
}

- (void)nextImage
{
    int page = (int)self.pageControl.currentPage;
    if (page == 4) {
        page = 0;
    }else
    {
        page++;
    }
    
//  滚动scrollview
    CGFloat x = page * self.scrollview.frame.size.width;
    self.scrollview.contentOffset = CGPointMake(x, 0);
}

// scrollview滚动的时候调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"滚动中");
//    计算页码
//    页码 = (contentoffset.x + scrollView一半宽度)/scrollView宽度
    CGFloat scrollviewW =  scrollView.frame.size.width;
    CGFloat x = scrollView.contentOffset.x;
    int page = (x + scrollviewW / 2) /  scrollviewW;
    self.pageControl.currentPage = page;
}

// 开始拖拽的时候调用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
//    关闭定时器(注意点; 定时器一旦被关闭,无法再开启)
//    [self.timer invalidate];
    [self removeTimer];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
//    开启定时器
    [self addTimer];
}

/**
 *  开启定时器
 */
- (void)addTimer{
    
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
106 }
/**
 *  关闭定时器
 */
- (void)removeTimer
{
    [self.timer invalidate];
}
@end

补充：
1.先介绍下UIScrollView的常见属性　　　　　　　　　　　　　　　　　　　　

@property(nonatomic) CGPoint contentOffset; // 记录UIScrollView滚动的位置
@property(nonatomic) CGSize contentSize; // 内容尺寸（能滚动的范围）
@property(nonatomic) UIEdgeInsets contentInset; // 额外增加的滚动区域（在上下左右4个边缘）
@property(nonatomic,assign) id<UIScrollViewDelegate> delegate; // 代理对象
@property(nonatomic) BOOL bounces; // 是否有弹簧效果
@property(nonatomic) BOOL showsHorizontalScrollIndicator; // 是否显示水平滚动条
@property(nonatomic) BOOL showsVerticalScrollIndicator; // 是否显示垂直滚动条

2.分页浏览的实现　　　　　　　　　　　　　　　　　　　　　　　　　　　　

2.1.把需要显示的图片设置进UIScrollView　

 

1 CGFloat w = self.view.frame.size.width;
2 CGFloat h = self.view.frame.size.height;
3 for (int i = 0; i< kCount; i++) {
4 UIImageView *imageView = [[UIImageView alloc] init];
5 
6 // 1.设置frame
7 imageView.frame = CGRectMake(i * w, 0, w, h);
8 
9 // 2.设置图片
10 NSString *imgName = [NSString stringWithFormat:@"0%d.jpg", i + 1];
11 imageView.image = [UIImage imageNamed:imgName];
12 
13 [_scrollView addSubview:imageView];

2.2.设置UIScrollView的相关属性　　　　　　　　　　　　　　　　　　　　　　　　　　　　


属性在文章的开头有介绍

// height == 0 代表 禁止垂直方向滚动
_scrollView.contentSize = CGSizeMake(kCount * w, 0);
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.pagingEnabled = YES;
_scrollView.delegate = self;

2.3.设置UIPageControl的相关属性，计算页码　　　　　　　　　　　　　　　　　　　　　　　　　　　　

UIPageControl *pageControl = [[UIPageControl alloc] init];
pageControl.center = CGPointMake(w * 0.5, h - 20);
pageControl.bounds = CGRectMake(0, 0, 150, 50);
pageControl.numberOfPages = kCount; // 一共显示多少个圆点（多少页）
// 设置非选中页的圆点颜色
pageControl.pageIndicatorTintColor = [UIColor redColor];
// 设置选中页的圆点颜色
pageControl.currentPageIndicatorTintColor = [UIColor blueColor];

// 禁止默认的点击功能
pageControl.enabled = NO;

[self.view addSubview:pageControl];
_pageControl = pageControl;

2.4.滚动时切换页码　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

#pragma mark - UIScrollView的代理方法
#pragma mark 当scrollView正在滚动的时候调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
int page = scrollView.contentOffset.x / scrollView.frame.size.width;
// NSLog(@"%d", page);

// 设置页码
_pageControl.currentPage = page;
}