UI中如何用纯代码的方式来实现一个图片轮播器
图片轮播器
• 实现思路:
• 1. 添加 UIScrollView
• 2. 动态向 UIScrollView 中添加图片框（横向）
• 3. 设置 UIScrollView 的 contentSize 实现滚动, 实现横向滚动
• 4. 实现分页
• 5. 实现分页指示器 UIPageControl
• 6. 通过使用 Nstimer 实现自动滚动
1.动态创建imageView图片框 添加到scrollView中,
创建好图片框后, 给图片赋值,第一种是没有frame的,而第二种赋值,是可以有大小的,这个大小和图片的大小一样,
// ViewController.m
// _图片轮播器
#import "ViewController.h"
@interface ViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (nonatomic, assign) int index;
//定义一个计时器
@property (nonatomic, strong) NSTimer *timer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//动态创建UIImageView 5个
CGFloat W = 300;
CGFloat H = 130;
CGFloat Y = 0;
int count = 5; //5个
for (int i=0; i<count; i++) {
//拼接图片名称
NSString *imgName = [NSString stringWithFormat:@"img_%02d",i + 1];
//加载图片
UIImage *image = [UIImage imageNamed:imgName];
//创建好图片框之后,图片框的大小就是图片的实际大小
UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
//设置frame
CGFloat X = i * W;
imageView.frame = CGRectMake(X, Y, W, H);
[self.scrollView addSubview:imageView];
}
//scrollViewView的contentSize
self.scrollView.contentSize = CGSizeMake(count * W, 0);
//设置scrollViewView不显示水平滚动条 ——>隐藏水平滚动条
self.scrollView.showsHorizontalScrollIndicator = NO;
//设置scrollViewView以分页的方式滚动 ——> 一句话分页功能, 这个设置好之后,scrollView会按照它本身的宽度来分页
self.scrollView.pagingEnabled = YES;
//关闭弹簧效果
self.scrollView.bounces = NO;
//启动一个计时器控件,来实现自动轮播
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
// 消息循环 把self.timer加入消息循环的模式修改一下
NSRunLoop *runloop = [NSRunLoop currentRunLoop];
[runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
}
需要使用: 分页指示器: Page Control
注意,当把pageControl 移动到图片轮播器中时,不要用拖进去,而是要设置y值, 必须让他们处于同级,
currentPage 表示当前页
让两者产生联系,就需要先代理,然后在滚动事件中去联系,
代码优化, —>解决一个bug:页面切换的时候,从前往后,要完全过度到下一页的时候才跳转页码, 而往前过度的时候,刚刚一到前面页,页码就跳转了,这样体验就非常不舒服, 那么我们怎样解决这个小bug呢?
—>> 我们可以通过调整计算页码的计算公式,来具体定位, 如下:
我们用偏移量 offset.x + scrollView的宽度的一半 ,然后再除以宽度, 就可以计算出具体的page页码值,当图片滚动一超过图片的一半,就页码跳转, 如果没有超过一半,就不跳转, 这样整个体验,就舒服多了
// 当Scroll view在滚动的时候会触发这个事件
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// 计算滚动的偏移
CGFloat offsetX = scrollView.contentOffset.x;
// Scroll view宽度（一页的宽度）
CGFloat w = scrollView.bounds.size.width;
// 1. 计算出当前滚动到了第几页
// int page = scrollView.contentOffset.x / scrollView.bounds.size.width;
int page = (offsetX + w * 0.5) / w;
// 2. 根据页码设置page control 的 current page属性
self.pageControl.currentPage = page;
}
接下来实现自动轮播的效果
// 实现自动轮播效果
- (void)autoScroll {
NSLog(@"....");
// 1. 修改scroll view 的 contentOffset 的 x 值, 来实现自动滚动
// 1> 获取当前页的索引
NSInteger page = self.pageControl.currentPage;
// 页索引+1
page++;
// 检测页索引是否超过了总页数
if (page > self.pageControl.numberOfPages - 1) {
page = 0;
}
// 2. 根据要滚动到的页码, 来设置scroll view的contentOffset
CGFloat w = self.scrollView.bounds.size.width;
// self.scrollView.contentOffset = CGPointMake(page * w, 0);
[self.scrollView setContentOffset:CGPointMake(page * w, 0) animated:YES];
}
// 开始拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
// 1. 停止计时器
[self.timer invalidate];
}
// 结束拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
// 重新开启一个计时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
// 把self.timer加入消息循环的模式修改一下
NSRunLoop *runloop = [NSRunLoop currentRunLoop];
[runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
}
这样就实现了一个自动轮播的图片轮播器了