android 實現側滑菜單

1.主佈局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@drawable/img_frame_background"
    android:layout_height="match_parent" >

    <com.example.slidingview.SlidingView
        android:id="@+id/mhsl"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <LinearLayout
            android:id="@+id/mll"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="horizontal" >

            <include
                android:layout_width="match_parent"
                layout="@layout/left_menu" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"                 
                    android:background="#eeff00">
                       <TextView
                    android:id="@+id/mlv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="center view" />

            </LinearLayout>
        </LinearLayout>
    </com.example.slidingview.SlidingView>

</RelativeLayout>

2.側邊欄佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:layout_marginTop="150dp"
            android:orientation="horizontal" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="left view"
                android:textSize="30sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:orientation="horizontal" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="left view"
                android:textSize="30sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:orientation="horizontal" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="left view"
                android:textSize="30sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:orientation="horizontal" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="left view"
                android:textSize="30sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:orientation="horizontal" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="left view"
                android:textSize="30sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:orientation="horizontal" >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="left view"
                android:textSize="30sp" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

3.自定義view繼承horizentalscrollview

public class SlidingView extends HorizontalScrollView{

    //我們需要獲取三個佈局內容
    //（1）包裹的整個佈局
    private LinearLayout mWrapper;
    //（2）側邊欄佈局
        private ViewGroup mMenu;
    //（3）主界面佈局
        private ViewGroup mItem;

//用於存儲整個屏幕的寬度
private int mScreenWidth;
//菜單滑動之後還能顯示的主界面的多少的值
    private int mMenuRightPadding;
    //已測量的標誌，查看是否已測量，讓程序不會重複的測量
    private boolean once;

//三個構造方法，只調用有三個參數的
    public SlidingView(Context context) {
            this(context,null);
            // TODO Auto-generated constructor stub
    }
        public SlidingView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            // TODO Auto-generated constructor stub
        }   

        public SlidingView(Context context, AttributeSet attrs) {
            this(context, attrs,0);
        //獲取當前屏幕的寬度
        WindowManager wn = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
wn.getDefaultDisplay().getMetrics(outMetrics );
mScreenWidth = outMetrics.widthPixels;

        //轉換成dp
mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120,
                    context.getResources().getDisplayMetrics());

    }

//自定義view都要用到的onmeasure方法，意在測量
@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        if(!once){
        //獲取三個佈局
            mWrapper = (LinearLayout) getChildAt(0);            
            mMenu = (ViewGroup) mWrapper.getChildAt(0);
            mItem = (ViewGroup) mWrapper.getChildAt(1);

            //設置寬和高
            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth-mMenuRightPadding;
            mItem.getLayoutParams().width = mScreenWidth;
            //標識已測量，不會再重複的測量
            once = true;
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

//設置佈局
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // TODO Auto-generated method stub
        super.onLayout(changed, l, t, r, b);
        if(changed){
        //默認隱藏側邊欄
            this.scrollTo(mMenuWidth, 0);
        }
    }

@Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        //橫向的滑動我們不要監聽了，因爲horizentalscrollview會幫我們監聽，我們只要監聽up，手指擡起來的時候判斷
        int action = ev.getAction();
        switch (action) {
        case MotionEvent.ACTION_UP:
            int scrollX = getScrollX();
            //手指擡起來的時候判斷判斷是否超過佈局的一半
            if(scrollX>=mMenuWidth/2){
                this.smoothScrollTo(mMenuWidth, 0);             
            }else{
                this.smoothScrollTo(0, 0);
            }
            return true;
        }
        return super.onTouchEvent(ev);

    }   

}