新闻类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

posted @ 2018-11-13 16:50  6度XZ  阅读(675)  评论(1编辑  收藏  举报