美文网首页
iOS 头条首页滚动式页面实现 -- swift

iOS 头条首页滚动式页面实现 -- swift

作者: huxinwen | 来源:发表于2019-07-12 07:01 被阅读0次

    在平时项目开发过程中经常会遇见类似头条首页滚动式需求,效果如下:


    未命名s.gif

    最近在熟悉swift,就用swift语言封装了一个这样的工具,欢迎大神指正。

    实现思路:

    • 总体层次结构:

      对外提供的是一个继承UIView的HXWSelectScrollView,上面铺了两个UIScrollView,一个是title的HXWLabelScrollView(继承UIScrollView),另一个是contentView的HXWDisplayContentView(继承UIScrollView),另外在HXWLabelScrollView上铺上了自定义HXWLabel继承UILabel,展示title,添加了点击手势。总体结构如下: 总体结构.png
    • 对外接口类HXWSelectScrollView:
      在构造化的方法传入需要实现的滚动页数,对应的页面内容UIView,对应的titles
    init(frame: CGRect, numbersOfContentView: ()->Int, contentViewAtIndex: (_ index:Int, _ contentFrame:CGRect) -> UIView, titles:[String]) {
            super.init(frame: frame)
            let titleScro = HXWLabelScrollView.init(frame: CGRect(x: 0.0, y: 0.0, width: bounds.width, height: 50.0), numberOfLables: numbersOfContentView, titles: titles)///title view
            titleScro.labelScrollViewDelegate = self
            addSubview(titleScro)
            titleSc = titleScro
            let contenScro = HXWDisplayContentView.init(frame: CGRect(x: 0.0, y: 50.0, width: bounds.width, height: bounds.height-50.0), numbersOfContentView: numbersOfContentView, contentViewAtIndex: contentViewAtIndex)///content view
            contenScro.isPagingEnabled = true
            contenScro.delegate = self
            addSubview(contenScro)
            contentSc = contenScro
        }
    ///点击title回调HXWLabelScrollViewDelegate
    extension HXWSelectScrollView :HXWLabelScrollViewDelegate{
        
        func didSelectTitleAtIndex(_ index: Int) {
            currentPage = index;
            scrollContentToPage(page: index)
        }
        func scrollContentToPage(page:Int) {///将内容更新的对应的title页面
            let offset = UIScreen.main.bounds.width*CGFloat(page)
            self.contentSc?.contentOffset = CGPoint(x: offset, y: 0.0)
        }
    }
    ///滑动内容页面回调UIScrollViewDelegate
    extension HXWSelectScrollView :UIScrollViewDelegate{
        
        func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
            print( "scrollViewDidEndDragging + \(scrollView.contentOffset.x) + \(decelerate)")
            didDraging = true
            
        }
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            if didDraging {///手滑动页面
                print("scrollViewDidScroll + \(scrollView.contentOffset.x)")
                let currentOffset = CGFloat(currentPage)*UIScreen.main.bounds.width
                let scrollOffset = scrollView.contentOffset.x
                let offset = scrollOffset - currentOffset
                print("\(offset)")
                if offset > UIScreen.main.bounds.width/2.0 {//右翻
                    currentPage += 1
                    titleSc?.scrollToIndex(index: currentPage)
                }else if offset < UIScreen.main.bounds.width/2.0*(-1.0){///左翻
                    currentPage -= 1
                    titleSc?.scrollToIndex(index: currentPage)
                }else if offset == 0{//没变
                }
                didDraging = false
            }
        }
    }
    

    demo的调用如下:

     override func viewDidLoad() {
            super.viewDidLoad()
            let scro = HXWSelectScrollView.init(frame: view.bounds, numbersOfContentView: { () -> Int in
                 return 16///数量
            }, contentViewAtIndex: { (index,contentBounds) -> UIView in///内容试图
                let view = UIView.init()
                view.backgroundColor = UIColor.lightGray
                let conten = UILabel.init()
                view.addSubview(conten)
                conten.font = UIFont.systemFont(ofSize: 30.0)
                conten.text = "hello \(index)"
                conten.textAlignment = NSTextAlignment.center
                conten.frame = contentBounds
                return view
            }, titles: ["hello","hello","hello","hello","hello","hello","hello","hello","hello","hello","hello","hello","hello","hello","hello","hello"])///title名称
            
            view.addSubview(scro)
            scroView = scro
        }
    

    具体见demo,欢迎指正!!!

    相关文章

      网友评论

          本文标题:iOS 头条首页滚动式页面实现 -- swift

          本文链接:https://www.haomeiwen.com/subject/xgsckctx.html