Android UI之SlidingMenu側滑菜單

標籤：android   slidingmenu   側滑菜單   

SlidingMenu側滑菜單是一種比較新的設定介面或配置介面的效果，在主介面左滑或者右滑出現設定介面效果，能方便的進行各種操作。很多優秀的應用都採用了這種介面方案，像facebook、人人網、everynote、Google+、網易新聞、知乎日報、有道雲筆記等等。

現在這種互動方式越來越流行了，雖然這種互動方式可以通過自訂群組件的方式來實現，但是用第三方開源庫更簡單。地址： https://github.com/jfeinstein10/SlidingMenu.git

側滑菜單實現原理：
在一個Activity的布局中需要有兩部分，一個是菜單(menu)的布局，一個是內容(content)的布局。兩個布局橫向排列，菜單布局在左，內容布局在右。初始化的時候將菜單布局向左位移，以至於能夠完全隱藏，這樣內容布局就會完全顯示在Activity中。然後通過監聽手指滑動事件，來改變菜單布局的左位移距離，從而控制功能表布局的顯示和隱藏。

執行個體：
運行效果：


要想能夠實現SlidingMenu的效果，首先必須要將它作為libary匯入到你的工程，目錄結構如下：



代碼清單：
主介面內容布局：activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" /></RelativeLayout>

側滑菜單布局：slidingmenu.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Sliding Menu Layout" /></RelativeLayout>

尺寸資源檔：dimens.xml

<resources>    <!-- Default screen margins, per the Android Design guidelines. -->    <dimen name="activity_horizontal_margin">16dp</dimen>    <dimen name="activity_vertical_margin">16dp</dimen>    <dimen name="slidingmenu_offset">150dp</dimen>    <dimen name="shadow_width">15dp</dimen></resources>

shadow.xml資源 這個資源檔是用來實現陰影製作效果的圖形,使用了漸層的繪圖效果。

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

Java原始碼檔案：MainActivity.java

package com.rainsong.slidingmenudemo;import android.os.Bundle;import android.app.Activity;import android.view.Menu;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        // 執行個體化滑動菜單對象        SlidingMenu menu = new SlidingMenu(this);        // 設定為左滑菜單         menu.setMode(SlidingMenu.LEFT);        // 設定觸控螢幕幕的模式        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);        // 設定滑動陰影的寬度        menu.setShadowWidthRes(R.dimen.shadow_width);        // 設定滑動陰影的映像資源        menu.setShadowDrawable(R.drawable.shadow);        // 設定滑動菜單划出時首頁面顯示的剩餘寬度        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);        // 設定漸入漸出效果的值        menu.setFadeDegree(0.35f);        // 附加在Activity上        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);        // 設定滑動菜單的布局        menu.setMenu(R.layout.slidingmenu);    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }}

Android UI之SlidingMenu側滑菜單