【转】 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 = ;
 //    图片中数
     NSInteger totalCount = ;
 //   1.添加5张图片
     for (int i = ; 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 + ];
         imageView.image = [UIImage imageNamed:name];
 //        隐藏指示条
         self.scrollview.showsHorizontalScrollIndicator = NO;

         [self.scrollview addSubview:imageView];
     }

 //    2.设置scrollview的滚动范围
     CGFloat contentW = totalCount *imageW;
     //不允许在垂直方向上进行滚动
     self.scrollview.contentSize = CGSizeMake(contentW, );

 //    3.设置分页
     self.scrollview.pagingEnabled = YES;

 //    4.监听scrollview的滚动
     self.scrollview.delegate = self;

     [self addTimer];
 }

 - (void)nextImage
 {
     int page = (int)self.pageControl.currentPage;
     if (page == ) {
         page = ;
     }else
     {
         page++;
     }

 //  滚动scrollview
     CGFloat x = page * self.scrollview.frame.size.width;
     self.scrollview.contentOffset = CGPointMake(x, );
 }

 // 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 / ) /  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: target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
  }
 /**
  *  关闭定时器
  */
 - (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　

 

 CGFloat w = self.view.frame.size.width;
 CGFloat h = self.view.frame.size.height;
 for (int i = ; i< kCount; i++) {
 UIImageView *imageView = [[UIImageView alloc] init];

 // 1.设置frame
 imageView.frame = CGRectMake(i * w, , w, h);

 // 2.设置图片
 NSString *imgName = [NSString stringWithFormat:@"0%d.jpg", i + ];
 imageView.image = [UIImage imageNamed:imgName];

 [_scrollView addSubview:imageView];

2.2.设置UIScrollView的相关属性　　　　　　　　　　　　　　　　　　　　　　　　　　　　

属性在文章的开头有介绍

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

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

 UIPageControl *pageControl = [[UIPageControl alloc] init];
 pageControl.center = CGPointMake(w * 0.5, h - );
 pageControl.bounds = CGRectMake(, , , );
 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;
 }