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

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

提示：以下两个属性已经和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];