实现自定义侧滑菜单效果

看了郭大神的 

Android滑动菜单特效实现，仿人人客户端侧滑效果，史上最简单的侧滑实现博文后，对实现侧滑菜单有了基本的实现思路，然后通过自己的思路整理一遍

实现思路：

一个activity内并排显示两个布局，在左边的布局为菜单布局，在右边的布局为内容布局；在初始化界面的时候，将菜单布局完全隐藏，把内容布局显示在可视视图中；在用户滑动的过程中通过水平滑动的距离，动态修改菜单和内容的布局（这里通过修改左边距的值实现）实现侧滑效果。

MainActivity中代码实现

package com.example.qdq.renrenslidemenudemo;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnTouchListener{
    private int screenWidth;//屏幕宽度
    private LinearLayout menu_layout;
    private LinearLayout content_layout;
    private LinearLayout.LayoutParams menu_params;
    private LinearLayout.LayoutParams content_params;
    private int downX;//手指按下屏幕的x坐标
    private int moveX;//手指在屏幕上移动的x坐标
    private int upX;//手指离开屏幕时的x坐标
    private int menuLastMarginX;//手指停止滑动时菜单的左边距
    private int contentLastMarginX;//手指停止滑动时内容的左边距

    private int minContentWidth=200;//内容的最小宽度
    private static int SPEED=200;//滑动速度
    private VelocityTracker tracker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        menu_layout= (LinearLayout) findViewById(R.id.menu_layout);
        content_layout= (LinearLayout) findViewById(R.id.content_layout);
        initValues();
    }
    /**
     * 初始化一些关键性数据。包括获取屏幕的宽度，给content布局重新设置宽度，给menu布局重新设置宽度和偏移距离等。
     */
    private void initValues() {
        //获取屏幕宽度
        WindowManager windowManager= (WindowManager) getSystemService(Context.WINDOW_SERVICE);
        screenWidth=windowManager.getDefaultDisplay().getWidth();
        //获取布局参数
        menu_params= (LinearLayout.LayoutParams) menu_layout.getLayoutParams();
        content_params= (LinearLayout.LayoutParams) content_layout.getLayoutParams();
        //将菜单布局移除屏幕（左移）,将内容布局显示在屏幕上（左移）
        requestLayout(-screenWidth,-screenWidth);
        //记录最后一次的leftMargin属性值
        menuLastMarginX=menu_params.leftMargin;
        contentLastMarginX=content_params.leftMargin;

        content_layout.setOnTouchListener(this);
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        createVelocityTracker(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX= (int) event.getRawX();
                break;
            case MotionEvent.ACTION_MOVE:
                moveX= (int) event.getRawX();
                updateUI(moveX-downX);
                break;
            case MotionEvent.ACTION_UP:
                upX= (int) event.getRawX();
                //首先判断滑动速度
                if(getScrollVelocity()>SPEED){
                    if(upX-downX>0){//向右；这里可以使用动画实现滑动效果
                        requestLayout(-minContentWidth,-minContentWidth);
                    }else if(upX-downX<0){//向左；<span style="font-family: Arial, Helvetica, sans-serif;">这里可以使用动画实现滑动效果</span>
                        requestLayout(-screenWidth,-screenWidth);
                    }
                }
                recycleVelocity();
                //记录最后一次的leftMargin属性值
                menuLastMarginX=menu_params.leftMargin;
                contentLastMarginX=content_params.leftMargin;
                break;
        }
        return true;
    }
    /**
     * （一）当手指左滑并且content宽度大于设定的最小宽度时；
     * （二）当向右滑并且content宽度小于屏幕宽度时
     * 以上两种情况下需要更新界面布局
     */
    private void updateUI(int distance){
        //获取当前内容显示宽度
        int contentWidth=Math.abs(content_params.leftMargin);
        //判断是否符合条件
        if(contentWidth>minContentWidth&&distance>0||distance<0&&contentWidth<screenWidth){
            requestLayout(distance+menuLastMarginX,distance+contentLastMarginX);
        }
    }
    /**
     * 重新请求布局
     * @param menuPadLeft 菜单左边距
     * @param contentPadLeft 内容左边距
     */
    private void requestLayout(int menuPadLeft,int contentPadLeft){
        //设置菜单布局
        menu_params.leftMargin=menuPadLeft;
        menu_layout.setLayoutParams(menu_params);
        //设置内容布局
        content_params.leftMargin=contentPadLeft;
        content_layout.setLayoutParams(content_params);
    }
    /**
     * 创建VelocityTracker对象，并将触摸content界面的滑动事件加入到VelocityTracker当中。
     * @param motionEvent
     */
    private void createVelocityTracker(MotionEvent motionEvent){
        if(tracker==null){
            tracker=VelocityTracker.obtain();
        }
        tracker.addMovement(motionEvent);
    }
    /**
     * 获取1s内移动的像素值
     * @return 速度
     */
    private int getScrollVelocity(){
        tracker.computeCurrentVelocity(1000);
        int speed= (int) tracker.getXVelocity();
        return Math.abs(speed);
    }
    /**
     * 回收资源
     */
    private void recycleVelocity(){
        if(tracker!=null){
            tracker.recycle();
            tracker=null;
        }
    }
}

activity_main.xml中代码

<?xml version="1.0" encoding="utf-8"?>
<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="horizontal"
    tools:context="com.example.qdq.renrenslidemenudemo.MainActivity">
    <LinearLayout
        android:id="@+id/menu_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="#550000">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="菜单界面"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="#005500">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#ffffff"
            android:text="内容界面"/>
    </LinearLayout>
</LinearLayout>