小敘：寫在前面，最近沒事在簡(jiǎn)書中瀏覽別人寫的技術(shù)文章，發(fā)現(xiàn)簡(jiǎn)書中點(diǎn)擊文章作者的頭像，點(diǎn)擊進(jìn)去的這個(gè)頁(yè)面效果感覺不錯(cuò)，頭像的放大縮小，以及下面的類似今日頭條的那種橫向標(biāo)簽菜單。發(fā)現(xiàn)比較有意思，還有就是說(shuō)好了，不斷鞭策自己提高技術(shù)多分享有用的干貨的，爆發(fā)吧小宇宙哈哈

直接進(jìn)入正題

首先我們先來(lái)看看做出來(lái)的效果，這種效果在很多電商類中的APP很長(zhǎng)見，感覺應(yīng)該還是挺實(shí)用的

QQ20170829-163100.gif

頭部原理分析

• 首先是上面的原型頭像的放大與縮小，這里比較簡(jiǎn)單的啦，就是根據(jù)tableView 的便宜量算一下就可以了，我們還是簡(jiǎn)單介紹一下吧
• 首先有一個(gè)最大值與最小值，也就是說(shuō)最大圖像與最小圖像的尺寸
  我這里用的是

    let MaxSize:CGFloat = 60 //圖像最大值
    let MinSize:CGFloat = 30 //圖像最小值
    let TopHeight:CGFloat = 240 //最上面的大小

大家注意沒有上面還有一點(diǎn)細(xì)節(jié)就是那個(gè)很線 的問(wèn)題，當(dāng)便宜大于大與最上面的headView 的高度的時(shí)候就會(huì)隱藏 導(dǎo)航下面的那條線 和 動(dòng)態(tài)文章更多上線的線，在這里便于控制我使用的是自定義的導(dǎo)航

• 主要代碼實(shí)現(xiàn)

    //scrollView代理方法
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        var oy = scrollView.contentOffset.y
        if oy>100 {
            oy = 100
        }else if oy < 0{
            oy = 0
        }
//        print(oy)
        /*   100  --30,30
              0   --- 60,60
              每增加1個(gè)單位應(yīng)該變化的量
        */
        let oneadd:CGFloat = (60-30)/100    
        
        let currntSize = MaxSize - oneadd*oy
        
        let width:CGFloat = currntSize
        let ox = screenWidth()/2-width/2
        headImgView?.frame = CGRect.init(x: ox, y: 25, width: width, height: width)

        //處理線下面的橫線
        oy = scrollView.contentOffset.y
//        print("currnt----\(oy)")
        if oy >= TopHeight {
            navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 0)
            self.myTwoCell?.hideUpLine()
        }else{
            navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 1)
            self.myTwoCell?.showUpLine()

        }
     
// 頭部的問(wèn)題到這里就處理完了，此處的代碼我先刪除方便我們?yōu)g覽
    }

• 代碼中的關(guān)鍵點(diǎn)我已經(jīng)通過(guò)注釋的方式說(shuō)明了，相信大家肯定可以理解的畢竟也是多么難的效果

菜單的實(shí)現(xiàn)原理

• 這里開始還是遇到了點(diǎn)小問(wèn)題的，是把問(wèn)題想的簡(jiǎn)單了

彎路： 這里先講一下我的彎路，
1.外層是一個(gè)tableView 分成兩段
2.每一段只有一個(gè)cell ,第0段的cell 就是 （動(dòng)態(tài)，文章，跟多） 上面的部分見識(shí)我們就叫它OneCell吧
3.（動(dòng)態(tài)，文章，跟多）第1端的段頭
4.（動(dòng)態(tài)，文章，跟多）后面的那部分是第1段的cell ，我們就叫它TwoCell 吧，TwoCell上用的是一個(gè)網(wǎng)絡(luò)框架 >（ZJScrollPageView）
結(jié)果：這種思路做了發(fā)現(xiàn)，（動(dòng)態(tài)，文章，跟多）段頭是有了吸頂?shù)男Ч?，然而產(chǎn)生了問(wèn)題,不能聯(lián)動(dòng)的問(wèn)題，內(nèi)tableview側(cè)動(dòng)，外側(cè)tableview動(dòng),手勢(shì)沖突了，經(jīng)過(guò)了一段時(shí)間的處理終于，解決了手勢(shì)沖突的問(wèn)題
處理方式是：給外層與內(nèi)側(cè)控制器添加一個(gè)Bool 字段用來(lái)控制哪個(gè)一個(gè)可以動(dòng) ， 總之就是（父動(dòng)子不動(dòng)，父動(dòng)子不動(dòng)）

