Xamarin.Android之SlidingMenu

一、前言

有位網(wǎng)友在評(píng)論中希望能夠出個(gè)在Xamarin.Android下實(shí)現(xiàn)SlidingMenu效果的隨筆，剛好昨天在觀看官網(wǎng)示例項(xiàng)目的時(shí)候也看到這個(gè)SlidingMenu，但是最終的效果并不是我們所期待的，至此筆者就在官方的論壇中尋找，最后也成功的尋找到的答案，下面筆者將帶領(lǐng)帶領(lǐng)大家實(shí)現(xiàn)SlidingMenu。

?

二、準(zhǔn)備工作

實(shí)現(xiàn)SlidingMenu重點(diǎn)是需要一個(gè)第三方的類庫(kù)，筆者已經(jīng)把部分重要的方法注釋了，下面是下載地址：

從Github下載

從百度網(wǎng)盤(pán)下載

?

?

注：我們的項(xiàng)目不僅僅需要引用這個(gè)類庫(kù)還需要引用自帶的Mono.Android.Support.v4類庫(kù)，可從 圖 1.1 找到該類庫(kù)。

?

圖 1.1

?

?

三、正文

新建項(xiàng)目筆者就不多說(shuō)了，然后我們按照第二步的要求引用需要的類庫(kù)后在Resource/layout下新建一個(gè)視圖并命名為menu，然后在其中拖放幾個(gè)Button控件，而這個(gè)視圖將是我們滑動(dòng)菜單的界面，最后我們就可以打開(kāi)MainActivity.cs并在其中寫(xiě)入如下代碼：

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

其中需要說(shuō)明的是AttachToActivity方法的第二個(gè)參數(shù)，這個(gè)參數(shù)指定了SlidingMenu如何附加到Activity上，在視覺(jué)效果上指定了Window則當(dāng)滑動(dòng)的時(shí)候ActionBar也會(huì)跟著滑動(dòng)，如果是Content則ActionBar不會(huì)跟著滑動(dòng)，我們可以查看圖 1.2 和 1.3 分別是Window和Content情況下的效果（默認(rèn)需要從邊框開(kāi)始滑動(dòng)才可以，并不是全屏）。

圖1.2

?

圖1.3

?

但是上面的這種SlidingMenu可不是我們所希望的那種SlidingMenu，況且Xamarin的官方示例里面也有這種效果，所以下面我們要讓滑動(dòng)菜單只顯示部分，并且可以通過(guò)滑動(dòng)全屏的任意部分呼出菜單，所以我們將代碼改寫(xiě)成如下所示：

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 }

其中需要說(shuō)明的是BehindOffset屬性，通過(guò)注釋我們可以知道它是用來(lái)指定滑動(dòng)菜單完全顯示后主界面的可視部分的寬度，也可以BehindOffsetRes來(lái)指定，只是這個(gè)屬性必須使用資源的標(biāo)識(shí)符來(lái)賦值。我們除了可以指定主界面也可以指定滑動(dòng)菜單顯示的寬度，對(duì)應(yīng)的屬性就是BehindWidth和BehindWidthRes。

?

現(xiàn)在我們的SlidingMenu已經(jīng)有點(diǎn)樣子了，但是還沒(méi)有完全結(jié)束，后面我們將會(huì)不斷的美化它，讓它更加符合實(shí)際項(xiàng)目的需要。

?

首先我們需要講解的是BehindScrollScale屬性，它的效果就是控制滑動(dòng)菜單在劃出時(shí)滑動(dòng)的強(qiáng)度，取值范圍為0~1，我們可以通過(guò)圖 1.4 和 1.5 看出取值為0和1時(shí)候的滑動(dòng)效果。

圖1.4

?

圖 1.5

?

通過(guò)圖1.4和圖1.5我們可以清楚的看到這個(gè)屬性的作用，你會(huì)發(fā)現(xiàn)當(dāng)設(shè)置為1的時(shí)候跟ViewPager很相似了。

?

