Swift实现"视差效果"的视图轮播

@objc public protocol ParallexBannerDelegate {
    //点击事件
    optional func banner(banner:ParallexBanner,didClickAtIndex index:NSInteger)
    //滚动事件
    optional func banner(banner:ParallexBanner,didScrollToIndex index:NSInteger)
}

@objc public protocol ParallexBannerDataSource{
     //一共有几个
    func numberOfBannersIn(bannner:ParallexBanner)->NSInteger
    //每一个index处的图片，这里可以返回String或者UIImage类型
    func banner(banner:ParallexBanner,urlOrImageAtIndex index:NSInteger)->AnyObject
    //Placeholder
    optional func banner(banner:ParallexBanner,placeHolderForIndex index:NSInteger)->UIImage?
    //Image的ContentMode
    optional func banner(banner:ParallexBanner,contentModeAtIndex index:NSInteger)->UIViewContentMode
}

对了，我们要支持两种类型的滚动：普通滚动，和视差滚动。这里有两种方式试下，一种是用一个Bool来表示，另一种是用枚举。

考虑到以后，我可能添加更多的滚动模式，这里用枚举表示。

public enum ParallexBannerTransition{
    case Normal
    case Parallex
}

然后，我们还需要几个属性，暴露出来给用户设置。这时候的代码如下

public class ParallexBanner: UIView {
// MARK: - Propertys -
    public  weak var dataSource:ParallexBannerDataSource?
    public  weak var delegate:ParallexBannerDelegate?
    public  var transitionMode:ParallexBannerTransition = ParallexBannerTransition.Parallex
    public  var autoScroll:Bool = true
    public  var enableScrollForSinglePage = false
    public  var parllexSpeed:CGFloat = 0.4
    public  var autoScrollTimeInterval:NSTimeInterval = 3.0 
    public  let pageControl:UIPageControl = UIPageControl()
    private var _currentIndex = 1
    private var collectionView:UICollectionView!
    private var timer:NSTimer?
    private var flowLayout:UICollectionViewFlowLayout!

// MARK: - Init -
    override public init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    public required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
}

视图布局

在定义好接口之后，我们要考虑布局了。
对于ParallexBanner来说，布局比较简单

底层是一个UICollectionView
上层是一个UIPageControl

301

我们再来看看CollectionViewCell
普通的滚动CollectionViewCell中只有一个UIImageView，为了实现”视差效果”，我们需要Cell本身也能够控制ImageView滚动。所以，我们用一个ScrollView来包含ImageView，通过控制ContentOffset来控制ImageView的滚动。

public class BannerCell:UICollectionViewCell{
    let imageView = UIImageView()
    let scrollView = UIScrollView()
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    private func commonInit(){
        contentView.addSubview(scrollView)
        scrollView.scrollEnabled = false
        //这里要设置，不然这个scrollView会吃掉我们的触摸
        scrollView.userInteractionEnabled = false
        scrollView.addSubview(imageView)
        imageView.contentMode = UIViewContentMode.ScaleAspectFill;
    }
    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override public func layoutSubviews() {
        super.layoutSubviews()
        scrollView.contentSize = self.bounds.size;
        scrollView.frame = self.bounds
        imageView.frame = scrollView.bounds
    }
}

循环滚动

用CollectionView实现基于Timer的滚动没什么难度。
无非就是一行代码

collectionView.scrollToItemAtIndexPath(nextIndx,atScrollPosition: UICollectionViewScrollPosition.None,animated: true)

那么如何实现循环滚动呢？有很多种方式实现，本文采用在前后插入两个额外的数据来实现。比如我有三张图，

然后，在前后各插入两张

当我向右滚动，滚动到如图红色虚线的临街区域的时候，就把contentOffset调整到左边的位置

同样，当我向左滚动到临界区域，就调整contentOffset到右侧区域

这样就实现了循环滚动。
对应代码

public func scrollViewDidScroll(scrollView: UIScrollView) {
        var offSetX = scrollView.contentOffset.x
        let width = CGRectGetWidth(scrollView.bounds)
        guard width != 0 else{
            return
        }
        if offSetX >= width * CGFloat(self.dataSource!.numberOfBannersIn(self) + 2 - 1){
            offSetX = width;
            scrollView.contentOffset = CGPointMake(offSetX,0);
        }else if(offSetX < 0 ){
            offSetX = width * CGFloat(self.dataSource!.numberOfBannersIn(self) + 2 - 2);
            scrollView.contentOffset = CGPointMake(offSetX,0);
        }
    }

视差效果

视差效果还是比较简单实现的。我们获取当前在屏幕上的Cell，然后计算相对移动的距离，然后，把Cell本身的ImageView像相反方向按照Speed来移动。

collectionView.visibleCells().forEach { (cell) in
            if let bannerCell = cell as? BannerCell{
               handleEffect(bannerCell)
            }
        }

调整Cell中的ScrollView的ContentOffset

private func handleEffect(cell:BannerCell){
        switch transitionMode {
        case .Parallex:
            let minusX = self.collectionView.contentOffset.x - cell.frame.origin.x
            let imageOffsetX = -minusX * parllexSpeed;
            cell.scrollView.contentOffset = CGPointMake(imageOffsetX,0)
        default:
            break
        }
    }

总结

到这里，基本的原理就讲解完了。其实，所谓的视差效果，就是合理的利用ScrollView。感兴趣的同学可以看看源代码，不到300行，很简单。地址：ParallexBanner

Swift实现"视差效果"的视图轮播

视差效果

ParallexBanner

实现视图轮播的几种方式

定义接口

视图布局

循环滚动

视差效果

总结

猜你在找的Swift相关文章