1. 程式人生 > >IOS中左右兩側導航欄的簡單實現

IOS中左右兩側導航欄的簡單實現

移動應用左側導航欄的元素的出現,應該是在去年年中時候,看到大部分的應用實現從上下側tab到左側menu的演化。

左側導航欄設計的理念的有一點說是,減少移動應用的介面雍容,後來發現在web應用中也開始大量出現該設計,比如我常用的豆瓣FM,

它是類似於用了左側抽屜的設計。

對於一般概念的抽屜概念,Andriod倒是早有SlidingDrawer這個SDK提供的api,不過後期大量實現的都是自定義frame佈局或是其他。

在移動應用介面互動的設計上,左側導航欄的出現,有一點來說,確實是比傳統的上下選項卡切換相對來的新奇,控制元件佈局上空間的減少。

作為一個閒的蛋疼的人,以至於我早期也有打算把我們公司的應用導航上做一個視覺重構。

但是後來考慮到我們應用面向的使用者年齡層,以及應用在使用者中側重點的問題,也就沒做改動。

因為對於30歲以上的使用者來說,習慣性以及傳統的守舊思想。

對於一些時尚型,科技型,牛逼型,社交類扥應用,倒是可以做一些推陳出新的新鮮設計。

因此,我個人的考慮是,在兩種情況下,可以考慮用用,

第一種,在對於有兩級以上的切換欄導航。

第二種,閒的蛋疼

先畫個簡單的圖說明下


假設1,2,3,4,5是一級切換選單;

T1,T2,T3。。是二級切換選單。

若是未使用下冊切換tab選單,由於中間顯示內容的空間就會比較狹小。此時就可以考慮使用左側選單欄。

。。。

大致模型就是如上圖。

可以分別實現:左側選單,右側選單,左右兩側選單。

大致說下原理和步驟:


1.將SideNav設計成一個ViewController控制元件,用來管理控制3個ViewController:LeftVC,RootVC,RightVC;也算一種常見的思路,比如Tabviewcontroller其實也差不多這樣,可以理解是一個管理ViewController的controller控制器。

2.Setter入內容,左,右側導航欄控制器。同時需要重置內容頁也就是rootViewController的NavBar,比如,只是SetLeft,那麼只會顯示左側按鈕。

3. 左側右側選單出現的實現:因為SideNav本身也是一個ViewController,那麼他本身自帶一個View,在預設set了RootViewController時(或者說是內容ViewController),

顯示時,將RootViewController的View依附到SideNav的View上面;在點選顯示左側選單欄時,將LeftVC中的View插入新增到SideNav的View的第一層子檢視,rootView就成了第二層,然後在改變rootView的原點左邊,整體往右邊移動。顯示右側導航欄思路一樣。

4.點選左側選單控制介面的某個選單按鈕跳轉切換,以前看到的一個程式碼例子類似是使用了全域性控制器的思路,直接根據Appdelegate拿到SideNavVC的物件來操作,

也可考慮使用委託來實現。

5.手勢,細化和改進。

該demo部分是資料來源於網際網路,在早期的一個應用中用到過,這個是進過簡化的簡單修改的版本

:1.修改了可以設定單側或兩側欄均可實現,

    2.兩側選單可見區域的自定義。

    3.修改部分手勢實現程式碼

     4.製造了一些新的bug。

個人建議:整體demo的參考可以分兩部分:1,基本模型切換;2,手勢動畫效果的優化新增。