SlidingMenu實現側滑效果
SlidingMenu是前兩年很火的一個第三方側滑專案,目前已經很久沒有再更新過了,目前Google自己也出了一個側滑控制元件叫做Drawerlayout,很好用,如果想學習可以檢視我的相關部落格: ofollow,noindex">drawerlayout的使用 ,不過很多同學還是想用第三方的,那麼幾天就來帶大家學習一下這個三方庫吧。
使用這個三方常用的方式有兩種,一種是直接用程式碼建立物件,一種是在佈局檔案中使用,今天就分別來演示一遍。在使用前當然是一些準備工作,首先要做的是下載這個第三方庫,如果你不嫌麻煩可以直接從github上面下載: github ,當然最後我也會提供類庫給大家,這裡我就以你下載我給的類庫為演示基礎。
下載完之後找到slidelibrary這個資料夾,他就是類庫的原始檔,匯入之後和你自己的專案關聯上,如果允許之後出現classnotfand的錯誤那是因為類庫使用的v4包和你專案使用的V4包不一致導致的,解決辦法就是把自己的v4包覆蓋掉類庫的v4包。準備工作完成之後我們就正式的開始使用了。
首先我們使用程式碼來建立,因為註釋寫的很詳細了,裡面的方法這裡就不再贅述了,先來看Activity程式碼:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 建立物件 SlidingMenu smenu = new SlidingMenu(this); // 設定出現在左邊還是右邊 smenu.setMode(SlidingMenu.LEFT); // 設定調出slidingmenu的區域 smenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN); // 設定陰影的寬度 smenu.setShadowWidth(8); smenu.setShadowDrawable(R.drawable.shadow); // 設定slidingmenu滑出來時的寬度 smenu.setBehindOffset(100); // 設定剛拉出來的時候顏色,1為全黑 smenu.setFadeDegree(0.3f); // 新增到Activity上面 smenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT); smenu.setMenu(R.layout.menu); // 關閉監聽 smenu.setOnClosedListener(new OnClosedListener() { @Override public void onClosed() { Toast.makeText(MainActivity.this, "關閉了", Toast.LENGTH_SHORT).show(); } }); // 開啟監聽 smenu.setOnOpenedListener(new OnOpenedListener() { @Override public void onOpened() { Toast.makeText(MainActivity.this, "打開了", Toast.LENGTH_SHORT).show(); } }); // 建立動畫物件設定顯示的時候出現的動畫,這裡我寫的是一個入場動畫 CanvasTransformer canvasTransformer = new CanvasTransformer() { @Override public void transformCanvas(Canvas canvas, float percentOpen) { float scale = (float) (percentOpen * 0.25 + 0.75); canvas.scale(scale, scale, canvas.getWidth() / 2, canvas.getHeight() / 2); } }; smenu.setBehindCanvasTransformer(canvasTransformer); } }
基本使用思路就是先建立一個slidingmenu物件,然後對這個物件各種設定,完了之後呼叫attachToActivity方法使之和本Activity關聯上,然後呼叫setmenu方法設定slidingmenu的佈局檔案,最後設定一些監聽方法和一個開啟關閉時的動畫效果。我的slidingmenu佈局檔案很簡單就一個imageView,下面來看看這段程式碼的執行效果:
XML檔案使用
在主佈局檔案中程式碼如下:
<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:sliding="http://schemas.android.com/apk/res-auto" android:id="@+id/slidingmenulayout" android:layout_width="fill_parent" android:layout_height="fill_parent" sliding:behindOffset="100px" sliding:behindScrollScale="0.5" sliding:fadeDegree="0.3" sliding:fadeEnabled="true" sliding:selectorDrawable="@drawable/shadow" sliding:selectorEnabled="true" sliding:shadowDrawable="@drawable/shadow" sliding:shadowWidth="8px" sliding:touchModeAbove="margin" sliding:viewAbove="@layout/above" sliding:viewBehind="@layout/menu" />
來看執行效果:
上面我新增一個
sliding:behindScrollScale="0.5"
所以滑動的位置和slidingmenu顯示的區域成1:2的關係,使用xml來用slidingmenu只需要把主佈局檔案裡放一個上面的程式碼就夠了,主介面顯示和抽屜佈局顯示是通過:
sliding:viewAbove="@layout/above" sliding:viewBehind="@layout/menu"
這兩行程式碼實現的,前一個是設定主介面,後一個是設定抽屜佈局內容的。