像往常一樣，我們還是創(chuàng)建一個(gè)Demo App 來(lái)展示一下具體如何使用SWRevealViewController。這個(gè)Demo 很簡(jiǎn)單，功能上也不完善，主要的目的只是引導(dǎo)你去了解如何實(shí)現(xiàn)側(cè)滑菜單。

我們將要實(shí)現(xiàn)的側(cè)滑菜單大概是這個(gè)樣子的：

• 用戶可以單擊左上角的列表按鈕來(lái)顯示側(cè)滑菜單
• 用戶也可以右滑內(nèi)容視圖來(lái)顯示側(cè)滑菜單
• 側(cè)滑菜單顯示的時(shí)候，用戶可以再次單擊列表按鈕來(lái)關(guān)閉它
• 用戶也可以左滑內(nèi)容區(qū)域來(lái)關(guān)閉它
  

新建一個(gè) Xcode 項(xiàng)目
這篇文章的主要目的是講解側(cè)滑菜單的實(shí)現(xiàn)，所以為了節(jié)省你的時(shí)間，你可以直接下載這個(gè)Xcode模板來(lái)開始學(xué)習(xí)。

這個(gè)工程里面已經(jīng)創(chuàng)建好了一個(gè) Storyboard，它包含了所有我們需要的視圖控制器。如果你已經(jīng)下載好了模板，那么先打開 Storyboard 來(lái)看一下。

想要使用 SWRevealViewController 來(lái)實(shí)現(xiàn)側(cè)滑菜單，你需要有一個(gè)控制器做容器，用它來(lái)存放菜單控制器和一組內(nèi)容控制器。我已經(jīng)為你創(chuàng)建好了菜單控制器，它是一個(gè)靜態(tài)的列表視圖，有三行內(nèi)容。對(duì)應(yīng)的有三個(gè)內(nèi)容控制器來(lái)分別展示新聞、地圖和照片。鑒于這個(gè) Demo 只是演示的目的，內(nèi)容控制器里放置的都是靜態(tài)內(nèi)容。所有用到的圖標(biāo)和圖片資源都已經(jīng)包含在了工程里面（注：在這里需要感謝Pixeden網(wǎng)站提供的免費(fèi)圖標(biāo)）。

接下來(lái)開始使用 SWRevealViewController
依照上文說(shuō)的，我們要用 SWRevealViewController 來(lái)實(shí)現(xiàn)側(cè)滑菜單。首先從GitHub上把這個(gè)類庫(kù)下載下來(lái)并解壓zip文件。解壓之后你能找到 SWRevealViewController 文件夾，這個(gè)文件夾里面有兩個(gè)文件。在工程目錄下選中 SidebarMenu，單擊鼠標(biāo)右鍵，選擇“New Group”，命名為“SWRevealViewController”，將上面提到的兩個(gè)文件拖拽到 SWRevealViewController 這里。在你剛添加完這兩個(gè)文件之后，Xcode 會(huì)及時(shí)的彈出一個(gè)提示，是否要配置一個(gè)連接 Objective-C 代碼的頭文件；有了這個(gè)頭文件，你就可以將 Objective-C 代碼轉(zhuǎn)做 Swift 代碼來(lái)使用了。所以，點(diǎn)擊 Yes 繼續(xù)。

然后 Xcode 會(huì)隨即生成一個(gè)名字叫做“SidebarMenu-Bridging-Header.h”的文件，打開這個(gè)文件并將下面的代碼復(fù)制進(jìn)去：

#import "SWRevealViewController.h"
配置前置（顯示內(nèi)容）和后置（菜單欄）視圖控制器
SWRevealViewController 內(nèi)置了對(duì) Storyboard 的支持。你需要做的就是將前置和后置控制器與 SWRevealViewController 用 Segue 聯(lián)系起來(lái)。前置控制器是用來(lái)顯示內(nèi)容的主控制器，在我們的 Storyboard 里面對(duì)應(yīng)的是連接新聞控制器的導(dǎo)航控制器。后置控制器是用來(lái)顯示導(dǎo)航菜單的控制器，這里對(duì)應(yīng)的是側(cè)滑菜單欄。

