在 Swift 項目中實現側滑菜單-利用 SWRevealViewController

來源:互聯網
上載者:User

標籤:tin   header   lin   tar   檔案中   idt   接下來   更新   name   

你可以完全自己手動寫一個側滑菜單,但是現在在 GitHub 上面已經有很多免費的開源庫了,如果不是有很特別的需求,大可不必建立一個輪子。

在這裡我使用的這個第三方庫名字叫做 SWRevealViewController,作者是 John Lluch。這個免費的類庫提供了很方便快捷的方法去把側滑菜單加入到你的 App 裡面,而且它還提供了很多個人化的設定項。它是用 Objective-C 來寫的,但是我們也可以很方便的在 Swift 項目中去使用它。你分分鐘便可學會如何使用。

首先來看一下我們的 Demo 是個什麼樣子的

像往常一樣,我們還是建立一個 Demo App 來展示一下具體如何使用 SWRevealViewController。這個 Demo 很簡單,功能上也不完善;主要的目的只是引導你去瞭解如何?側滑菜單。

我們將要實現的側滑菜單大概是這個樣子的:

  • 使用者可以單擊左上方的列表按鈕來顯示側滑菜單
  • 使用者也可以右滑內容視圖來顯示側滑菜單
  • 側滑菜單顯示的時候,使用者可以再次單擊列表按鈕來關閉它
  • 使用者也可以左滑內容地區來關閉它
建立一個 Xcode 項目

這篇文章的主要目的是講解側滑菜單的實現,所以為了節省你的時間,你可以直接下載這個Xcode模板來開始學習。

這個工程裡面已經建立好了一個 Storyboard,它包含了所有我們需要的視圖控制器。如果你已經下載好了模板,那麼先開啟 Storyboard 來看一下。

想要使用 SWRevealViewController 來實現側滑菜單,你需要有一個控制器做容器,用它來存放菜單控制器和一組內容控制器。我已經為你建立好了菜單控制器,它是一個靜態列表視圖,有三行內容。對應的有三個內容控制器來分別展示新聞、地圖和照片。鑒於這個 Demo 只是示範的目的,內容控制器裡放置的都是靜態內容。所有用到的表徵圖和圖片資源都已經包含在了工程裡面(註:在這裡需要感謝Pixeden網站提供的免費表徵圖)。

接下來開始使用 SWRevealViewController

依照上文說的,我們要用 SWRevealViewController 來實現側滑菜單。首先從GitHub上把這個類庫下載下來並解壓zip檔案。解壓之後你能找到 SWRevealViewController 檔案夾,這個檔案夾裡面有兩個檔案。在工程目錄下選中 SidebarMenu,單擊滑鼠右鍵,選擇“New Group”,命名為“SWRevealViewController”,將上面提到的兩個檔案拖拽到 SWRevealViewController 這裡。在你剛添加完這兩個檔案之後,Xcode 會及時的彈出一個提示,是否要配置一個串連 Objective-C 代碼的標頭檔;有了這個標頭檔,你就可以將 Objective-C 代碼轉做 Swift 代碼來使用了。所以,點擊 Yes 繼續。

然後 Xcode 會隨即產生一個名字叫做“SidebarMenu-Bridging-Header.h”的檔案,開啟這個檔案並將下面的代碼複製進去:

    #import "SWRevealViewController.h"
配置前置(顯示內容)和後置(功能表列)視圖控制器

SWRevealViewController 內建了對 Storyboard 的支援。你需要做的就是將前置和後置控制器與 SWRevealViewController 用 Segue 聯絡起來。前置控制器是用來顯示內容的主控制器,在我們的 Storyboard 裡面對應的是串連新聞控制器的導航控制器。後置控制器是用來顯示導覽功能表的控制器,這裡對應的是側滑功能表列。

點開 Storyboard,首先選中那個空控制器(容器)並把它的類設定為 SWRevealViewController。

然後,按住Control鍵-滑鼠左鍵 從 SWRevealViewController 拖拽到菜單控制器,釋放按鍵後悔顯示一個選擇 Segue 類型的菜單,在這裡選擇“reveal view controller set controller”。

這樣就建立了一個 Segue,選中這個 Segue 將它的 identifier 設定成“sw_rear”;這樣 SWRevealViewController 就知道了它對應的是後置控制器,這個菜單就會隱藏在內容視圖的後面。

接下來,用同樣的方法將 SWRevealViewController 和新聞控制器對應的導航控制器聯絡起來,也是選擇“reveal view controller set controller”選項。


把這個 Segue 的 identifier 設定成“sw_front”,告訴 SWRevealViewController 這是前置控制器。

繼續之前,運行一下你的 App,它應該是能正常顯示新聞視圖。但是你點擊按鈕或者滑動視圖都不能把功能表列調出來,這是因為我們還沒有實現這些功能。

如果程式運行正常,我們繼續下面的步驟。開啟 NewsTableViewController.swift,在 viewDidLoad 這個方法裡面插入下面的代碼:

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

SWRevealViewController 提供了一個叫 revealViewController() 的方法來從任何子控制器中拿到父控制器 SWRevealViewController;它還提供了一個叫 revealToggle: 的方法來 顯示/隱藏 功能表列,最後我們添加了一個手勢。

現在你既可以點擊按鈕來控制側滑菜單,也可以滑動內容視圖的地區來控制側滑菜單了;跑起模擬器試一下吧。

添加側滑菜單的點擊事件

到現在為止,我們還沒有為功能表列配置任何 Segue;所以不管你點擊哪一個功能表項目,App 總是不能切換到相符的那個視圖。

那麼,現在我們再次點開 Storyboard。首先選中地圖Cell,按住按住 Control 鍵-滑鼠左鍵 拖拽到地圖控制器對應的導航控制器,然後選擇“reveal view controller push controller”。對新聞 Cell 和照片 Cell 也做相同的操作,不過串連的時它們各自對應的控制器。

然後,在 MapViewController.swift 和 PhotoViewController.swift 兩個檔案中,對應也插入下面的代碼:

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

OK!運行起來看一下吧。

定製樣式

SWRevealViewController 提供了很多方法來配置功能表列的樣式。

比如你想更改功能表列的寬度,你就可以更新 rearViewRevealWidth 屬性的值即可。試著在 NewsTableViewController.swift 檔案的 viewDidLoad 方法裡插入下面的代碼:

self.revealViewController().rearViewRevealWidth = 62

運行 App 之後你會看到這樣的結果:

更多的參數設定,你可以去檔案 SWRevealViewController.h 裡面去摸索一下。

總結:

在這篇部落格裡面,我帶著你使用了 SWRevealViewController,向你展示了怎麼在 Swift 工程中實現側滑菜單。其實這隻是實現側滑菜單的很多方法中的一種,你也可以試著自己從空項目開始寫,使用自訂的動畫去實現;或者是尋找別的開源類庫去實現,比如 ENSwiftSideMenu。

最後,你可以從這裡下載最終的代碼。

譯自

Creating a Sidebar Menu Using SWRevealViewController in Swift

在 Swift 項目中實現側滑菜單-利用 SWRevealViewController

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.