前言, 之前寫(xiě)了動(dòng)手寫(xiě)一個(gè)快速集成網(wǎng)易新聞，騰訊視頻，頭條首頁(yè)的ScrollPageView,顯示滾動(dòng)視圖這篇文章, 有多個(gè)朋友問(wèn)到怎么實(shí)現(xiàn)類(lèi)似簡(jiǎn)書(shū)個(gè)人主頁(yè)的滑塊效果, 本著學(xué)習(xí)的目的,筆者去研究了一下,這里給出一種比較簡(jiǎn)單的實(shí)現(xiàn)方案(也可以使用UIScrollView來(lái)實(shí)現(xiàn),不過(guò)略顯麻煩,這里就省略了)

最終效果

簡(jiǎn)書(shū)個(gè)人主頁(yè)效果.gif

注意!!! 實(shí)現(xiàn)這個(gè)效果github上的代碼有更新,增加了一個(gè)代理方法來(lái)實(shí)現(xiàn)在切換頁(yè)面的時(shí)候?qū)⒒瑝K置頂(簡(jiǎn)書(shū)沒(méi)有這個(gè)效果) , 請(qǐng)大家使用最新的代碼

構(gòu)思: 利用UITableView的自身的sectionView的浮動(dòng)效果來(lái)實(shí)現(xiàn).

1. 設(shè)置tableView只有一個(gè)section并且只有一行row

2. 設(shè)置這個(gè)section的View為segmentView,并且設(shè)置tableView.sectionHeaderHeight為segmentView的高度,來(lái)容納滑塊, 這樣就可以實(shí)現(xiàn)在滾動(dòng)tableView的時(shí)候?qū)崿F(xiàn)滑塊的浮動(dòng)效果

3. 添加顯示滾動(dòng)頁(yè)面的contentView到這一個(gè)cell的contentView, 并且設(shè)置tableView.rowHeight為 顯示滾動(dòng)頁(yè)面的contentView的高度

4. 設(shè)置tableView的headView為自定義的

5. 根據(jù)個(gè)人需要設(shè)置 segmentView, tableView, contentView的frame, 特別需要注意的是如果tableView是從storyBoard中連線得到的, 那么設(shè)置其他的frame就和demo中有差異,具體的大家自己去研究吧

6. 利用UIScrollViewDelegate 這里的代理可以監(jiān)控tableView的滾動(dòng), 在滾動(dòng)的時(shí)候就可以做一些事情, 比如使navigationBar漸變, 或者像簡(jiǎn)書(shū)一樣改變頭像的屬性

實(shí)現(xiàn)部分

1 屬性部分, 這些懶加載方法里面設(shè)置了他們的相關(guān)屬性, 其中的具體設(shè)置和動(dòng)手寫(xiě)一個(gè)快速集成網(wǎng)易新聞，騰訊視頻，頭條首頁(yè)的ScrollPageView,顯示滾動(dòng)視圖這里面介紹的使用相同, 這里就不在贅述了

屬性.png

2 tableView的設(shè)置

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "簡(jiǎn)書(shū)個(gè)人主頁(yè)"
        
        addChildVcs()
        
        // 這個(gè)是必要的設(shè)置
        automaticallyAdjustsScrollViewInsets = false
        
        // 設(shè)置tableView的headView
        tableView.tableHeaderView = setTableViewHeadView()
        tableView.tableFooterView = UIView()
        // 設(shè)置cell行高為contentView的高度
        tableView.rowHeight = contentView.bounds.size.height
        // 設(shè)置tableView的sectionHeadHeight為segmentViewHeight
        tableView.sectionHeaderHeight = CGFloat(segmentViewHeight)
        view.addSubview(tableView)
    }

3 tableView的DataSource設(shè)置

// 返回一行
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
 // 設(shè)置cell的內(nèi)容為顯示滾動(dòng)視圖的contentView
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .Default, reuseIdentifier: "cellId")
        
        cell.contentView.subviews.forEach { (subview) in
            subview.removeFromSuperview()
        }
        
        cell.contentView.addSubview(contentView)
        
        return cell
    }
   // 設(shè)置sectionHeadView, 實(shí)現(xiàn)滑塊的浮動(dòng)效果
    func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        
        return topView
    }
    

4 tableView的滾動(dòng)代理方法 -- demo中沒(méi)有具體使用

// MARK:- UIScrollViewDelegate 這里的代理可以監(jiān)控tableView的滾動(dòng), 在滾動(dòng)的時(shí)候就可以做一些事情, 比如使navigationBar漸變, 或者像簡(jiǎn)書(shū)一樣改變頭像的屬性
extension Vc7Controller: UIScrollViewDelegate {
    func scrollViewDidScroll(scrollView: UIScrollView) {
        
    }
}

5 ContentViewDelegate的代理實(shí)現(xiàn)

// MARK:- ContentViewDelegate
extension Vc7Controller: ContentViewDelegate {
    var segmentView: ScrollSegmentView {
        return topView
    }
    
    // 監(jiān)控開(kāi)始滾動(dòng)contentView的時(shí)候, 這里將滾動(dòng)條滾動(dòng)至頂部(簡(jiǎn)書(shū)沒(méi)有這個(gè)效果,但其他的有---這里拒絕廣告)
    func contentViewDidBeginMove() {
        tableView.setContentOffset(CGPoint(x: 0.0, y: headViewHeight), animated: true)
    }
    
}

源碼地址, 如果您覺(jué)得有幫助,不妨給個(gè)star鼓勵(lì)一下,歡迎關(guān)注, 歡迎交流

文章已更新, 移步這里