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

来源：互联网发布：篮球战术板软件编辑：程序博客网时间：2024/04/30 00:53

一、实现效果

实现图片的自动轮播

二、实现代码

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)removeTimer111 {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];

0 0