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

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

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

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

它的工作流程：

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

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

開(kāi)始：

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

1、首先建立UI框架：

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

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

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

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

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

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

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

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

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

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

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

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

然后第二個(gè)頁(yè)面和第三個(gè)頁(yè)面也是這樣。

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

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

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

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

二、純代碼結(jié)合x(chóng)ib實(shí)現(xiàn)：

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

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

接著開(kāi)始在AppDelegate中敲代碼，管理需要?jiǎng)?chuàng)建的所有的控制器

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

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

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

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

上效果圖展示：

接著要要豐富這個(gè)框架嘍，先處理RearViewController

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

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

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

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

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

@property (nonatomic,assign)NSInteger isSameViewController;

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

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

總結(jié)

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

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