本文實(shí)例為大家分享了iOS實(shí)現(xiàn)頂部標(biāo)簽式導(dǎo)航欄及下拉分類菜單的全部過(guò)程，供大家參考，具體內(nèi)容如下

當(dāng)內(nèi)容及分類較多時(shí)，往往采用頂部標(biāo)簽式導(dǎo)航欄，例如網(wǎng)易新聞客戶端的頂部分類導(dǎo)航，最近剛好有這樣的應(yīng)用場(chǎng)景，參考網(wǎng)絡(luò)上一些demo，實(shí)現(xiàn)了這種導(dǎo)航效果，記錄一些要點(diǎn)。

效果圖（由于視頻轉(zhuǎn)GIF掉幀，滑動(dòng)和下拉動(dòng)畫(huà)顯得比較生硬,剛發(fā)現(xiàn)quickTime可以直接錄制手機(jī)視頻，推薦一下，很方便）

1.頂部標(biāo)簽式導(dǎo)航欄

（1）實(shí)現(xiàn)思路

其實(shí)就是在上下兩個(gè)UIScrollView上做文章，實(shí)現(xiàn)聯(lián)動(dòng)選擇切換的效果。

①頂部標(biāo)簽導(dǎo)航欄topCategoryListScrollView加載顯示分類數(shù)據(jù)，下方contentScrollView顯示分類對(duì)應(yīng)的內(nèi)容，選擇頂部標(biāo)簽后，內(nèi)容視圖contentScrollView切換到對(duì)應(yīng)視圖。同樣，滑動(dòng)下方內(nèi)容視圖，標(biāo)簽欄滑動(dòng)到指定分類并居中顯示，若分類初始位置在導(dǎo)航欄最左側(cè)或最右側(cè)，則不用滑動(dòng)到中間位置。以免兩側(cè)留出一段空白。

②頂部導(dǎo)航欄可以用label或button來(lái)代表分類，這里用的是label，添加了一個(gè)tap手勢(shì)響應(yīng)交互事件，將分類抽取為一個(gè)model，包含分類名稱、對(duì)應(yīng)內(nèi)容視圖特有的id或url及分類名稱長(zhǎng)度（分類下方的下劃線長(zhǎng)度隨名稱長(zhǎng)度變化）等屬性，根據(jù)分類的多少，決定下方內(nèi)容視圖的contentSize，再將分類順序與內(nèi)容順序?qū)?yīng)起來(lái)，在交互邏輯中實(shí)現(xiàn)聯(lián)動(dòng)切換。

③點(diǎn)擊右側(cè)按鈕，彈出下拉菜單，也可切換分類。

（2）iOS7上Autolayout的問(wèn)題

由于iOS7的Autolayout與iOS8、9的差異，在iOS7上UIScrollView的contentsize及一些使用Autolayout的UIView動(dòng)畫(huà)效果會(huì)有問(wèn)題，所以建議使用setFrame的方式來(lái)實(shí)現(xiàn)兩個(gè)頂部導(dǎo)航欄及下拉菜單的UI效果。

（3）頂部導(dǎo)航欄

遍歷分類數(shù)據(jù)，往頂部導(dǎo)航欄添加label。需要注意以下幾點(diǎn)：

①設(shè)置label的tag,與分類數(shù)據(jù)的index對(duì)應(yīng)，方便后續(xù)根據(jù)標(biāo)識(shí)進(jìn)行切換選擇；

②label的userInteractionEnabled默認(rèn)為NO,需要設(shè)置一下，方便響應(yīng)tap點(diǎn)擊操作；

③分類名稱長(zhǎng)度是動(dòng)態(tài)的，如果超出默認(rèn)長(zhǎng)度則根據(jù)實(shí)際長(zhǎng)度顯示，包括label的長(zhǎng)度及l(fā)abel底部下劃線長(zhǎng)度，所以分類數(shù)據(jù)對(duì)應(yīng)的model里需要有一個(gè)長(zhǎng)度屬性，用來(lái)記錄此長(zhǎng)度，方便后續(xù)顯示，而不用實(shí)時(shí)去計(jì)算長(zhǎng)度。

分類名稱底部的下劃線隨著分類label走，默認(rèn)選中第一個(gè)label，所以下劃線默認(rèn)也是停留在第一個(gè)，并且根據(jù)分類數(shù)量設(shè)置好頂部導(dǎo)航欄的contentSize。

（4）內(nèi)容視圖

同樣根據(jù)分類數(shù)量設(shè)置好內(nèi)容視圖的contentSize

（5）兩個(gè)scrollView之間的交互邏輯

兩個(gè)scrollView之間的聯(lián)動(dòng)需要注意單向傳遞，避免發(fā)生重復(fù)滑動(dòng)。這里的滑動(dòng)選擇操作就三種情況:

①選擇某個(gè)分類標(biāo)簽，導(dǎo)航欄滑動(dòng)到指定位置，內(nèi)容視圖滑動(dòng)到指定位置；

②滑動(dòng)內(nèi)容視圖，導(dǎo)航欄也切換滑動(dòng)到對(duì)應(yīng)分類標(biāo)簽位置；

