ios图片轮播 (基础篇——UIScrollView实现方式)



简述 :

    人生不发返程的车票,一旦出发了,决不能返回。

    人生只有一次,无悔的人生才是成功的人生,不要期待与奢望 “下一次” 如何。

    过去的人生中,我们的路程中可能充满了欢笑与忧伤,而在我们当下,却是永远的记忆。

    在人生的不同的阶段,我们常常会听到许多人说着这样的话。

    学生时代 ,“我这一次没考好,下一次会考好 ”

    找工作时, “ 我这次面试没通过 ,下一次一定要通过 ”

    与恋人分手时, “这次没找到好的对象,下次一定要找到比他更好的对象 ”

    业绩没达成时, “我这个月没达成的目标,下个月我会认真 的达成”

         

    不知有多少人在期待这个 “下一次”,下一次真的会比这一次好吗 ?

    一流人才,在第一次出手的时候,就做好了赢的准备与打算,每次出手不是给自己练的机会,而是完成使命毕达的任务,

    二流人才,认为学校有义务教他,企业有责任栽培他,因此误以为每一次都是在练习,认为成功就在下一次,他们不懂得体悟每一次的机会。

    人生有限,生命绝路珍贵,务必把握当下的每一刻,把握当下的每一件小的事情 ,当然,你可以不 在意细节 ,但是你一定人注重细节。


效果简览




1、初始化创建 UIScrollView 

   
    UIScrollView *scrollview = [[UIScrollView alloc]init];
    //设置frame
    scrollview.frame = CGRectMake(1, 80, self.view.bounds.size.width-2, 200);
    //设置滑动范围
    scrollview.contentSize = CGSizeMake(self.view.bounds.size.width*10, 210);
    //设置水平指示器
    scrollview.showsHorizontalScrollIndicator = NO;
    scrollview.showsVerticalScrollIndicator = NO;
    //设置分页效果
    scrollview.pagingEnabled = YES;
    //设置代理
    scrollview.delegate = self;
    
    //将scrollview 添加到视图中
    [self.view addSubview:scrollview];

    1.1 上述过程就是简单创建了一个 UIScrollView 显示 控件,其中设置它的坐标 起始 (1,80),  

然后 它的宽 为视图的原始宽度,高度设为了 200;

    1.2 接下来设置其的滑动范围,在这里,设置了10倍的宽度,(在这里我们设置显示的每页图片的宽度大小为视图的宽度值 )滑动高度范围为210;

    1.3 这里设置了scrollview的代理 

    那么需要遵守协议 

UIScrollViewDelegate
     同时实现协议方法(下面的操作中将要用到的方法)

//当滑动快结束的时候  调用些方法
//缓慢结束
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    
}
//当滑动开始的时候  调用此方法
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
}
//当滑动停止时调用的方法
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
}

2、向scrollview中添加显示 的ImageView 

    for (int i =0; i<10; i++) {
        //计算每个 UIImageView 的 X 轴坐标
        CGFloat imagex= i*self.view.bounds.size.width;
        //创建初始化Imageview
        UIImageView *imageView = [[UIImageView alloc]init];
        //设置frame
        imageView.frame = CGRectMake(imagex, 0, self.view.bounds.size.width, 200);
        //设置显示 图片
        imageView.image = image;
        //添加到sctollview
        [scrollview addSubview:imageView];
    }

    在这里,我们添加了10页,也就是10个UIimageView ,每个imgaeview的显示 大小 为(self.view.bounds.size.width,200)

    同时设置加载的image 

    NSBundle *bundle =[NSBundle mainBundle];
    
    //加载 图片路径
    NSString *imagePath = [bundle pathForResource:@"sport.jpg" ofType:nil];
    //加载图片 数据
    NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
    //创建图片
    UIImage *image = [UIImage imageWithData:imageData];

3、添加小圆点控制显示器

 
    //创建 初始化
    UIPageControl *pageControl = [[UIPageControl alloc]init];
    //设置frame
    pageControl.frame = CGRectMake(70, 200, 200, 200);
    //设置点的个数
    pageControl.numberOfPages=10;
    //设置指示器默认显示的颜色
    pageControl.pageIndicatorTintColor = [UIColor redColor];
    //设置当前选中的颜色
    pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
    //设置当前默认显示位置
    pageControl.currentPage = 0;
    
    //将pageControl添加到视图中    
    [self.view addSubview:pageControl];

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

//设置pageControl 的显示
//当滑动快结束的时候
//缓慢结束
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //获取当前scrollview 的X轴方向的 偏移量
    CGFloat offset = self.scrollView.contentOffset.x;
    //每个图片页面的宽度
    CGFloat pageWi =self.view.bounds.size.width;
    //设置当前的显示位置
    self.pageControl.currentPage = offset/pageWi+1;
}
    这个方法为scrollview的代理协议方法,当滑动scrollview将要结束的时候,会调用此方法,我们可以在这里面做更新小圆点 的操作

5、设置图片的自动循环播放

    创建定时器

-(void)initTimerFunction{
    //创建计时器
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(autoSelectPage) userInfo:nil repeats:YES];
    NSRunLoop *mainLoop = [NSRunLoop mainRunLoop];
    
    [mainLoop addTimer:timer forMode:NSRunLoopCommonModes];
    
    self.timer = timer;
}

    在这里,定时器会每隔两秒钟的时间来重复执行autoSelectPage方法
-(void)autoSelectPage{
    //取出当前的偏移量
    CGPoint offset =  self.scrollView.contentOffset;
    //取出当前的设置显示 的page指示
    NSInteger  currentPage = self.pageControl.currentPage;
    
    if (currentPage == 9) {
        //设置为初始值
        currentPage =0;
        offset = CGPointZero;
        //更新offset
        [self.scrollView setContentOffset:offset animated:NO];
    }else{
        currentPage++;
        offset.x +=self.view.bounds.size.width;
        //更新offset
        [self.scrollView setContentOffset:offset animated:YES];
    }
    //更新pageControl显示
    self.pageControl.currentPage = currentPage;
    
}


6、当手势滑动scrollview的时候停止定时器任务,滑动结束的时候开启定时任务

//当滑动开始的时候 ,停止计数器
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    //取消定时器任务
    [self.timer invalidate];
}
//当滑动停止时启动定时器任务
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    [self.timer fire];
    //设置自动滚动定时任务
    [self initTimerFunction];
}



早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页