专栏首页王大锤新闻类App顶部菜单栏封装

新闻类App顶部菜单栏封装

概述

最近有一个需求,类似今日头条顶部的菜单栏。唯一区别是需要带可移动的下划线。网上查找资料,发现解决方案大部分是用UIScrollView实现。下方VC控制用UICollectionView。这样可以解决问题,但是不完美,当标签很多的时候,这时候的UIScrollView上会有大量写死的Button,没有达到复用的目的。所以自己封装了一个空间。菜单栏使用UICollectionView,VC控制使用PageViewController。

这样做的目的是为了完全复用,支持无限扩展。因为菜单栏是collectionView,所以不怕内存爆掉。VC的控制使用PageViewController,好处是滑动的时候可以懒加载,只有用户浏览的时候才会实例化并缓存起来。网上的其他方案都是一次性把所有VC都实例化,然后使用CollectionView管理,这是不好的,因为有些VC用户可能从来不浏览,没必要实例化。

接下来就详细介绍一下。

实现难点

  1. 菜单栏需要把所选的一栏居中显示 使用ScrollView,需要手动计算,设置offset,让其被选栏居中,比较麻烦。如果使用CollectionView,CollectionView有一个方法:  open func scrollToItem(at indexPath: IndexPath, at scrollPosition: UICollectionView.ScrollPosition, animated: Bool) 只要将scrollPosition设置为.centeredHorizontally,即可实现该功能
  2. 左右滑动的时候,可以切换所选菜单,且下方横线需要跟着动 使用ScrollView的话就比较方便了,计算滑动距离和屏幕宽的比例,让下划线跟着滑即可。但是使用CollectionView的话,滑完之后会自动居中显示被选菜单。位置就会出错。解决方案就是让下划线跟着被选菜单cell的位置。 在collectionView中,滑动cell的时候其实只是offset在变,cell的frame其实是不变的,collectionView其实也是个ScrollView,cell是加在scrollView的contentView上的。在这里卡壳了好久。解决方案是,将cell的坐标转化到collectionView上,然后让下划线的中心点和cell在collectionView上中心点保持一致 if let currentCell = collectionView.cellForItem(at: IndexPath(row: currentIndex, section: 0)) { lineView.center.x = currentCell.convert(CGPoint(x: currentCell.bounds.width / 2.0, y: 0), to: scrollView).x }
  3. PageViewController没有ScrollView的Delegate,滑动的时候,不知道滑动的情况。 可以使用一个暗黑技巧: for subview in pageViewController.view.subviews { if let scrollView = subview as? UIScrollView { scrollView.delegate = self } } 然后再scrollViewDidScroll方法中操作 public func scrollViewDidScroll(_ scrollView: UIScrollView) { if isForbideScroll { return} var progress:CGFloat = 0 var nextIndex = 0 let screenWidth = UIScreen.main.bounds.width let count = items.count //判断是左移还是右移 if UIScreen.main.bounds.width > scrollView.contentOffset.x{ //右移动 nextIndex = currentIndex - 1 if nextIndex < 0 { nextIndex = 0 } //计算progress progress = (screenWidth - scrollView.contentOffset.x)/screenWidth } if UIScreen.main.bounds.width < scrollView.contentOffset.x{ //左移 nextIndex = currentIndex + 1 if nextIndex > count - 1 { nextIndex = count - 1 } progress = (scrollView.contentOffset.x - screenWidth)/screenWidth } if progress != 0.0 { topBar.pageViewScroll(nextIndex: nextIndex, progress: progress) } }

如何使用

  1. 风格控制类SegmentTopBarStyle
  2. 数据源[SegmentItem]
  3. 自定义VC必须实现ChildViewControllerProtocol协议,协议中初始化方法可以按需修改,增加参数。初始化方法修改后记得在ScrollPageView中修改自定义VC的初始化。
  4. ScrollPageView中使用了SegmentTopBarView,所以你也可以单独使用SegmentTopBarView
override func viewDidLoad() {
        super.viewDidLoad()
        
        //风格控制
        let style = SegmentTopBarStyle()
        style.bottomLineColor = UIColor.red
        style.showExtraButton = false
        
        //datasource
        let items = dataSource()
        
        //ScrollPageView
        let subiView = ScrollPageView(frame: view.bounds,
                                      items: items,
                                      style: style,
                                      parentVC: self,
                                      customClassType: ChildViewController.self)
        view.addSubview(subiView)
    }

    func dataSource() -> [SegmentItem] {
        // 讲数据转化为SegmentItem的数组
        var arr = [SegmentItem]()
        for i in 0...10 {
            let item = SegmentItem(title: "title\(i)", cid: "\(i)")
            arr.append(item)
        }
        return arr
    }

源码

demo基于swift4.0。代码不多,稍微阅读下就能看懂。你也许会有更多的个性化的定制,可以在这个结构上随意改,拿走不谢

demo: https://github.com/wangdachui/Segment

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SDWebImage源码阅读-第一篇

    王大锤
  • iOS11UINavigationBar的item左右间距调整

    王大锤
  • iOS11UINavigationBar的item左右间距调整

    王大锤
  • python 数据图表呈现

    平时压力测试,生成一些数据后分析,直接看 log 不是很直观,前段时间看到公司同事分享了一个绘制图表python 模块 : plotly, 觉得很实用,利用周...

    orientlu
  • 打破传统方法,MIT新芯片帮自动驾驶汽车穿越浓雾

    依赖于光成像传感器的自动驾驶汽车的视线常常难以穿透雾这样会致盲光传感器的环境。但是,麻省理工学院的研究人员开发出了一种亚太赫兹辐射接收系统,它可以在传统方法失效...

    机器之心
  • 逆向一期/005/解决文件大小自校验

    使用 ESP 脱壳后,程序打开没有反应,实际上程序已经运行了,但是检验到被修改了(现在的壳都自带压缩功能,脱壳后大小会发生变化)

    yichen
  • Linux最好用远程管理 xshell

    用户1700948
  • GitHub 下载东西很慢?不存在的~!

    GitHub 是每一个程序员经常访问的网站之一,其实程序员的网站还有很多,比如 StackOverFlow。一提到 GitHub,大家第一个想到的一定是 clo...

    不可言诉的深渊
  • SAP mobile platform(SMP)MEAP产品评测分析

    SAP于2010年7月通过58亿美元购得Sybase。SAP的Sybase Unwired Platform(SUP)平台是一个移动应用的开发、执行和管理套件。...

    人称T客
  • 从 “ 短信劫持马 ” 来谈APP安全

    这种短信劫持木马的概念和新闻我想大家都应该接触过了,就不怎么说概念了,具体的可以搜一搜新闻,一抓一大把。

    网e渗透安全部

扫码关注云+社区

领取腾讯云代金券