SSCycleScrollView

infinate scroll home page using swift4,无限轮播图


Keywords
pod, scroll, swift
License
MIT
Install
pod try SSCycleScrollView

Documentation

swift首页轮播 轻量级

  • 轮播终结者,用swift完成,易于集成使用,下载图片使用了SDWebImage
  • 自己动手用swift写了一个,欢迎试用!
  • 效果图:

网上找了一些首页轮播,写的或多或少有一些问题,用着不舒服,自己用swift写了一个轮播控件,有如下特点:

  • 下载图片使用了SDWebImage,性能高
  • 轮播图上需要点击链接,只需要调用一个block便可加上点击,易于集成
  • 支持webp格式图片,由于加入支持webp,电脑需要翻墙才能安装,电脑更改hosts在这儿

使用方法

在Podfile加入以下:

use_frameworks!
pod 'SSCycleScrollView'

这个库中支持了webp格式图片,引入了SDWebImage库。 下面可参考Demo中: 初始化时,传一个url的array,可以传本地的图片名字,也可以传网络图片; v2.1.0中为了引入网络图片的placeholderImage,此array改成了如下样式:

var scrollImageUrls: [[String]] {
        get {
            return [["https://devthinking.com/images/wechatqcode.jpg", "banner4.jpg"],
                    ["banner1.jpg"],
                    ["banner3.jpg"]]
        }
    }

初始化一个SSCycleScrollView:

        self.mainScrollView = SSCycleScrollView.init(frame: currentRect, animationDuration: 3, inputImageUrls: self.scrollImageUrls)
        self.mainScrollView?.tapBlock = {index in
            print("tapped page\(index)")
        }

autoScroll默认为true,如只需要手动滚动,需要:

       self.mainScrollView?.autoScroll = false

原理SSCycleScrollView

初始化后会启动一个定时器,repeat调用一个timerFired方法,方法中每次对scrollview加一个自己宽度的offset:

func timerFired() {
let xOffset = Int(self.contentOffset.x/kScreenWidth)
let xOffsetFloat = CGFloat(xOffset) * kScreenWidth
let newOffset = CGPointMake(xOffsetFloat + CGRectGetWidth(self.frame), self.contentOffset.y)
self.setContentOffset(newOffset, animated: true)
}

没有直接加xOffset, 而是对其做了一个换算,确保每次加的offset是自己宽度的整数倍。 在scrollViewDidScroll方法,每次计算前一个,当前,后一个index,确保index范围为index >= 0 && index < allImageArray.count, 每次滚动后都会三个imageView中的image做重新赋值:

self.previousDisplayView?.image = self.allImageArray[previousArrayIndex]
self.currentDisplayView?.image = self.allImageArray[self.currentArrayIndex]
self.lastDisplayView?.image = self.allImageArray[lastArrayIndex]
self.contentOffset = CGPointMake(CGRectGetWidth(self.frame), 0)

上面最后一行设置contenOffset非常重要,每次把scrollView的位置重置为1个自身宽度的offset。

小结

如果你觉得有不好的地方,可以提出来,大家一块研究一下,欢迎常来我的仓库,别忘记给个star!

微信公众号

开发者思维 devthinking

QQ交流群:295976280

iOS交流群(一)群二维码