使用SWRevealViewController實(shí)現(xiàn)側(cè)邊菜單功能詳解

　　下面通過兩種方法詳解SWRevealViewController實(shí)現(xiàn)側(cè)邊菜單功能：

1.使用StoryBoard實(shí)現(xiàn) 2.純代碼實(shí)現(xiàn)

前言：手機(jī)屏幕始終有限，如何在有限的展示空間提供便捷的導(dǎo)航入口呢？Facebook的App設(shè)計了一個可以從屏幕側(cè)邊滑出的導(dǎo)航，這一設(shè)計模式引得各大主流 App盡相模仿。一時間，Path，Mailbox，Gmail都采用了這種設(shè)計。Github 上也有很多側(cè)欄導(dǎo)航的解決方案，這里我們使用John的SWRevealViewController類來實(shí)現(xiàn)，這里就通過分別詳細(xì)的通過StoryBoard和純代碼結(jié)合xib來實(shí)現(xiàn)。 SWRevealViewController在github下載地址: 點(diǎn)擊這里

它的工作流程：

• 用戶點(diǎn)擊“l(fā)ist”按鈕，導(dǎo)航向右滑出
• 用戶再次點(diǎn)擊“l(fā)ist”按鈕，導(dǎo)航向左收起
• 通過左右滑動也能達(dá)到同樣的效果

不管接下來用的是StoryBoard方法實(shí)現(xiàn)還是純代碼實(shí)現(xiàn)，首先都要做的一件事情就是將框架里的主要的源碼拷貝進(jìn)項(xiàng)目中：

開始：

一、使用StoryBoard實(shí)現(xiàn)：

1、首先建立UI框架：

2、上面的圖的連線在這里也詳細(xì)補(bǔ)充一下吧：

ContentVC里用了三個UINavigationVC以及自帶的連線，當(dāng)然你可以自己更換UINavigationVC的rootViewController，比如我這里就是換成了普通的ViewController，然后自己添加子控件比如UIView，最后連線連上Navigation的rootViewController連線。(這里會點(diǎn)StoryBoard就應(yīng)該秒懂)

接下來講的連線是就是比較重要的，反正我之前沒用過的連線，也是到別的大神博客里學(xué)習(xí)來的。

剩下需要連線的是ContainerVC、MenuVC，三個UINavigationVC之間的連線，而這里他們的連線上面一個圖給出了，但是連接的模式有些細(xì)節(jié)上的不一樣，對于ContainerVC作為容器的連線，都是選擇reveal view controller set Controller ：

而除了容器控制器ContainerVC之外的連線，也就是作為MenuVC的TabVC連接三個作為ContentVC的UINavigationVC，都是用reveal view controller push Controller連線:

接下來設(shè)置兩個Segue 的 identifier， 設(shè)置成“sw_front”，告訴 SWRevealViewController 這是前置控制器。

rear英文就是后背的意思，這里設(shè)置sw_rear就是告訴SWRevealViewController這是后背控制器

接下來為對應(yīng)的控制器創(chuàng)建類，然后為對應(yīng)的控制器指派類Class。

首先最重要的是要將主要的作為容器的控制器ContainerVC，將作為側(cè)滑欄的容器視圖的指派類Class設(shè)置為SWRevealViewController

然后指派的類用圖快速表示表示：

為了能夠當(dāng)視圖從 ContentVC —> MenuVC ，所以需要在三個TabView的toolBar上添加需要響應(yīng)的item控件，并設(shè)置圖標(biāo)：

接著需要在OneVC控制器類中，結(jié)合代碼將框架和這個第一個頁面對應(yīng)的控制器聯(lián)系起來

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

通過以上storyboard實(shí)現(xiàn)側(cè)滑菜單的運(yùn)行效果：

到這里源碼百度云下載鏈接: http://pan.baidu.com/s/1c1coLLu 密碼: avgw

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

其實(shí)這只是實(shí)現(xiàn)側(cè)滑菜單的很多方法中的一種，你也可以試著自己從空項(xiàng)目開始寫，使用自定義的動畫去實(shí)現(xiàn)；或者是尋找別的開源類庫去實(shí)現(xiàn)，比如ENSwiftSideMenu 。

二、純代碼結(jié)合xib實(shí)現(xiàn)：

用純代碼實(shí)現(xiàn)比較靈活，比如可以設(shè)置右邊的側(cè)滑菜單，StoryBoard目前我還不知道怎么連線添加右邊的側(cè)滑菜單。不過StoryBoard想實(shí)現(xiàn)右邊側(cè)滑在前面項(xiàng)目示例基礎(chǔ)上可以使用源代碼實(shí)現(xiàn)添加哦。其實(shí)本質(zhì)還是接下來要講解的全純代碼實(shí)現(xiàn)：

在用純代碼之前，設(shè)置Main清除掉，然后愿意的話刪除Main.storyboard也是可以的。

接著開始在AppDelegate中敲代碼，管理需要創(chuàng)建的所有的控制器

一步一步跟著我的代碼步驟很好理解的哦。

到這里我就試著運(yùn)行了一下，發(fā)現(xiàn)只是打開了一個空白的Navigation視圖，沒有什么卵用，那是當(dāng)然的拉，還沒有為各自控制器設(shè)置事件監(jiān)聽或者手勢監(jiān)聽，甚至界面的控件都沒添加，當(dāng)然沒什么效果了。

接著就要為各自的視圖添加UI嘍，首先添加item需要的素材，素材備份百度云下載鏈接: http://pan.baidu.com/s/1jHh2oV8 密碼: p7me ：

然后首先在FrontViewController中添加代碼：

上效果圖展示：

接著要要豐富這個框架嘍，先處理RearViewController

然后要記得為UITableView控件添加數(shù)據(jù)源和代理

然后運(yùn)行一下，自己看看效果吧，這里暫時不上圖了。

然后接著為這個RearViewController的兩個cell添加向?qū)У侥繕?biāo)控制器

補(bǔ)充下圖缺少的部分代碼：

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

@property (nonatomic,assign)NSInteger isSameViewController;

然后在這里我將之前的畫板的控制器拷貝拖進(jìn)來了，然后#import “CanvasViewController.h”就直接使用了

然后現(xiàn)在必須要看運(yùn)行效果了：

總結(jié)

以上是生活随笔為你收集整理的iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。