自定义view——侧滑的实现

首先效果图如下

首先布局很简单

内容布局

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/top_bar_bg"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/main_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/main_back" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/top_bar_divider" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:text="今日头条"
            android:textColor="@android:color/white"
            android:textSize="30sp" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="新春快乐"
        android:textSize="30sp"
         />


</LinearLayout>

其次菜单布局

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="match_parent"
     >

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@drawable/menu_bg"
        android:orientation="vertical" >

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_focus"
            android:text="焦点" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_local"
            android:text="本地" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_news"
            android:text="新闻" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_pics"
            android:text="图片" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_read"
            android:text="读书" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_ties"
            android:text="热贴" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_ugc"
            android:text="点评" />

        <TextView
            style="@style/menu_style"
            android:drawableLeft="@drawable/tab_vote"
            android:text="投票" />
    </LinearLayout>

</ScrollView>

最后主布局

<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"
    tools:context=".MainActivity" >

    <com.hbwj.a01_.MySlideView
        android:id="@+id/msv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <include layout="@layout/main_menu"/>

        <include layout="@layout/main_contant"/>


    </com.hbwj.a01_.MySlideView>

</RelativeLayout>

自定义view实现侧滑效果

• 1.获取布局

 /**
     * 1. 获取子视图中的控件
     */
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        menuView = getChildAt(0);
        contentView = getChildAt(1);
    }

• 2.测量布局

/**
     * 2.对控件进行测量
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        menuView.measure(MeasureSpec.makeMeasureSpec(menuView.getLayoutParams().width, MeasureSpec.EXACTLY)
                , heightMeasureSpec);
        contentView.measure(widthMeasureSpec, heightMeasureSpec);
    }

• 3.摆放控件的位置

 /**
     * 3.重新摆放控件的位置
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        menuView.layout(0 - menuView.getMeasuredWidth(), 0, 0, b);
        contentView.layout(0, 0, r, b);
    }

• 4.触摸事件进行拖拽

  private float downX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                float endX = event.getX();
                float distanceX = downX - endX;

                downX = event.getX();
                int nextScrollX = (int) (getScrollX() + distanceX);
                if (nextScrollX >= -menuView.getWidth() && nextScrollX <= 0) {
                    scrollBy((int) distanceX, 0);
//                    scrollTo(nextScrollX,0);
                }
                break;
            case MotionEvent.ACTION_UP:
                int curScrollX = getScrollX();

               if (curScrollX > -menuView.getWidth() / 2) {//收起來
                    isMenuShow = false;
                } else {//展开来
                    isMenuShow = true;
                }
                flushState();
                break;
        }
        return true;
    }

说明一下，getScrollX从左往右是负值，相反getScrollX从右向左是正值（我是这么记的,getScrollX=startX-endX,大家参看参考），从左往右拖拽出菜单时getScrollX是负值，而scrollBy的X值参数此时也是负值,而距离是变大的.

• 修改状态

 //公式:distance=目标坐标-getScrollX()
    private void flushState() {
        int distance = 0;

        if (!isMenuShow) {//收起来
            //scrollTo(0,0);
            distance = 0 - getScrollX();
        } else {//展开
            // scrollTo(-menuView.getWidth(),0);

            distance = -menuView.getWidth() - getScrollX();
        }
        scroller.startScroll(getScrollX(), 0, distance, 0);
        invalidate();
    }

     @Override
    public void computeScroll() {
        super.computeScroll();
        if (scroller.computeScrollOffset()) {
            int currX = scroller.getCurrX();
            scrollTo(currX, 0);
            invalidate();
        }
    }

• 提供方法给MainActivity去修改状态

 public void changeState() {
        isMenuShow = !isMenuShow;
        flushState();
    }

MainActivity中点击back键弹出菜单

 main_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                mySlideView.changeState();
            }
        });

点击菜单项中内容弹出吐司

public void onClick(View v){

        TextView tv = (TextView) v;
        Toast.makeText(this,tv.getText(), 0).show();
    }

献上源码:https://gitee.com/yijia_cn/imitation.git