Xamarin.Android開發實踐（十八）

原文:Xamarin.Android開發實踐（十八）

Xamarin.Android之SlidingMenu

1、前言

有位網友在評論中但願可以出個在Xamarin.Android下實現SlidingMenu效果的隨筆，恰好昨天在觀看官網示例項目的時候也看到這個SlidingMenu，可是最終的效果並非咱們所期待的，至此筆者就在官方的論壇中尋找，最後也成功的尋找到的答案，下面筆者將帶領帶領你們實現SlidingMenu。

 

2、準備工做

實現SlidingMenu重點是須要一個第三方的類庫，筆者已經把部分重要的方法註釋了，下面是下載地址：

從Github下載

從百度網盤下載

 

 

注：咱們的項目不只僅須要引用這個類庫還須要引用自帶的Mono.Android.Support.v4類庫，可從 圖 1.1 找到該類庫。

 

圖 1.1

 

 

3、正文

新建項目筆者就很少說了，而後咱們按照第二步的要求引用須要的類庫後在Resource/layout下新建一個視圖並命名爲menu，而後在其中拖放幾個Button控件，而這個視圖將是咱們滑動菜單的界面，最後咱們就能夠打開MainActivity.cs並在其中寫入以下代碼：

 1         protected override void OnCreate(Bundle bundle)  2  {  3 base.OnCreate(bundle);  4  SetContentView(Resource.Layout.Main);  5 //實例化  6 var sm = new SlidingMenu(this);  7 //指定滑動菜單的視圖  8  sm.SetMenu(Resource.Layout.menu);  9 //將滑動菜單附加到Activity上 10 sm.AttachToActivity(this, SlidingMenuSharp.SlideStyle.Window); 11 }

其中須要說明的是AttachToActivity方法的第二個參數，這個參數指定了SlidingMenu如何附加到Activity上，在視覺效果上指定了Window則當滑動的時候ActionBar也會跟着滑動，若是是Content則ActionBar不會跟着滑動，咱們能夠查看圖 1.2 和 1.3 分別是Window和Content狀況下的效果（默認須要從邊框開始滑動才能夠，並非全屏）。

圖1.2

 

圖1.3

 

可是上面的這種SlidingMenu可不是咱們所但願的那種SlidingMenu，何況Xamarin的官方示例裏面也有這種效果，因此下面咱們要讓滑動菜單隻顯示部分，而且能夠經過滑動全屏的任意部分呼出菜單，因此咱們將代碼改寫成以下所示：

 1         protected override void OnCreate(Bundle bundle)  2  {  3 base.OnCreate(bundle);  4  SetContentView(Resource.Layout.Main);  5 var sm = new SlidingMenu(this);  6  sm.SetMenu(Resource.Layout.menu);  7 //指定主界面顯示的寬度  8 sm.BehindOffset = 100;  9 sm.TouchModeAbove = TouchMode.Fullscreen; 10 sm.AttachToActivity(this, SlidingMenuSharp.SlideStyle.Content); 11 }

其中須要說明的是BehindOffset屬性，經過註釋咱們能夠知道它是用來指定滑動菜單徹底顯示後主界面的可視部分的寬度，也能夠BehindOffsetRes來指定，只是這個屬性必須使用資源的標識符來賦值。咱們除了能夠指定主界面也能夠指定滑動菜單顯示的寬度，對應的屬性就是BehindWidth和BehindWidthRes。

 

如今咱們的SlidingMenu已經有點樣子了，可是尚未徹底結束，後面咱們將會不斷的美化它，讓它更加符合實際項目的須要。

 

首先咱們須要講解的是BehindScrollScale屬性，它的效果就是控制滑動菜單在劃出時滑動的強度，取值範圍爲0~1，咱們能夠經過圖 1.4 和 1.5 看出取值爲0和1時候的滑動效果。

圖1.4

 

圖 1.5

 

經過圖1.4和圖1.5咱們能夠清楚的看到這個屬性的做用，你會發現當設置爲1的時候跟ViewPager很類似了。

 

還有另外一個屬性就是FadeDegree和FadeEnabled，第一個是控制漸變效果的強度，第二個則決定是否使用漸變效果，咱們仍是經過圖片來演示FadeDegree在0和1的狀況下分別是什麼樣的效果，圖 1.6 和 圖 1.7分別對應取值爲0和1時的效果。

圖1.6

 

圖1.7

 

經過圖1.6和1.7咱們能夠清楚的看出在剛滑動的時 候他們的顏色是不一樣的，而且在不斷滑動的過程當中會漸漸變淡，而這個屬性的做用就是用來控制它。然而還有一個比較嚴重的問題就是滑動菜單和咱們的主界面之間 沒有分割線，可是咱們又不能直接用一條線，這樣顯的很不美觀，那麼咱們就能夠本身設置一個漸變效果，首先咱們須要在Resource/drawable下新建一個xml文件，並命名爲shadow，在其中寫入以下內容：

1 <?xml version="1.0" encoding="utf-8" ?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"> 3 <gradient 4 android:endColor="#00000000" 5  android:centerColor="#11000000" 6  android:startColor="#33000000" ></gradient> 7 </shape>

經過以上內容咱們指定了一個漸變效果的，剩下的咱們須要使用這個資源：

 1  var sm = new SlidingMenu(this);  2  sm.SetMenu(Resource.Layout.menu);  3  4  sm.FadeEnabled = true;  5  sm.FadeDegree = 1f;  6  sm.BehindOffset = 100;  7  sm.ShadowDrawableRes = Resource.Drawable.shadow;  8  sm.ShadowWidth = 15;  9  sm.BehindScrollScale = 0f; 10  sm.TouchModeAbove = TouchMode.Fullscreen; 11  sm.AttachToActivity(this, SlidingMenuSharp.SlideStyle.Content); 12 }

 

這裏咱們經過ShadowDrawableRes屬性使用這個資源，並經過ShadowWidth屬性控制它的寬度，最後咱們運行程序就能夠看到一個漸變的分割線了圖1.8：

圖1.8

 

上面咱們只是把滑動菜單都放在了左邊，實際上咱們能夠將滑動菜單放在右邊或者兩邊都有，好比在本來的代碼上加上這句代碼後就能夠在左邊呈現了。

1             sm.Mode = MenuMode.Right; 2 sm.SetSecondaryMenu(Resource.Layout.menu);

 

第一個屬性用來控制滑動菜單的模式，第二個就是指定右邊的滑動菜單的內容。講到這裏你們獲取會疑惑怎麼纔好監聽滑動菜單裏的事件呢？其實滑動菜單就是整個Activity的一部分，因此在其中的控件都是能夠經過FindViewById獲取到的，固然筆者建議讀者採用Fragment將代碼分離，SlidingMenu的SetContent方法能夠直接改變主界面的視圖。

 

除了咱們本身新建SlidingMenu，咱們還可讓活動繼承SlidingFragmentActivity類，這樣咱們就直接能夠經過控制SlidingMenu屬性，而不須要實例化一個，也不須要調用AttachToActivity附加到Activity上，好比咱們將上面的代碼改寫成以下所示

 1         protected override void OnCreate(Bundle bundle)  2  {  3 base.OnCreate(bundle);  4  SetContentView(Resource.Layout.Main);  5  SetBehindContentView(Resource.Layout.menu);  6 SlidingMenu.FadeEnabled = true;  7 SlidingMenu.FadeDegree = 1f;  8 SlidingMenu.BehindOffset = 100;  9 SlidingMenu.ShadowDrawableRes = Resource.Drawable.shadow; 10 SlidingMenu.ShadowWidth = 15; 11 SlidingMenu.BehindScrollScale = 0f; 12 SlidingMenu.Mode = MenuMode.Right; 13  SlidingMenu.SetSecondaryMenu(Resource.Layout.menu); 14 SlidingMenu.TouchModeAbove = TouchMode.Fullscreen; 15 }

咱們須要注意SetBehindContentView方法，這個方法必須調用，可是它的功能實際上跟SetMenu是同樣的，是用來設置滑動菜單的界面的，讀者經過查看最終的結果能夠發現ActionBar又跟着主界面動了，可是咱們沒了AttachToActivity方法就很差指定枚舉了，這個時候咱們須要使用SetSlidingActionBarEnabled方法，並傳入false便可。

 

讀者在使用實際的app中必定會發現SlidingMenu呈現的動畫會有許多中，固然咱們也有許多種呈現方式，只須要給BehindCanvasTransformer屬性賦值便可，內置的動畫有ZoomTransformer、SlideTransformer和ScaleTransformer，固然他們都是類，是須要初始化的，咱們經過下圖來演示不一樣的動畫效果如何：

ZoomTransformer動畫

 

SlideTransformer動畫

 

ScaleTransformer動畫