DrawerLayout实现双向侧滑

  这篇文章是参考鸿洋大神的博客写的链接是：点击打开链接

首先当然是先上布局文件咯，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ic"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/ww">
        <Button
            android:layout_marginTop="10dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/ic"
            android:onClick="OpenRightMenu"
            android:layout_width="40dp"
            android:layout_height="30dp"/>

    </RelativeLayout>
    <fragment
        android:id="@+id/menu_left"
        android:name="com.example.chenxiaojiong.drawerlayout.LeftFragment"
        android:layout_width="200dp"
        android:tag="LEFT"
        android:layout_gravity="left"
        android:layout_height="match_parent"/>

    <fragment
        android:id="@+id/menu_right"
        android:tag="RIGHT"
        android:name="com.example.chenxiaojiong.drawerlayout.RightFragment"
        android:layout_gravity="right"
        android:layout_width="100dp"
        android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>

DrawerLayout是在V4包下面的，所以这个必须加上包名，我自己一开始没有加，就运行出错了……

布局是由三个部分组成的，左边和右边由fragment组成，两个的宽度不一样，重要的是两个都必须设置tag和layout_gravity，（在监听滑动的时候，利用tag来区分是哪个菜单）这个关乎代码中的调用……

左右连个fragment的布局很简单我就不上代码展示了。当然代码也比较简单就是写个类继承Fragment，然后直接在onCreateView中return就可以：

 return inflater.inflate(R.layout.menu_left,container,false);

最主要的代码部分：

package com.example.chenxiaojiong.drawerlayout;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.Gravity;
import android.view.View;

import com.nineoldandroids.view.ViewHelper;

public class MainActivity extends Activity {

    private DrawerLayout mViewById;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
    }

    private void initView() {
        mViewById = (DrawerLayout) findViewById(R.id.id_drawerlayout);
        //设置当右侧菜单看不到的时候，只有点右上角的按钮才可以弹出
        mViewById.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
    }

    private void initEvent() {
        mViewById.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                //内容区域对象
                View mContent = mViewById.getChildAt(0);
                //菜单区域对象
                View mMenu = drawerView;
                //slideOffset表示的是滑动的距离（菜单）
                float scale = 1 - slideOffset;

                //在菜单出现的过程中，让内容区域从1.0~0.8进行变化~~
                float rightScale = 0.8f + scale * 0.2f;
                //菜单的缩放比例（0.7到1.0之间缩放）
                float leftScale = 1 - 0.3f * scale;

                if (drawerView.getTag().equals("LEFT")) {
                    //菜单X方向上的缩放
                    ViewHelper.setScaleX(mMenu, leftScale);
                    //菜单Y轴方向上的缩放
                    ViewHelper.setScaleY(mMenu, leftScale);
                    //菜单的透明度从0.6到1.0变化
                    ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
                    //菜单的平移（主界面）View：表示的是在哪个View上活动  ，第二个参数表示的是移动的距离
                    ViewHelper.setTranslationX(mContent,
                            mMenu.getMeasuredWidth() * (1 - scale));

                    //设置内容区域缩放的中心点（左侧的中间）
                    ViewHelper.setPivotX(mContent, 0);
                    ViewHelper.setPivotY(mContent,
                            mContent.getMeasuredHeight() / 2);
                    //用于刷新View（必须在Ui线程中）：修改某个界面时，调用这个方法才会看到界面的重新绘制
                    mContent.invalidate();
                    //设置内容区域在X和Y轴上的缩放
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                } else {

                    ViewHelper.setTranslationX(mContent,
                            -mMenu.getMeasuredWidth() * slideOffset);
                    //设置右侧菜单滑出时，内容区域的缩放中心点
                    ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());
                    ViewHelper.setPivotY(mContent,
                            mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                }
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                //设置当右侧菜单看不到的时候，只有点右上角的按钮才可以弹出
                mViewById.setDrawerLockMode(
                        DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
    }
    public void OpenRightMenu(View view)
    {
        mViewById.openDrawer(Gravity.RIGHT);
        //弹出后可以使用手势将其划回去
        mViewById.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
                Gravity.RIGHT);
    }
}

关于DrawerLayout的一个小缺陷就是，只能从边界划出菜单，如果想利用手势划出这个可以重写OnTouchEvent的方法，这个我待会试试（成功了再放上来）。大致就是这样的，算是比较简单的一个双向侧滑的实现。

效果如下所示：

内容区域右上角的小图片设置了点击事件，左右菜单实现起来像是在内容区域的后面