轮播图在App上面到处可见 ,也是最容易上手操作的。下面就介绍下怎么自己动手做轮播图
首先 轮播图用到 UIScrollView 和 PageControll;
再次用到时间控制器 控制 其自动播放
还要遵循代理方法
@interface RootController ()<UIScrollViewDelegate>
声明scrollview 和pagecontroll timer
@property (nonatomic, strong)UIScrollView *scrollVC;
@property (nonatomic, strong)UIPageControl *pageCT;
@property (nonatomic, strong)NSTimer *timer;
1 创建scrollview
- (void)addScroll
{
// 初始化一个scrollview
self.scrollVC = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 10, kScrrenWith, kScrrenHeight - 10)];
//设置代理
self.scrollVC .delegate = self;
// 循环创建图片
for (int i = 0; i < 5; i ++) {
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(kScrrenWith * i, 10, kScrrenWith, kScrrenHeight - 10)];
imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg", i + 1]];
// 将imegeview 添加到scrollview上面
[self.scrollVC addSubview:imageView];
}
// 创建scrollview 可以滑动的区域
self.scrollVC.contentSize = CGSizeMake(kScrrenWith * 5, kScrrenHeight - 20);
// 设置 scrollview 是整页可以滑动
self.scrollVC.pagingEnabled = YES;
// 把scrollview 添加到页面
[self.view addSubview:self.scrollVC];
}
创建pagecontrol
#pragma mark pageControl
- (void)addPage
{
self.pageCT = [[UIPageControl alloc]initWithFrame:CGRectMake((kScrrenWith - 300) / 2, kScrrenHeight - 20, 300, 20)];
self.pageCT.numberOfPages = 5;
self.pageCT.pageIndicatorTintColor = [UIColor greenColor];
self.pageCT.currentPageIndicatorTintColor = [UIColor yellowColor];
// 把 pagecontrol 插入到 scrollview 上面
[self.view insertSubview:self.pageCT aboveSubview:self.scrollVC];
}
设置图片滑动一页 page显示对应的位置 这就需要用到scrollview的代理方法
#pragma mark 代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// 计算当前的偏移量
NSInteger page = scrollView.contentOffset.x / kScrrenWith + 0.5;
self.pageCT.currentPage = page;
}
写道这里测试 可以看到图片可以用手滑动 pagecontrol也在图片上面显示
下面就需要 通过时间控制器 去控制 图片轮播
创建时间控制器
#pragma mark timer
- (void)addTIM
{
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(ationNext) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes];
}
去实现 actionNext方法 在actionNext方法里区控制图片的自动轮播
- (void)ationNext
{
NSInteger page = self.pageCT.currentPage;
page++;
if (page == 5) {
page = 0;
}
CGPoint poin = CGPointMake(kScrrenWith * page, 0);
[self.scrollVC setContentOffset:poin animated:YES];
}
这样图片就可以自动轮播 page也可以跟着一起动 但是 当我们手动拖动的时候 不能拖动
就需要添加手动拖动方法
#pragma mark 可以手动滑动
// 当视图将要拖动的时候触发
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
//[self removeTimer];
[self removeTimer];
}
// 将要停止拖动的时候
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
dispatch_after(DISPATCH_TIME_NOW, dispatch_get_main_queue(), ^{
[self addTIM];
});
}
- (void)removeTimer
{
[self.timer invalidate];
self.timer = nil;
}