CYCircularScrollView 2.0.2

CYCircularScrollView 2.0.2

×

测试已测试✗
语言语言 SwiftSwift
许可证 MIT
发布日期上次发布2017年10月
SwiftSwift 版本4.0
SPM支持 SPM✗

由 CYLee 维护。

CYCircularScrollView 2.0.2

  • 作者
  • CY.Lee

用于图片横幅或类似公告的信息显示。

alt tag

安装

手动安装

您也可以手动将 CYCircularScrollView 导入到项目中，但请注意图片横幅 CYPicBannerScrollView 使用 Kingfisher 从互联网加载和缓存图片，所以还需要 Kingfisher。当然，通过 CocoaPods 的方式，您无需担心这一点。

使用方法

图片横幅：CYPicBannerScrollView

1.init

CYPicBannerScrollView 支持 3 种数据源：`UIImage`，`图片 URL 字符串` 和 `Model`。它们各自对应 3 种便捷的初始化方法。

  • UIImage
convenience init(frame:CGRect, images:[Any]?, didSelected:((Int,Any)->())?)
//e.g.
let imageArray = [UIImage(named: "banner_1")!,UIImage(named: "banner_2")!,UIImage(named: "banner_3")!]
let bannerView = CYPicBannerScrollView(frame: CGRect.zero,
                                        images:imageArray ) { (index, data) in
    //click event
}
  • 图片 URL 字符串
convenience init(frame:CGRect, urlStrings:[Any]?, placeholder:UIImage?, didSelected:((Int,Any)->())?)
//e.g.
let urlArray = ["www","www","www"]
let bannerView = CYPicBannerScrollView(frame: CGRect.zero,
                                        urlStrings: urlArray,
                                        placeholder: UIImage(named: "pic_placeholder")) { (index, data) in
    //click event
}
  • Model
convenience init(frame:CGRect, models:[Any]?, placeholder:UIImage?, modelImage:@escaping (Any)->(CYImageResult), didSelected:((Int,Any)->())?) 
//e.g.
let announceArray = [Announcement(title:"First Announcement",time:"2017-01-01",image:"p1"),
                    Announcement(title:"Second Announcement",time:"2017-01-02",image:"p2"),
                    Announcement(title:"Third Announcement",time:"2017-01-03",image:"p3")]
let bannerView = CYPicBannerScrollView(frame: CGRect.zero,
                                        models: announceArray,
                                        placeholder: UIImage(named: "pic_placeholder"),
                                        modelImage: { (model) -> (CYImageResult) in
    let announcement = model as! Announcement
    return CYImageResult(data: UIImage(named: announcement.image)!, type: .image)
}) { (index, data) in
    //click event
}

对于 Model 的来源，需要在 `modelImage` 闭包中返回一个包含图像数据和类型的结构体。它支持像 `CYImageResult(data: UIImage(named: model.image)!, type: .image)` 这样的 `UIImage` 类型或像 `CYImageResult(data: "http://image.com/image", type: .urlString)` 这样的 URL 字符串类型。

2. 自定义

CYPicBannerScrollView 的自定义如下：

bannerView.autoScrollInterval = 3.0 //interval of auto scroll,defalut is 5 sec

bannerView.pageControlPosition = .right //position of PageControl, default is center
bannerView.pageControlOffset = UIOffset(horizontal: -10, vertical: -5) //offset of PageControl,base on position of PageControl

//define the PageControl style as you wish
bannerView.pageControl.backgroundColor = UIColor(displayP3Red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 0.8)
bannerView.pageControl.layer.cornerRadius = 8

自定义圆形滚动视图：CYCircularScrollView

您可以通过 4 个步骤创建一个自定义的圆形滚动视图。

  • 1. 继承 CYCircularScrollView
class CYAnnounceScrollView : CYCircularScrollView
  • 2. 覆盖 var cellClass:UICollectionViewCell.Type 属性
override var cellClass:UICollectionViewCell.Type {
    return CYAnnounceCell.self //type of your circle view, a subclass of UICollectionViewCell
}
  • 3. 覆盖 func configureCollectionCell(_ cell:UICollectionViewCell, data:Any) -> UICollectionViewCell 方法
override func configureCollectionCell(_ cell:UICollectionViewCell, data:Any) -> UICollectionViewCell {

    let announceCell = cell as! CYAnnounceCell

    if let announcement:Announcement = data as? Announcement{
        announceCell.announcement = announcement
    }

    return announceCell
}
  • 4. 覆盖其他可选属性以满足您的要求
override var scrollDirection:CYScrollDirection {
    return .vertical//scroll direction，defalut is .horizontal
}

override var isScrollEnabled:Bool {
    return false//can be scrolled or not，defalut is true
}

