歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> iOS中左右兩側導航欄的簡單實現

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

日期:2017/3/1 10:00:37   编辑:Linux編程

移動應用左側導航欄的元素的出現,應該是在去年年中時候,看到大部分的應用實現從上下側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,手勢動畫效果的優化添加。

demo下載地址:

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2013年資料/3月/5日/iOS中左右兩側導航欄的簡單實現

Copyright © Linux教程網 All Rights Reserved