http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 3278|回复: 5

[新手开发之旅] iOS新手开发之旅-UIScrollView之无限轮播图

[复制链接]
发表于 2018-12-6 11:50:37 | 显示全部楼层 |阅读模式
本帖最后由 竹林风 于 2018-12-8 17:59 编辑

  文章导航  

【iOS新手开发之旅】   http://www.sufeinet.com/thread-24000-1-1.html


上一篇中我们简单介绍了UIScrollView的基本属性和方法,这一篇我们用UIScrollView实现一个无限轮播图。

先看效果

Untitled.gif

实现原理:

我们需要在第一张图片的位置摆放最后一张图片,然后我们依次摆放图片(从第一张到最后一张),最后在所有图片的尾部我们再放上第一张图片。这样我们就多放了两张图片(分别在首尾多放了一张图)看代码


[Objective-C] 纯文本查看 复制代码
//设置图片
-(void)setImages{
    
    /// 在UIScrollView的最前面添加一张图片
    UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.myScroll.frame), CGRectGetHeight(self.myScroll.frame))];
    /// 图片名是最后一张图片
    firstImageView.image = [UIImage imageNamed:self.aryImage.lastObject];
    [self.myScroll addSubview:firstImageView];
    
    /// 添加图片
    for (NSInteger i = 0; i < self.aryImage.count; i ++) {
        /// UIScrollView上的每一张图片
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((i + 1) * CGRectGetWidth(self.myScroll.frame), 0, CGRectGetWidth(self.myScroll.frame), CGRectGetHeight(self.myScroll.frame))];
        imageView.image = [UIImage imageNamed:self.aryImage[i]];
        
        [self.myScroll addSubview:imageView];
        self.myScroll.contentSize = CGSizeMake((i + 2) * self.myScroll.bounds.size.width, 0);
    }
    
    /// 在UIScrollView的最后面添加一张图片
    UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.aryImage.count + 1) * CGRectGetWidth(self.myScroll.frame), 0, CGRectGetWidth(self.myScroll.frame), self.myScroll.frame.size.height)];
    /// 图片名是第一张图片
    lastImageView.image = [UIImage imageNamed:self.aryImage.firstObject];
    [self.myScroll addSubview:lastImageView];
    
    /// 设置UIScrollView的偏移量
    self.myScroll.contentSize = CGSizeMake((self.aryImage.count + 2) * self.myScroll.bounds.size.width, 0);
    
    /// 设置UIScrollView的起始偏移距离(将第一张图片跳过)
    self.myScroll.contentOffset = CGPointMake(CGRectGetWidth(self.myScroll.frame), 0);
    
    /// 图片总数
    self.pageControl.numberOfPages = self.aryImage.count;
    self.pageControl.currentPage = 0;

}


如果看到这里,应该就会大致明白无线轮播的实现原理了。接下来就是最后一步,在UIScrollView的代理方法里面写逻辑:判断UIScrollView的偏移量,当其滑动到首位时(显示的是最后一张图片),滑动停止,就把偏移量修改最后面图片的位置上(倒数第二张)。同理,当UIScrollView滑动到最后时(显示的是第一张图片),滑动停止,就把偏移量修改到第一张图片的位置上(正数第二张)。


[Objective-C] 纯文本查看 复制代码
#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    /// 当UIScrollView滑动到第一位停止时,将UIScrollView的偏移位置改变
    if (scrollView.contentOffset.x == 0) {
        scrollView.contentOffset = CGPointMake(self.aryImage.count * self.myScroll.bounds.size.width, 0);
        self.pageControl.currentPage = self.aryImage.count;
        /// 当UIScrollView滑动到最后一位停止时,将UIScrollView的偏移位置改变
    } else if (scrollView.contentOffset.x == (self.aryImage.count + 1)* self.myScroll.bounds.size.width) {
        scrollView.contentOffset = CGPointMake(self.myScroll.bounds.size.width, 0);
        self.pageControl.currentPage = 0;
    } else {
        self.pageControl.currentPage = scrollView.contentOffset.x / self.myScroll.bounds.size.width - 1;
    }
}


ok,原理其实就是这样。在首尾多加两张图片当做占位符,然后当UIScrollView滑动到占位符的位置时,改变UIScrollView的偏移量,简单且方便。


附件: Test-UIScrollView无限轮播.zip (318.05 KB, 下载次数: 0)


1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-12-6 12:02:42 | 显示全部楼层
如果代码都写了,但运行发现并没有出现预想的效果,可能是这里忘记写了哦!

[Objective-C] 纯文本查看 复制代码
@interface firstVC ()<UIScrollViewDelegate>


实现代理之前要先遵守协议。
发表于 2018-12-6 12:03:15 | 显示全部楼层
我只是路过打酱油的。
发表于 2018-12-6 14:04:37 | 显示全部楼层
我只是路过打酱油的。
发表于 2018-12-6 14:29:59 | 显示全部楼层
无回帖,不论坛,这才是人道。
发表于 2018-12-6 15:56:19 | 显示全部楼层
我只是路过打酱油的。
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-11-8 10:57

© 2014-2021

快速回复 返回顶部 返回列表