经过这四个步骤后，您现在就可以使用您自定义的圆形滚动视图了~

let annouceScrollView = CYAnnounceScrollView(frame: CGRect.zero, datas: self.announceArray) { (index, data) in
    //click event
}

更多详细内容，请参考 Demo。

安装

手动引入

您也可以手动将CYCircularScrollView拷贝到项目中，但请注意，项目中需要同时引入Kingfisher，因为在轮播图控件CYPicBannerScrollView中直接使用了Kingfisher框架进行网络图片加载。

如何使用

轮播图控件：CYPicBannerScrollView

1. 初始化

CYPicBannerScrollView支持以下三种类型的数据源：UIImage、图片链接字符串以及数据模型(Model)，这些类型对应三种不同的初始化方法。

  • UIImage类型
convenience init(frame:CGRect, images:[Any]?, didSelected:((Int,Any)->())?)
//e.g.
let imageArray = [UIImage(named: "banner_1")!,UIImage(named: "banner_2")!,UIImage(named: "banner_3")!]
let bannerView = CYPicBannerScrollView(frame: CGRect.zero,
                                           images:imageArray ) { (index, data) in
    //click event
}
  • 图片链接字符串
convenience init(frame:CGRect, urlStrings:[Any]?, placeholder:UIImage?, didSelected:((Int,Any)->())?)
//e.g.
let urlArray = ["www","www","www"]
let bannerView = CYPicBannerScrollView(frame: CGRect.zero,
                                       urlStrings: urlArray,
                                       placeholder: UIImage(named: "pic_placeholder")) { (index, data) in
    //click event
}
  • 数据模型(Model)
convenience init(frame:CGRect, models:[Any]?, placeholder:UIImage?, modelImage:@escaping (Any)->(CYImageResult), didSelected:((Int,Any)->())?) 
//e.g.
let announceArray = [Announcement(title:"First Announcement",time:"2017-01-01",image:"p1"),
                    Announcement(title:"Second Announcement",time:"2017-01-02",image:"p2"),
                    Announcement(title:"Third Announcement",time:"2017-01-03",image:"p3")]
let bannerView = CYPicBannerScrollView(frame: CGRect.zero,
                                       models: announceArray,
                                       placeholder: UIImage(named: "pic_placeholder"),
                                       modelImage: { (model) -> (CYImageResult) in
    let announcement = model as! Announcement
    return CYImageResult(data: UIImage(named: announcement.image)!, type: .image)
}) { (index, data) in
    //click event
}

对于对象模型类型的初始化，您需要在modelImage闭包中根据数据模型返回图片数据源，支持直接返回UIImage如：CYImageResult(data: UIImage(named: model.image)!, type: .image)或链接字符串如：CYImageResult(data: "http://image.com/image", type: .urlString)

2. 自定义样式

CYPicBannerScrollView支持以下形式的客制化。

bannerView.autoScrollInterval = 3.0 //自动翻页间隔，默认为5秒

bannerView.pageControlPosition = .right //PageControl的位置，默认为center
bannerView.pageControlOffset = UIOffset(horizontal: -10, vertical: -5) //PageControl的基于位置的偏移量

//自定义PageControl的样式
bannerView.pageControl.backgroundColor = UIColor(displayP3Red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 0.8)
bannerView.pageControl.layer.cornerRadius = 8

支持自定义视图的循环控件：CYCircularScrollView

要实现自定义视图循环展示只需要四个步骤。

  • 1. 继承 CYCircularScrollView
class CYAnnounceScrollView : CYCircularScrollView
  • 2. 覆写var cellClass:UICollectionViewCell.Type属性
override var cellClass:UICollectionViewCell.Type {
    return CYAnnounceCell.self //循环的视图类型，需为UICollectionViewCell子类
}
  • 3. 覆写func configureCollectionCell(_ cell:UICollectionViewCell, data:Any) -> UICollectionViewCell方法
override func configureCollectionCell(_ cell:UICollectionViewCell, data:Any) -> UICollectionViewCell {

    let announceCell = cell as! CYAnnounceCell

    if let announcement:Announcement = data as? Announcement{
        announceCell.announcement = announcement
    }

    return announceCell
}
  • 4. 根据需求覆写属性
override var scrollDirection:CYScrollDirection {
    return .vertical//滚动方向，默认为.horizontal
}

override var isScrollEnabled:Bool {
    return false//是否可以手动滚动，默认为true
}

此时您就能使用您自定义的视图控件了。

let annouceScrollView = CYAnnounceScrollView(frame: CGRect.zero, datas: self.announceArray) { (index, data) in
    //click event
}

对于更详细的使用，请参考Demo。