③在下拉菜單中選擇了某個(gè)分類，導(dǎo)航欄和內(nèi)容視圖滑動(dòng)到對(duì)應(yīng)位置，實(shí)際與①一樣。

這里先說(shuō)第一種情況，點(diǎn)擊導(dǎo)航欄的分類標(biāo)簽，則block回調(diào)到controller里

先讓contentScrollView滑動(dòng)到指定位置，再通知topCategoryListScrollView滑動(dòng)。

這里需要說(shuō)明一下，scrollViewDidEndScrollingAnimation原本是內(nèi)容視圖滑動(dòng)結(jié)束后調(diào)用，用來(lái)通知導(dǎo)航欄滑動(dòng)到對(duì)應(yīng)分類標(biāo)簽。scrollViewDidEndDecelerating是處理手指在屏幕上滑動(dòng)內(nèi)容視圖結(jié)束后調(diào)用，也是通知導(dǎo)航欄滑動(dòng)到對(duì)應(yīng)分類標(biāo)簽。但是為了讓滑動(dòng)時(shí)分類標(biāo)簽切換顯示效果更更連貫，在scrollViewDidScroll里進(jìn)行了處理，當(dāng)滑出一定距離，新的index與當(dāng)前index不一致時(shí)就通知導(dǎo)航欄切換分類標(biāo)簽，實(shí)際上scrollViewDidEndScrollingAnimation和scrollViewDidEndDecelerating這時(shí)已經(jīng)可以去掉了。

類似的，第二種情況，滑動(dòng)內(nèi)容視圖，導(dǎo)航欄切換滑動(dòng)到對(duì)應(yīng)分類標(biāo)簽位置，實(shí)際就是在ScrollViewDidScroll中進(jìn)行判斷處理的。

對(duì)于第三種情況,下拉菜單中選擇分類，實(shí)際過(guò)程與第一種情況一樣。

需要注意的是切換分類時(shí)，需要記錄更新當(dāng)前分類的值，彈出下拉菜單的時(shí)候，才能標(biāo)識(shí)高亮當(dāng)前分類。

導(dǎo)航欄滑動(dòng)的時(shí)候，需要針對(duì)分類標(biāo)簽的具體位置，決定是否滑動(dòng)，以及滑動(dòng)距離，并根據(jù)分類名稱長(zhǎng)度更新下劃線的長(zhǎng)度

2.下拉分類菜單

（1）使用場(chǎng)景及方式

下拉逐漸展開(kāi)分類菜單，選擇某一個(gè)分類，導(dǎo)航欄和內(nèi)容視圖切換到對(duì)應(yīng)分類及內(nèi)容，展開(kāi)狀態(tài)時(shí)，點(diǎn)擊按鈕或者背景陰影區(qū)域逐漸收起菜單。

（2）UI元素分解

一個(gè)放在導(dǎo)航欄旁邊的按鈕dropDownButton，一個(gè)titleView,以及下拉分類菜單dropDownCategoryListView,里面包含一個(gè)collectionView展示分類數(shù)，據(jù)。dropDownButton控制titleView及dropDownCategoryListView的顯示，dropDownCategoryListView背景色設(shè)置一定透明度做背景。接下來(lái)總結(jié)一下幾個(gè)關(guān)鍵點(diǎn)。

（3）collectionView高度控制及分隔線效果

這里每一行顯示三個(gè)分類數(shù)據(jù)，分類數(shù)量及cell高度確定后即可確定collectionView的高度，即先確定縱向有幾行分類數(shù)據(jù)，行數(shù)xcell高度就是collectionView 高度。

對(duì)于分類cell的分隔線效果，可能最容易想到的就是cell之間留出間隙，collectionView背景色設(shè)置一下就行了，但是這里有兩個(gè)問(wèn)題，首先是三等分cell加上留出的間隙，間隙的寬度會(huì)帶有小數(shù)，顯示出來(lái)的效果粗細(xì)不均，并且這里cell與collectionview背景色都為白色，留出空隙也無(wú)法形成分隔線的視覺(jué)效果，所以只能在cell內(nèi)部處理，底部和右側(cè)加分隔線，根據(jù)cell所處位置控制分隔線顯示與否。

（4）點(diǎn)擊collectionView的事件處理

dropDownCategoryListView添加了tap手勢(shì)，點(diǎn)擊view則通知controller收起移除下拉分類菜單 ，collectionView作為一部分，點(diǎn)擊collectionView也會(huì)通知controller收起移除下拉分類菜單，顯然不符合要求，解決辦法是將手勢(shì)的cancelsTouchesInView屬性設(shè)為NO，即將touch事件也傳遞到collectionView上，didSelect選中分類后繼續(xù)處理即可。

（5）交互效果處理

下拉菜單的展開(kāi)和收起漸變效果用UIView的animation即可，需要注意的是收起動(dòng)畫(huà)效果，需要先去掉陰影，然后收起下拉菜單，這里的陰影其實(shí)就是dropDownCategoryListView設(shè)置了一定透明度的背景色，所以先將背景色設(shè)成clearColor再收起菜單即可。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。