Xamarin iOS 側邊選單漢堡選單 SideMenu SideBar

Xamarin.iOS實現側邊選單，及APP選單設計探討

李素玫 2018/11/29 12:06:13

0 1676

Xamarin.iOS實現側邊選單，及APP選單設計探討

簡介	介紹iOS側邊選單SideMenu套件，及分享目前大家推薦的選單設計方式
作者	李素玫

1. 前言

側邊選單也稱作漢堡選單(hamburger menu)，因為圖示為三條水平線酷似漢堡而得名，是APP常見的隱藏選單設計，可以將功能選項隱藏起來，讓主要內容更為突出、簡潔乾淨。

Android官方在2013年更新的Support Library加入DrawerLayout讓開發者更容易實作側邊選單，不過Apple沒打算跟進，想要實作側邊選單的iOS開發者自行分享了好幾個實作成果，以SideMenu、SideBar關鍵字可以查到許多相關資源。所以我們想實現側邊選單功能也不需要從頭做起，下面介紹的是我找到其他前輩分享的SideMenu套件及實作過程。

2. SideMenu介紹

SideMenu分為主畫面及選單畫面，所以需要準備兩個畫面，一個主要ViewController及一個側邊開啟的ViewController，然後在主畫面裡加入『SideMenuManager』控件管理側邊開啟畫面，想要的效果如何，只要設定SideMenuManager的屬性即可。

3. 實作步驟

Step1: Xamarin開發者可以在nuget搜尋SideMenu，加入package

Step2: 製作主畫面內容及側邊選單內容

Step3: 在主畫面ViewController引入Xamarin.SideMenu，

並且在導覽控制項加上漢堡按鈕圖示及開啟側邊選單功能

Step4: 設定SideMenuManager屬性，即可改變側邊選單的動畫效果

4. 屬性介紹

A. LeftNavigationController從左側開啟控件
B. RightNavigationController從右側開啟控件
C. PresentMode呈現方式：有四種效果，MenuSlideIn為選單滑入蓋在主畫面上，ViewSlideOut 為主畫面滑出顯現選單，ViewSlideInOut為主畫面滑出且選單滑入蓋在主畫面上(此效果最常見)，MenuDissolveIn則選單直接顯示在主畫面上，無滑動效果。
D. ShadowOpacity 側邊選單滑出後的陰影透明度，設定介於0~1之間的數值，數字越大則交界處陰影越立體。
E. MenuWidth 側邊選單寬度，用整體比例去設定寬度可適配各尺寸螢幕。
F. AnimationTransformScaleFactor 主畫面縮放比例。
G. AnimationFadeStrength 主畫面淡化，設定介於0~1之間的數值，數值越大則主畫面越淡。
H. FadeStatusBar為true則狀態列維持原色，false則會加上選單頁的底色。