文档章节

使用3个imageView实现无线轮播

樱黯雨
 樱黯雨
发布于 2017/01/16 18:20
字数 381
阅读 12
收藏 0

#使用3个imageView做无限轮播 ###原理,如果所示: 输入图片说明

  • 1.给scrollView添加个imageView, 分别为: leftImageView, midImageView, rightImageView,设置midImageView在屏幕的中间
  • 2.监听scrollViewcontentOffset,当用户向左滑动的时候,根据contentOffset.x,判断用户滑动的方向,并且设置当前的index
  • 3.在重写indexsetter方法中,设置对应图片应该显示的图片,完成以后,重新把scrollViewcontOffset调整为midImageView在屏幕中间

核心代码

  • 添加观察者,监听contentOffset,
#pragma mark - kvo
- (void)addObservers {
    [self.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
}
- (void)removeObservers {
    [self.scrollView removeObserver:self forKeyPath:@"contentOffset"];
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"contentOffset"]) {
        [self caculateCurIndex];
    }
}
  • 根据当前contentOffset,设置index,
#pragma mark - caculate curIndex
- (void)caculateCurIndex {
    if (self.imageURLStrings && self.imageURLStrings.count > 0) {
        CGFloat pointX = self.scrollView.contentOffset.x;
        CGFloat criticalValue = .2f;

        
        if (pointX > 2 * CGRectGetWidth(self.scrollView.bounds) - criticalValue) {
            // right
            self.curIndex = (self.curIndex + 1) % self.imageURLStrings.count;
        } else if (pointX < criticalValue) {
            // scroll left
            self.curIndex = (self.curIndex + self.imageURLStrings.count - 1) % self.imageURLStrings.count;
        }
        
    }
}
  • 重写indexsetter方法,设置每个imageView的图片
- (void)setCurIndex:(NSInteger)curIndex {
    if (_curIndex >= 0) {
        _curIndex = curIndex;
        
        NSInteger imageCount = self.imageURLStrings.count;
        NSInteger leftIndex = (curIndex + imageCount - 1) % imageCount;

        NSInteger rightIndex = (curIndex + 1) % imageCount;
        
        self.leftImageView.image = [UIImage imageNamed:self.imageURLStrings[leftIndex]];
        self.middleImageView.image = [UIImage imageNamed:self.imageURLStrings[curIndex]];
        self.rightImageView.image = [UIImage imageNamed:self.imageURLStrings[rightIndex]];
        [self setScrollViewContentOffsetCenter];
        self.pageControl.currentPage = curIndex;
    }
}
  • 重新把scrollViewcontentOffset调整为midImageView在屏幕中间
- (void)setScrollViewContentOffsetCenter {
    self.scrollView.contentOffset = CGPointMake(CGRectGetWidth(self.scrollView.bounds), 0);
}

PS:写的有点简单了,但是核心思想就是通过控制contentOffset,给用户错觉,实现无限轮播

附上github地址,大家可以下载源码看一下,源码是添加了定时器的代码,可以直接拿走使用.记得给✨啊

##github地址

© 著作权归作者所有

樱黯雨
粉丝 3
博文 35
码字总数 19899
作品 0
郑州
程序员
私信 提问
iOS无限轮播图片的两种方式

1 使用UIScrollview实现无限轮播原理   在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动。   在开发的时候,我们通常的做法是使用一个UIScrollView,在UIScrol...

-Man
2016/08/16
98
0
自定义广告图片轮播View——CarouselView

  因为一个广告机的需求,需要做一个广告轮播的效果,不需要什么特别的动画,正常的轮播就可以了。笔者看了网上很多文章,要么不好用,要么就是效果太多,太复杂,用不上。索性自己写了一个...

饮水思源为名
2018/08/08
0
0
UI中如何用纯代码的方式来实现一个图片轮播器

图片轮播器 • 实现思路: • 1. 添加 UIScrollView • 2. 动态向 UIScrollView 中添加图片框(横向) • 3. 设置 UIScrollView 的 contentSize 实现滚动, 实现横向滚动 • 4. 实现分页 • 5....

DXSmile_大熊
2016/01/02
23
0
高效图片轮播,两个imageView实现

在不少项目中,都会有图片轮播这个功能,现在网上关于图片轮播的框架层出不穷,千奇百怪,本人最近在网上发现用两个imageView也可高效实现了图片轮播,这里说说主要思路以及大概步骤,具体代...

邓博巍
2016/04/08
1
1
轮播图优化-实现子view的复用

轮播图控件刚毕业的同学们就会写了,这里简单介绍下自己在做RN轮播图时一些心得: 回收与复用弃用的子view,至多只会存在有3个子View的实例。 手动滑动与自动播放的优雅处理,不重写onTouch...

牟乘风
2018/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失

在Spring Cloud中我们用Hystrix来实现断路器,Zuul中默认是用信号量(Hystrix默认是线程)来进行隔离的,我们可以通过配置使用线程方式隔离。 在使用线程隔离的时候,有个问题是必须要解决的...

xiaomin0322
43分钟前
2
0
使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

本文首发于:Jenkins 中文社区 本文要点: 设计一条 Spring Boot 最基本的流水线:包括构建、制品上传、部署。 使用 Docker 容器运行构建逻辑。 自动化整个实验环境:包括 Jenkins 的配置,J...

Jenkins中文社区
48分钟前
3
0
springcloud配置中心和消息总线,学习,记录其中的问题

改造配置中心的客户端,接入消息总线 1.增加pom文件的引用 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

夜中孤影
今天
3
0
gzip压缩

tar -zcvf gz包路径 被压缩的路径 tar -zcvf /home/xxx/test.tar.gz hello gz包的路径可以是 完整的也可以相对 , 被压缩的路径 不要全路径 不然压缩包里也会有全路径...

shzwork
今天
3
0
rancher-1

部署rancher 官方快速部署 https://www.cnrancher.com/quick-start/ 部署命令 mkdir /data/rancher -p# 建立存放rancher数据的目录sudo docker run -d --restart=unless-stopped -v /dat......

以谁为师
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部