iOS篇—Demo7—图片轮播

Demo7—图片轮播

1.添加一个UIScrollView,并初始化大小

@property(nonatomic, strong) UIScrollView *scrollView;
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, (self.view.frame.size.height-300)/2.0, self.view.frame.size.width, 300)];

2.设置相应属性

//设置滑动范围
_scrollView.contentSize = CGSizeMake(self.view.bounds.size.width*6, _scrollView.frame.size.height);
    
//滚动条
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
    
//设置回弹效果 默认yes
_scrollView.bounces = NO;
    
//翻页效果 设置按页显示
_scrollView.pagingEnabled = YES;

3.添加内容,6张图片

for (int i = 0; i < 6; i ++) {
        //计算每个uiimageview的x坐标
        CGFloat x = i*self.view.frame.size.width;
        //拼接图片的名字
        NSString *imgName = [NSString stringWithFormat:@"%d",i+1];
        //读取图片
        UIImage *img = [UIImage imageNamed:imgName];
        //创建图片视图
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x, 0, self.view.frame.size.width, 300)];
        imageView.image = img;
        [_scrollView addSubview:imageView];
    }

4.添加UIPageControl小圆点控制显示器

@property(nonatomic, strong) UIPageControl *pageControl;
//创建
self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(150, _scrollView.center.y+140, 100, 10)];

//设置圆点个数
_pageControl.numberOfPages = 6;

//设置指示器默认显示的颜色
_pageControl.pageIndicatorTintColor = [UIColor redColor];

//设置当前选中的颜色
_pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];

//设置当前默认显示位置
_pageControl.currentPage = 0;

//给圆点指示器添加事件
[_pageControl addTarget:self action:@selector(pageChange) forControlEvents:UIControlEventValueChanged];

//将指示器加到视图上
[self.view addSubview:_pageControl];

5.响应控制器圆点改变页面

 - (void)pageChange:(UIPageControl *)pageController{
    //获取当前指示的页数 让滚动视图滚动到对应的页数
    CGPoint offset = CGPointMake(pageController.currentPage*_scrollView.frame.size.width, 0);
    [_scrollView setContentOffset:offset animated:YES];
}

6.设置滑动scrollview切换视图时,对应的小圆点同时切换

  • 先设置代理
_scrollView.delegate = self;
  • 服从协议
@interface ViewController ()<UIScrollViewDelegate>
  • 实现协议中的方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //获取当前scrollview的x轴方向的偏移量
    CGFloat offset = self.scrollView.contentOffset.x;
    //获取每个页面的宽度
    CGFloat pageWideth = self.view.bounds.size.width;
    //设置当前指示器的显示位置
    self.pageControl.currentPage = offset/pageWideth;
    
}

7.设置定时器实现循环轮播

@property (nonatomic, strong) NSTimer * scrollTimer;
- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    //添加定时器
    self.scrollTimer = [NSTimer scheduledTimerWithTimeInterval:1 repeats:YES block:^(NSTimer * _Nonnull timer) {
        //判断是不是最后一页 最后一页不能滚动了
        if (self.pageControl.currentPage < self.pageControl.numberOfPages - 1) {
            self.pageControl.currentPage += 1;
            [self pageChange:self.pageControl];
//            CGPoint offset = CGPointMake((self.pageControl.currentPage+1)*self.scrollView.frame.size.width, 0);
//            [self.scrollView setContentOffset:offset animated:YES];
        }
    }];
}
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页