還有另一個(gè)屬性就是FadeDegree和FadeEnabled，第一個(gè)是控制漸變效果的強(qiáng)度，第二個(gè)則決定是否使用漸變效果，我們還是通過(guò)圖片來(lái)演示FadeDegree在0和1的情況下分別是什么樣的效果，圖 1.6 和 圖 1.7分別對(duì)應(yīng)取值為0和1時(shí)的效果。

圖1.6

?

圖1.7

?

通過(guò)圖1.6和1.7我們可以清楚的看出在剛滑動(dòng)的時(shí) 候他們的顏色是不同的，并且在不斷滑動(dòng)的過(guò)程中會(huì)漸漸變淡，而這個(gè)屬性的作用就是用來(lái)控制它。然而還有一個(gè)比較嚴(yán)重的問(wèn)題就是滑動(dòng)菜單和我們的主界面之間 沒(méi)有分割線，但是我們又不能直接用一條線，這樣顯的很不美觀，那么我們就可以自己設(shè)置一個(gè)漸變效果，首先我們需要在Resource/drawable下新建一個(gè)xml文件，并命名為shadow，在其中寫(xiě)入如下內(nèi)容：

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>

通過(guò)以上內(nèi)容我們指定了一個(gè)漸變效果的，剩下的我們需要使用這個(gè)資源：

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 }

?

這里我們通過(guò)ShadowDrawableRes屬性使用這個(gè)資源，并通過(guò)ShadowWidth屬性控制它的寬度，最后我們運(yùn)行程序就可以看到一個(gè)漸變的分割線了圖1.8：

圖1.8

?

上面我們只是把滑動(dòng)菜單都放在了左邊，實(shí)際上我們可以將滑動(dòng)菜單放在右邊或者兩邊都有，比如在原本的代碼上加上這句代碼后就可以在左邊呈現(xiàn)了。

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

?

第一個(gè)屬性用來(lái)控制滑動(dòng)菜單的模式，第二個(gè)就是指定右邊的滑動(dòng)菜單的內(nèi)容。講到這里大家獲取會(huì)疑惑怎么才好監(jiān)聽(tīng)滑動(dòng)菜單里的事件呢？其實(shí)滑動(dòng)菜單就是整個(gè)Activity的一部分，所以在其中的控件都是可以通過(guò)FindViewById獲取到的，當(dāng)然筆者建議讀者采用Fragment將代碼分離，SlidingMenu的SetContent方法可以直接改變主界面的視圖。

?

除了我們自己新建SlidingMenu，我們還可以讓活動(dòng)繼承SlidingFragmentActivity類，這樣我們就直接可以通過(guò)控制SlidingMenu屬性，而不需要實(shí)例化一個(gè)，也不需要調(diào)用AttachToActivity附加到Activity上，比如我們將上面的代碼改寫(xiě)成如下所示

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方法，這個(gè)方法必須調(diào)用，但是它的功能實(shí)際上跟SetMenu是一樣的，是用來(lái)設(shè)置滑動(dòng)菜單的界面的，讀者通過(guò)查看最終的結(jié)果可以發(fā)現(xiàn)ActionBar又跟著主界面動(dòng)了，但是我們沒(méi)了AttachToActivity方法就不好指定枚舉了，這個(gè)時(shí)候我們需要使用SetSlidingActionBarEnabled方法，并傳入false即可。

?

讀者在使用實(shí)際的app中一定會(huì)發(fā)現(xiàn)SlidingMenu呈現(xiàn)的動(dòng)畫(huà)會(huì)有許多中，當(dāng)然我們也有許多種呈現(xiàn)方式，只需要給BehindCanvasTransformer屬性賦值即可，內(nèi)置的動(dòng)畫(huà)有ZoomTransformer、SlideTransformer和ScaleTransformer，當(dāng)然他們都是類，是需要初始化的，我們通過(guò)下圖來(lái)演示不同的動(dòng)畫(huà)效果如何：

ZoomTransformer動(dòng)畫(huà)

?

SlideTransformer動(dòng)畫(huà)

?

ScaleTransformer動(dòng)畫(huà)

轉(zhuǎn)載于:https://www.cnblogs.com/ShaYeBlog/p/4631604.html

總結(jié)

以上是生活随笔為你收集整理的Xamarin.Android开发实践（十八）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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