轮播图的实现步骤
Posted 雷坤
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图的实现步骤相关的知识,希望对你有一定的参考价值。
1>.h声明属性
@interface RootView : UIView @property (nonatomic, strong) UIScrollView *scrollView; @property (nonatomic, strong) UIPageControl *pageControl;
2>.m实现步骤
@implementation RootView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // 添加子视图 [self addAllViews]; } return self; } // 添加子视图 - (void)addAllViews { // 布局scrollView // 1. 创建对象 self.scrollView = [[UIScrollView alloc] initWithFrame:self.frame]; // 2. 定义属性 // 苹果4s分配的内存: 30W 5s: 80w 6s: 100; // 设置滚动范围 self.scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.frame) * 7, 0); // 在scrollView上放上7张图片 for (int i = 0; i < 7; i ++) { UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.frame) * i, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))]; NSString *name = [NSString stringWithFormat:@"%d.png", i + 10]; imageView.image = [UIImage imageNamed:name]; // 将imageView添加到scrollView上 [self.scrollView addSubview:imageView]; } // 设置整页滑动 self.scrollView.pagingEnabled = YES; // 3. 添加到父视图 [self addSubview:self.scrollView]; // 布局pageControl self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 40, CGRectGetWidth(self.frame), 40)]; self.pageControl.backgroundColor = [UIColor grayColor]; // 小圆点的个数 self.pageControl.numberOfPages = 7; // 当前小圆点的个数 self.pageControl.currentPageIndicatorTintColor = [UIColor redColor]; // 没有被选择的小圆点 self.pageControl.pageIndicatorTintColor = [UIColor lightGrayColor]; [self addSubview:self.pageControl]; }
3>在ViewController里设置UIScrollView的代理Delegate和给UIPageControl添加事件
@interface RootViewController ()<UIScrollViewDelegate> @property (nonatomic, strong) RootView *rootView; @end @implementation RootViewController - (void)loadView{ self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.view = self.rootView; } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // 4. 设置代理 self.rootView.scrollView.delegate = self; //给pageControl添加事件 [self.rootView.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged]; // 开始添加计时器,实现自动滚动 [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timeAction:) userInfo:nil repeats:YES]; } // 实现自动滚动 - (void)timeAction:(NSTimer *)time { NSLog(@"定时"); // 获取当前pageControl(页数) NSInteger index = self.rootView.pageControl.currentPage; // 如果不是最后一页, 向后偏移一页 if (index != self.rootView.pageControl.numberOfPages - 1) { index++; } else if (index == self.rootView.pageControl.numberOfPages - 1){ // 如果是最后一页,跳到第一页 index = 0; } // 通过index修改scrollView的偏移量 // self.rootView.scrollView.contentOffset = CGPointMake(index * CGRectGetWidth(self.view.frame), 0); [self.rootView.scrollView setContentOffset:CGPointMake(index * CGRectGetWidth(self.view.frame), 0) animated:YES]; self.rootView.pageControl.currentPage = index; } // 实现点击pageControl方法 - (void)pageControlClick:(UIPageControl *)pageControl { // 小圆点位置 NSInteger currentIndex = self.rootView.pageControl.currentPage; // self.rootView.scrollView.contentOffset = CGPointMake(currentIndex * self.view.frame.size.width, 0); [UIView animateWithDuration:0.5 animations:^{ self.rootView.scrollView.contentOffset = CGPointMake(currentIndex * self.view.frame.size.width, 0); }]; } // 实现代理方法 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView { // 改变pageCotrol的当前显示的位置 // 获取当前显示的位置 CGFloat currentX = self.rootView.scrollView.contentOffset.x; self.rootView.pageControl.currentPage = currentX / self.view.frame.size.width; }
以上是关于轮播图的实现步骤的主要内容,如果未能解决你的问题,请参考以下文章
Vue轮播图的实现及其与jQuery轮播图的简单对比|饥人谷前端教程
Android使用ViewPager实现轮播图(自动和手动)