• 感覺一切盡在掌握之中，哈哈哈哈
• 問(wèn)題：當(dāng)運(yùn)行的時(shí)候發(fā)現(xiàn)了一個(gè)問(wèn)題，就是往上滑猛一滑的時(shí)候，到TopHeight 這個(gè)位置的時(shí)候就是停住了，必須再滑一下內(nèi)層的tableView 才能動(dòng)

• 經(jīng)過(guò)上線的問(wèn)題后重新整理思路，在上面的基礎(chǔ)上改造一下大體思路還是差不多
• 終極方案 ：讓外層的tableView支持多種手勢(shì)，最簡(jiǎn)單的辦法就是

class GestureTableView: UITableView,UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
}

這樣就好了
此時(shí)你在看我們的關(guān)鍵性代碼就是我說(shuō)的

父動(dòng)子不動(dòng)，子動(dòng)父不動(dòng)

• 我們看下代碼如何處理

    //scrollView代理方法
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        var oy = scrollView.contentOffset.y
        if oy>100 {
            oy = 100
        }else if oy < 0{
            oy = 0
        }
//        print(oy)
        //100  --30,30
        //0   --- 60,60
        let oneadd:CGFloat = (60-30)/100
        
        let currntSize = MaxSize - oneadd*oy
        
        let width:CGFloat = currntSize
        let ox = screenWidth()/2-width/2
        headImgView?.frame = CGRect.init(x: ox, y: 25, width: width, height: width)

        
        
        //處理線下面的橫線
        oy = scrollView.contentOffset.y
//        print("currnt----\(oy)")
        if oy >= TopHeight {
            navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 0)
            self.myTwoCell?.hideUpLine()
        }else{
            navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 1)
            self.myTwoCell?.showUpLine()

        }
/*---------------------------------------------------------------------*/
        //處理手勢(shì)問(wèn)題
        if oy >= TopHeight {
            scrollView.contentOffset = CGPoint.init(x: 0, y: TopHeight)
           
            if self.canScroll! {
                self.canScroll = false  //自己不動(dòng)
                //通知子類動(dòng)
                let nc = NotificationCenter.default
                nc .post(name: NSNotification.Name.init(rawValue: "POST"), object: true)
            }
           
        }else{
            if (!self.canScroll!) {//到最頂部
                scrollView.contentOffset = CGPoint.init(x: 0, y: TopHeight)
            }
           
        }
        scrollView.showsVerticalScrollIndicator = self.canScroll! ? true:false;
    }
    

子類中的關(guān)鍵代碼實(shí)現(xiàn)

 func scrollViewDidScroll(_ scrollView: UIScrollView) {

        if (!self.canScroll!) {
            scrollView.contentOffset = CGPoint.zero
        }
        let oy = scrollView.contentOffset.y
        if oy <= 0 {
            
            //主動(dòng)子不動(dòng)
            self.canScroll = false
            let nc = NotificationCenter.default
            nc.post(name: Notification.Name.init(rawValue: "MAINPOST"), object: true)
            scrollView.contentOffset = CGPoint.ze   
        }
        scrollView.showsVerticalScrollIndicator = self.canScroll! ? true:false;
    }
    

終于講完了

• 后續(xù)差不多，就這樣啦，具體的實(shí)現(xiàn)當(dāng)然也會(huì)奉獻(xiàn)出來(lái)的，歡迎喜歡哦

Demo留一下一個(gè)問(wèn)題,當(dāng)滑到最底部的時(shí)候，觸摸頂部的狀態(tài)欄 不會(huì)自動(dòng)滑到，第一行，這個(gè)問(wèn)題還沒有解決如果你有好多辦法歡迎留言，

• 我在想比較low 的方法應(yīng)該就是可以在狀態(tài)欄上放一個(gè)透明的按鈕吧，點(diǎn)擊的時(shí)候 子、父都回到第一行

GitHub demo地址鏈接