天天看點

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

使用swrevealviewcontroller實作側邊菜單功能詳解

  下面通過兩種方法詳解swrevealviewcontroller實作側邊菜單功能:

1.使用storyboard實作 2.純代碼實作

前言:手機螢幕始終有限,如何在有限的展示空間提供便捷的導航入口呢?facebook的app設計了一個可以從螢幕側邊滑出的導航,這一設計模式引得各大主流 app盡相模仿。一時間,path,mailbox,gmail都采用了這種設計。github 上也有很多側欄導航的解決方案,這裡我們使用john的<code>swrevealviewcontroller</code>類來實作,這裡就通過分别詳細的通過storyboard和純代碼結合xib來實作。

它的工作流程:

使用者點選“list”按鈕,導航向右滑出

使用者再次點選“list”按鈕,導航向左收起

通過左右滑動也能達到同樣的效果

不管接下來用的是storyboard方法實作還是純代碼實作,首先都要做的一件事情就是将架構裡的主要的源碼拷貝進項目中:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

開始:

一、使用storyboard實作:

1、首先建立ui架構:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

2、上面的圖的連線在這裡也詳細補充一下吧:

contentvc裡用了三個uinavigationvc以及自帶的連線,當然你可以自己更換uinavigationvc的rootviewcontroller,比如我這裡就是換成了普通的viewcontroller,然後自己添加子控件比如uiview,最後連線連上navigation的rootviewcontroller連線。(這裡會點storyboard就應該秒懂)

接下來講的連線是就是比較重要的,反正我之前沒用過的連線,也是到别的大神部落格裡學習來的。

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

剩下需要連線的是containervc、menuvc,三個uinavigationvc之間的連線,而這裡他們的連線上面一個圖給出了,但是連接配接的模式有些細節上的不一樣,對于containervc作為容器的連線,都是選擇reveal view controller set controller :

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

而除了容器控制器containervc之外的連線,也就是作為menuvc的tabvc連接配接三個作為contentvc的uinavigationvc,都是用reveal view controller push controller連線:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

接下來設定兩個segue 的 identifier, 設定成“sw_front”,告訴 swrevealviewcontroller 這是前置控制器。

rear英文就是後背的意思,這裡設定sw_rear就是告訴swrevealviewcontroller這是後背控制器

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

接下來為對應的控制器建立類,然後為對應的控制器指派類class。

首先最重要的是要将主要的作為容器的控制器containervc,将作為側滑欄的容器視圖的指派類class設定為swrevealviewcontroller

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

然後指派的類用圖快速表示表示:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

為了能夠當視圖從 contentvc —&gt; menuvc ,是以需要在三個tabview的toolbar上添加需要響應的item控件,并設定圖示:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

接着需要在onevc控制器類中,結合代碼将架構和這個第一個頁面對應的控制器聯系起來

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

然後第二個頁面和第三個頁面也是這樣。

通過以上storyboard實作側滑菜單的運作效果:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

swrevealviewcontroller提供了很多方法來配置菜單欄的樣式。比如你想更改菜單欄的寬度,你就可以更新rearviewrevealwidth屬性即可:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

二、純代碼結合xib實作:

用純代碼實作比較靈活,比如可以設定右邊的側滑菜單,storyboard目前我還不知道怎麼連線添加右邊的側滑菜單。不過storyboard想實作右邊側滑在前面項目示例基礎上可以使用源代碼實作添加哦。其實本質還是接下來要講解的全純代碼實作:

在用純代碼之前,設定main清除掉,然後願意的話删除main.storyboard也是可以的。

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

接着開始在appdelegate中敲代碼,管理需要建立的所有的控制器

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體
iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

一步一步跟着我的代碼步驟很好了解的哦。

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

到這裡我就試着運作了一下,發現隻是打開了一個空白的navigation視圖,沒有什麼卵用,那是當然的拉,還沒有為各自控制器設定事件監聽或者手勢監聽,甚至界面的控件都沒添加,當然沒什麼效果了。

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

然後首先在frontviewcontroller中添加代碼:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

上效果圖展示:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

接着要要豐富這個架構喽,先處理rearviewcontroller

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

然後要記得為uitableview控件添加資料源和代理

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

然後運作一下,自己看看效果吧,這裡暫時不上圖了。

然後接着為這個rearviewcontroller的兩個cell添加向導到目标控制器

補充下圖缺少的部分代碼:

/** 輔助變量 表示是否是剛剛顯示過的控制器 */

@property (nonatomic,assign)nsinteger issameviewcontroller;

然後在這裡我将之前的畫闆的控制器拷貝拖進來了,然後#import “canvasviewcontroller.h”就直接使用了

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

然後現在必須要看運作效果了:

iOS之UI--使用SWRevealViewController實作側邊菜單功能詳解執行個體

繼續閱讀