灵活的轮播 RingedPages

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看332 回复回复5 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 332|回复: 5
收起左侧

灵活的轮播 RingedPages

[复制链接]
Ding 发表于 2016-11-2 14:50:20 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑
本帖最后由 Ding 于 2016-11-2 16:58 编辑

最近项目又来了新需求,要像这样展示轮播图:

灵活的轮播

灵活的轮播 RingedPages - 敏捷大拇指 - 灵活的轮播


所以封装了一个RingedPages控件。

灵活的轮播

灵活的轮播 RingedPages - 敏捷大拇指 - 灵活的轮播


灵活的轮播

灵活的轮播 RingedPages - 敏捷大拇指 - 灵活的轮播


灵活的轮播

灵活的轮播 RingedPages - 敏捷大拇指 - 灵活的轮播


这次充分考虑了灵活性:

首先,page control(就是指示页面总数及当前页面的控件)除了系统默认的小圆点,还要支持任意图片,所以写了个ImagePageControl;ImagePageControl内部水平方向支持左、中、右对齐,垂直方向支持上、中、下对齐,也有一些其他属性可以设置,如各个指示图(圆点)之间的距离等。

其次,就是主角PagesCarousel(除了page controll之外的那部分)。我们先来看看对外开放的部分:
[Swift] 纯文本查看 复制代码
public protocol PagesCarouselDataSource {
    func numberOfItems(inCarousel carousel: PagesCarousel) -> Int
    func carousel(_ carousel: PagesCarousel, pageForItemAt index: Int) -> UIView
}

public protocol PagesCarouselDelegate {
    func carousel(_ carousel: PagesCarousel, didScrollTo index: Int)
    func didSelectCurrentPage(in carousel: PagesCarousel)
}
public extension PagesCarouselDelegate {
    func carousel(_ carousel: PagesCarousel, didScrollTo index: Int) {}
    func didSelectCurrentPage(in carousel: PagesCarousel) {}
}

open class PagesCarousel: UIView, UIScrollViewDelegate {
    open var mainPageSize = CGSize.zero
    open var pageScale: CGFloat = 1.0
    open var autoScrollInterval: TimeInterval = 5.0 // is <= 0, will not scroll automatically
    
    open var dataSource: PagesCarouselDataSource?
    open var delegate: PagesCarouselDelegate?
    
    open var currentIndex: Int {
        get {
            return p_currentIndex
        }
    }
    open func reloadData() {
        needsReload = true
        for view in scrollView.subviews {
            view.removeFromSuperview()
        }
        removeTimer()
        setNeedsLayout()
    }
    open func dequeueReusablePage() -> UIView? {
        let page = reusablePages.last
        if page != nil {
            reusablePages.removeLast()
        }
        return page
    }
    open func scroll(to index: Int) {
        if index < pageCount {
            removeTimer()
            indexForTimer = index + orginPageCount
            let point = CGPoint(x: mainPageSize.width * CGFloat(index + orginPageCount), y: 0)
            scrollView.setContentOffset(point, animated: true)
            setPages(at: scrollView.contentOffset)
            refreshVisiblePageAppearance()
            addTimer()
        }
    }
}


可以看到,这是一个容器视图,通过代理的方式为您服务。轮播的可以是任意UIView而不只是图片。可以设置最中间的page的大小(mainSize)、中间滑倒两边后的缩放比例(pageScale)等,如果把mainSize设置成整个容器的大小,其实就跟一般的轮播一个样子了。另外可以注意到考虑了视图的重用,有一个deque方法可用,很像UITableView。考虑到轮播的一般都是同种类型的View,不像table view的cell那样可能有多种,所以无论从接口到实现都要简单点。

ImagePageControl和PagesCarousel完全独立,可以分开使用。

最后来一个RingedPages包装一下上边提到的page controll和pages carousel,增加一些便利属性,如pageControll的位置可以在轮播视图的上方、内部顶部、内部底部或下方之类。同样写好代理协议方便使用。

[Swift] 纯文本查看 复制代码
public protocol RingedPagesDataSource {
    func numberOfItems(in ringedPages: RingedPages) -> Int
    func ringedPages(_ pages: RingedPages, viewForItemAt index: Int) -> UIView
}
public protocol RingedPagesDelegate {
    func didSelectCurrentPage(in pages: RingedPages)
    func ringedPages(_ pages: RingedPages, didScrollTo index: Int)
}
extension RingedPagesDelegate {// This extension makes the protocal optional~
    func didSelectCurrentPage(in pages: RingedPages) {}
    func ringedPages(_ pages: RingedPages, didScrollTo index: Int) {}
}


如果对具体实现有兴趣,可以看源码。

GitHub链接:RingedPages

也写了Objective-C版的:RPRingedPages


GitHub上看到一个issue,做了解释,也放在这吧:

灵活的轮播 RingedPages

灵活的轮播 RingedPages - 敏捷大拇指 - 灵活的轮播 RingedPages












都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

不是我教你诈 发表于 2016-11-2 15:16:25 | 显示全部楼层
那被大拇指盖章的是0.8吧?
 楼主| Ding 发表于 2016-11-2 15:17:44 | 显示全部楼层
不是我教你诈 发表于 2016-11-2 15:16
那被大拇指盖章的是0.8吧?

对。page scale属性,可以任意,图片只是简单展示用法。
不是我教你诈 发表于 2016-11-2 15:19:39 | 显示全部楼层
Ding 发表于 2016-11-2 15:17
对。page scale属性,可以任意,图片只是简单展示用法。


瑶池 发表于 2016-11-9 16:13:18 | 显示全部楼层
Mark。学习了
bioswift 发表于 2016-11-16 18:04:02 | 显示全部楼层
顶起来!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表