網(wǎng)易導(dǎo)航條心得(iOS版)
一贝淤、界面分析
首先,我們必須弄清楚它的圖層組成。所有的界面都是承載在一個(gè)ViewController上的灼芭,這一點(diǎn)事肯定的,我們把這個(gè)ViewController叫做MainVC般又;其次MainVC上最好放一個(gè)封裝好的容器彼绷,一下的就把剩下的圖層全部包括進(jìn)去。
其次茴迁,就是這個(gè)容器的設(shè)計(jì)寄悯。在這個(gè)容器上有兩個(gè)scrollView,topScroll上放置的是幾個(gè)按鈕堕义,bottomScroll上放置的是幾個(gè)ViewController猜旬,兩個(gè)scrollView需要實(shí)現(xiàn)聯(lián)動(dòng);
最后倦卖,兩個(gè)scrollView之間還有個(gè)小滑條洒擦,跟著動(dòng),可以提高用戶體驗(yàn)怕膛。
二熟嫩、具體實(shí)現(xiàn)
1,容器的實(shí)現(xiàn)
首先實(shí)現(xiàn)小滑條褐捻,這其實(shí)就是一個(gè)帶顏色的view條掸茅,設(shè)置好frame后在scrollView的代理方法中控制著位置的偏移,沒什么亮點(diǎn)可講柠逞。
其次是topScroll的設(shè)計(jì)昧狮,在有導(dǎo)航條的情況下,scrollView會(huì)自動(dòng)下壓64像素,所以一般情況需要設(shè)置self.automaticallyAdjustsScrollViewInsets=NO板壮;但是在本項(xiàng)目中逗鸣,使用此方法并不能有效解決該問題。不清楚為什么,這還需要查資料好好研究研究慕购。另外一種方法是聊疲,設(shè)置topScroll上面的控件的時(shí)候?qū)⑵渥鴺?biāo)設(shè)置得上移64像素。
再次是topScroll上按鈕點(diǎn)擊事件的實(shí)現(xiàn)沪悲。oldBtn.selected設(shè)置為NO获洲,當(dāng)前btn.selected設(shè)置為YES。接下來(lái)第一次設(shè)置聯(lián)動(dòng)殿如,根據(jù)btn的tag值決定bottomScroll的contentOffset贡珊,一個(gè)btn對(duì)應(yīng)一個(gè)bottomScroll上的一個(gè)VeiwController,然后創(chuàng)建一個(gè)動(dòng)畫涉馁,使bin放大1.3倍门岔,達(dá)到字體放大的效果。接下來(lái)是第二次設(shè)置聯(lián)動(dòng)烤送,根據(jù)slider小滑塊的MaxX寒随,來(lái)設(shè)置topBar的contentOffset(在iOS的界面布局中我們可以使用CGRectGetMaxX 這個(gè)方法來(lái)方便的獲取當(dāng)前控件的x坐標(biāo)值+寬度的數(shù)值)。第三次聯(lián)動(dòng)的設(shè)計(jì)帮坚,在scrollView的代理方法中設(shè)置slider的frame妻往,以達(dá)到移動(dòng)的效果。
btn.tag==>>VC==>>Slider==>>topBar
基本思路就是這樣试和,具體尺寸坐標(biāo)讯泣,不難解決。