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

一、实现效果

实现图片的自动轮播

          

二、实现代码

storyboard中布局

代码：

  1 #import "YYViewController.h"

  2 

  3 @interface YYViewController () <UIScrollViewDelegate>

  4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview;

  5 /**

  6  *  页码

  7  */

  8 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

  9 

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

 11 @end

 12 

 13 @implementation YYViewController

 14 

 15 - (void)viewDidLoad

 16 {

 17     [super viewDidLoad];

 18     

 19 //    图片的宽

 20     CGFloat imageW = self.scrollview.frame.size.width;

 21 //    CGFloat imageW = 300;

 22 //    图片高

 23     CGFloat imageH = self.scrollview.frame.size.height;

 24 //    图片的Y

 25     CGFloat imageY = 0;

 26 //    图片中数

 27     NSInteger totalCount = 5;

 28 //   1.添加5张图片

 29     for (int i = 0; i < totalCount; i++) {

 30         UIImageView *imageView = [[UIImageView alloc] init];

 31 //        图片X

 32         CGFloat imageX = i * imageW;

 33 //        设置frame

 34         imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);

 35 //        设置图片

 36         NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1];

 37         imageView.image = [UIImage imageNamed:name];

 38 //        隐藏指示条

 39         self.scrollview.showsHorizontalScrollIndicator = NO;

 40         

 41         [self.scrollview addSubview:imageView];

 42     }

 43     

 44 //    2.设置scrollview的滚动范围

 45     CGFloat contentW = totalCount *imageW;

 46     //不允许在垂直方向上进行滚动

 47     self.scrollview.contentSize = CGSizeMake(contentW, 0);

 48     

 49 //    3.设置分页

 50     self.scrollview.pagingEnabled = YES;

 51     

 52 //    4.监听scrollview的滚动

 53     self.scrollview.delegate = self;

 54     

 55     [self addTimer];

 56 }

 57 

 58 - (void)nextImage

 59 {

 60     int page = (int)self.pageControl.currentPage;

 61     if (page == 4) {

 62         page = 0;

 63     }else

 64     {

 65         page++;

 66     }

 67     

 68 //  滚动scrollview

 69     CGFloat x = page * self.scrollview.frame.size.width;

 70     self.scrollview.contentOffset = CGPointMake(x, 0);

 71 }

 72 

 73 // scrollview滚动的时候调用

 74 - (void)scrollViewDidScroll:(UIScrollView *)scrollView

 75 {

 76     NSLog(@"滚动中");

 77 //    计算页码

 78 //    页码 = (contentoffset.x + scrollView一半宽度)/scrollView宽度

 79     CGFloat scrollviewW =  scrollView.frame.size.width;

 80     CGFloat x = scrollView.contentOffset.x;

 81     int page = (x + scrollviewW / 2) /  scrollviewW;

 82     self.pageControl.currentPage = page;

 83 }

 84 

 85 // 开始拖拽的时候调用

 86 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

 87 {

 88 //    关闭定时器(注意点; 定时器一旦被关闭,无法再开启)

 89 //    [self.timer invalidate];

 90     [self removeTimer];

 91 }

 92 

 93 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

 94 {

 95 //    开启定时器

 96     [self addTimer];

 97 }

 98 

 99 /**

100  *  开启定时器

101  */

102 - (void)addTimer{

103     

104     self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

105     [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];

106 }

107 /**

108  *  关闭定时器

109  */

110 - (void)removeTimer

111 {

112     [self.timer invalidate];

113 }

114 @end

提示：以下两个属性已经和storyboard中的控件进行了连线。

@property (weak, nonatomic) IBOutletUIScrollView *scrollview;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;

补充：定时器NSTimer

   定时器 适合用来隔一段时间做一些间隔比较长的操作

 NSTimeInterval:多长多件操作一次

 target :操作谁

 selector : 要操作的方法

 userInfo: 传递参数

 repeats: 是否重复

  self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];