點(diǎn)開 Storyboard，首先選中那個(gè)空控制器（容器）并把它的類設(shè)置為 SWRevealViewController。

然后，按住Control鍵-鼠標(biāo)左鍵 從 SWRevealViewController 拖拽到菜單控制器，釋放按鍵后悔顯示一個(gè)選擇 Segue 類型的菜單，在這里選擇“reveal view controller set controller”。

這樣就創(chuàng)建了一個(gè) Segue，選中這個(gè) Segue 將它的 identifier 設(shè)置成“sw_rear”；這樣 SWRevealViewController 就知道了它對(duì)應(yīng)的是后置控制器，這個(gè)菜單就會(huì)隱藏在內(nèi)容視圖的后面。

接下來(lái)，用同樣的方法將 SWRevealViewController 和新聞控制器對(duì)應(yīng)的導(dǎo)航控制器聯(lián)系起來(lái)，也是選擇“reveal view controller set controller”選項(xiàng)。

把這個(gè) Segue 的 identifier 設(shè)置成“sw_front”，告訴 SWRevealViewController 這是前置控制器。
繼續(xù)之前，運(yùn)行一下你的 App，它應(yīng)該是能正常顯示新聞視圖。但是你點(diǎn)擊按鈕或者滑動(dòng)視圖都不能把菜單欄調(diào)出來(lái)，這是因?yàn)槲覀冞€沒有實(shí)現(xiàn)這些功能。

如果程序運(yùn)行正常，我們繼續(xù)下面的步驟。打開 NewsTableViewController.swift，在 viewDidLoad 這個(gè)方法里面插入下面的代碼：

if self.revealViewController() != nil {
 menuButton.target = self.revealViewController()
 menuButton.action = "revealToggle:"
 self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
}

SWRevealViewController 提供了一個(gè)叫 revealViewController（） 的方法來(lái)從任何子控制器中拿到父控制器 SWRevealViewController；它還提供了一個(gè)叫 revealToggle: 的方法來(lái) 顯示/隱藏 菜單欄，最后我們添加了一個(gè)手勢(shì)。

現(xiàn)在你既可以點(diǎn)擊按鈕來(lái)控制側(cè)滑菜單，也可以滑動(dòng)內(nèi)容視圖的區(qū)域來(lái)控制側(cè)滑菜單了；跑起模擬器試一下吧。

添加側(cè)滑菜單的點(diǎn)擊事件
到現(xiàn)在為止，我們還沒有為菜單欄配置任何 Segue；所以不管你點(diǎn)擊哪一個(gè)菜單項(xiàng)，App 總是不能切換到相符的那個(gè)視圖。

那么，現(xiàn)在我們?cè)俅吸c(diǎn)開 Storyboard。首先選中地圖Cell，按住按住 Control 鍵-鼠標(biāo)左鍵 拖拽到地圖控制器對(duì)應(yīng)的導(dǎo)航控制器，然后選擇“reveal view controller push controller”。對(duì)新聞 Cell 和照片 Cell 也做相同的操作，不過(guò)連接的時(shí)它們各自對(duì)應(yīng)的控制器。

然后，在 MapViewController.swift 和 PhotoViewController.swift 兩個(gè)文件中，對(duì)應(yīng)也插入下面的代碼：

if self.revealViewController() != nil {
 menuButton.target = self.revealViewController()
 menuButton.action = "revealToggle:"
 self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
}

OK！運(yùn)行起來(lái)看一下吧。

定制樣式
SWRevealViewController 提供了很多方法來(lái)配置菜單欄的樣式。

比如你想更改菜單欄的寬度，你就可以更新 rearViewRevealWidth 屬性的值即可。試著在 NewsTableViewController.swift 文件的 viewDidLoad 方法里插入下面的代碼：

self.revealViewController().rearViewRevealWidth = 62
運(yùn)行 App 之后你會(huì)看到這樣的結(jié)果：

更多的參數(shù)設(shè)置，你可以去文件 SWRevealViewController.h 里面去摸索一下。

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

最新評(píng)論