iOS開發筆記13:頂部標籤式導覽列及下拉分類菜單，ios導覽列

iOS開發筆記13:頂部標籤式導覽列及下拉分類菜單，ios導覽列

    當內容及分類較多時，往往採用頂部標籤式導覽列，例如網易新聞用戶端的頂部分類導航，最近剛好有這樣的應用情境，參考網路上一些demo，實現了這種導航效果，記錄一些要點。

    （由於視頻轉GIF掉幀，滑動和下拉動畫顯得比較生硬,剛發現quickTime可以直接錄製手機視頻，推薦一下，很方便）

    

     1.頂部標籤式導覽列   （1）實現思路

      其實就是在上下兩個UIScrollView上做文章，實現聯動選擇切換的效果。

     ①頂部標籤導覽列topCategoryListScrollView載入顯示分類資料，下方contentScrollView顯示分類對應的內容，選擇頂部標籤後，內容視圖contentScrollView切換到對應視圖。同樣，滑動下方內容視圖，標籤欄滑動到指定分類並置中顯示，若分類初始位置在導覽列最左側或最右側，則不用滑動到中間位置。以免兩側留出一段空白。

    ②頂部導覽列可以用label或button來代表分類，這裡用的是label，添加了一個tap手勢響應互動事件，將分類抽取為一個model，包含分類名稱、對應內容視圖特有的id或url及分類名稱長度（分類下方的底線長度隨名稱長度變化）等屬性，根據分類的多少，決定下方內容視圖的contentSize，再將分類順序與內容順序對應起來，在互動邏輯中實現聯動切換。

    ③點擊右側按鈕，彈出下拉式功能表，也可切換分類。

   （2）iOS7上Autolayout的問題

    由於iOS7的Autolayout與iOS8、9的差異，在iOS7上UIScrollView的contentsize及一些使用Autolayout的UIView動畫效果會有問題，所以建議使用setFrame的方式來實現兩個頂部導覽列及下拉式功能表的UI效果。

   （3）頂部導覽列

     遍曆分類資料，往頂部導覽列添加label。需要注意以下幾點：

    ①設定label的tag,與分類資料的index對應，方便後續根據標識進行切換選擇；

    ②label的userInteractionEnabled預設為NO,需要設定一下，方便響應tap點擊操作；

    ③分類名稱長度是動態，如果超出預設長度則根據實際長度顯示，包括label的長度及label底部底線長度，所以分類資料對應的model裡需要有一個長度屬性，用來記錄此長度，方便後續顯示，而不用即時去計算長度。   

     分類名稱底部的底線隨著分類label走，預設選中第一個label，所以底線預設也是停留在第一個，並且根據分類數量設定好頂部導覽列的contentSize。

   （4）內容視圖

     同樣根據分類數量設定好內容視圖的contentSize

       

   （5）兩個scrollView之間的互動邏輯 

     兩個scrollView之間的聯動需要注意單向傳遞，避免發生重複滑動。這裡的滑動選擇操作就三種情況:

    ①選擇某個分類標籤，導覽列滑動到指定位置，內容視圖滑動到指定位置；

    ②滑動內容視圖，導覽列也切換滑動到對應分類標籤位置；

    ③在下拉式功能表中選擇了某個分類，導覽列和內容視圖滑動到對應位置，實際與①一樣。

    這裡先說第一種情況，點擊導覽列的分類標籤，則block回調到controller裡

      先讓contentScrollView滑動到指定位置，再通知topCategoryListScrollView滑動。

      這裡需要說明一下，scrollViewDidEndScrollingAnimation原本是內容視圖滑動結束後調用，用來通知導覽列滑動到對應分類標籤。scrollViewDidEndDecelerating是處理手指在螢幕上滑動內容視圖結束後調用，也是通知導覽列滑動到對應分類標籤。但是為了讓滑動時分類標籤切換顯示效果更更連貫，在scrollViewDidScroll裡進行了處理，當滑出一定距離，新的index與當前index不一致時就通知導覽列切換分類標籤，實際上scrollViewDidEndScrollingAnimation和scrollViewDidEndDecelerating這時已經可以去掉了。

    類似的，第二種情況，滑動內容視圖，導覽列切換滑動到對應分類標籤位置，實際就是在ScrollViewDidScroll中進行判斷處理的。

    對於第三種情況,下拉式功能表中選擇分類，實際過程與第一種情況一樣。

    需要注意的是切換分類時，需要記錄更新當前分類的值，彈出下拉式功能表的時候，才能標識高亮當前分類。

    導覽列滑動的時候，需要針對分類標籤的具體位置，決定是否滑動，以及滑動距離，並根據分類名稱長度更新底線的長度

     2.下拉分類菜單   （1）使用情境及方式

     下拉逐漸展開分類菜單，選擇某一個分類，導覽列和內容視圖切換到對應分類及內容，展開狀態時，點擊按鈕或者背景陰影地區逐漸收合菜單。

   （2）UI元素分解

      一個放在導覽列旁邊的按鈕dropDownButton，一個titleView,以及下拉分類菜單dropDownCategoryListView,裡麵包含一個collectionView展示分類數，據。dropDownButton控制titleView及dropDownCategoryListView的顯示，dropDownCategoryListView背景色設定一定透明度做背景。接下來總結一下幾個關鍵點。

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

     這裡每一行顯示三個分類資料，分類數量及cell高度確定後即可確定collectionView的高度，即先確定縱向有幾行分類資料，行數xcell高度就是collectionView 高度。

     對於分類cell的分隔線效果，可能最容易想到的就是cell之間留出間隙，collectionView背景色設定一下就行了，但是這裡有兩個問題，首先是三等分cell加上留出的間隙，間隙的寬度會帶有小數，顯示出來的效果粗細不均，並且這裡cell與collectionview背景色都為白色，留出空隙也無法形成分隔線的視覺效果，所以只能在cell內部處理，底部和右側加分隔線，根據cell所處位置控制分隔線顯示與否。

   （4）點擊collectionView的事件處理

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

   （5）互動效果處理

     下拉式功能表的展開和收合漸層效果用UIView的animation即可，需要注意的是收合動畫效果，需要先去掉陰影，然後收合下拉式功能表，這裡的陰影其實就是dropDownCategoryListView設定了一定透明度的背景色，所以先將背景色設成clearColor再收合菜單即可。

     3.參考

     (1)http://code.cocoachina.com/view/128556

     (2)https://github.com/dsxNiubility/SXNews