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);

    }   

}

发布了50 篇原创文章 · 获赞 2 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章