利用DrawerLayout实现侧滑菜单

本文基本参考自 http://blog.csdn.net/lmj623565791/article/details/41531475 。

上一篇我们用HorizontalScrollView实现了侧滑菜单，安卓官方事实上提供了一个DrawerLayout用来实现类似的侧滑菜单。DrawerLayout的菜单内容（抽屉）被拖出来后会显示在内容布局之上，我们想实现内容随菜单移动而不被遮挡的效果。

实际上实现的思想跟上一篇ScrollView的类似，利用属性动画改变透明度和偏移量等等。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0288D1">
        <Button
            android:id="@+id/open_right"
            android:background="#B3E5FC"
            android:layout_alignParentRight="true"
            android:text="RightMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#ffffff"
            android:text="Content"
            android:textSize="40sp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/left_menu"
        android:layout_width="160dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical"
        android:tag="LEFT">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#ffffff"
            android:text="LEFT"
            android:textSize="40sp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/right_menu"
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:orientation="horizontal"
        android:tag="RIGHT">
        <!--android:background="#B3E5FC"-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#ffffff"
            android:text="RIGHT"
            android:textSize="40sp" />

    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

在DrawerLayout中简单的放了三个布局，第一个作为主内容，第二第三个分别设置了layout_gravity为"start"和'end'的作为左边和右边的抽屉菜单。实际上这个时候运行程序已经有drawerLayout的效果了。然后我们在MainActivity中实现我们的逻辑来达到想要的效果。

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private View content;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button openRight = (Button) findViewById(R.id.open_right);
        openRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(GravityCompat.END);
                /*解锁右边抽屉*/
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, GravityCompat.END);
                /*右边抽屉打开后锁定左边抽屉*/
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, GravityCompat.START);

            }
        });

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        /*锁定右边抽屉，不能滑动打开*/
        drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, GravityCompat.END);
        content = drawerLayout.getChildAt(0);
        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

                /*slideOffset为0~1之间变化的数*/
                float menuAlphaRatio = (float) (0.4 + 0.6 * slideOffset);
                float contentAlphaRadio = (float) (1 - 0.4 * slideOffset);
                float contentScale = (float) (1 - 0.3 * slideOffset);
                float contentTraRadio;
                drawerView.setAlpha(menuAlphaRatio);
                drawerView.setScaleX(menuAlphaRatio);
                drawerView.setScaleY(menuAlphaRatio);
                drawerView.setPivotY(drawerView.getMeasuredHeight() / 2);
                /*drawerView.getTag().equals("LEFT")||*/
                if (drawerView.getId() == R.id.left_menu) {
                    contentTraRadio = drawerView.getMeasuredWidth() * slideOffset;
                    content.setPivotX(0);
                    content.setPivotY(content.getMeasuredHeight() / 2);
                    drawerView.setPivotX(drawerView.getMeasuredWidth());
                } else {
                    contentTraRadio = -drawerView.getMeasuredWidth() * slideOffset;
                    content.setPivotX(content.getMeasuredWidth());
                    content.setPivotY(content.getMeasuredHeight() / 2);
                    drawerView.setPivotX(0);
                }
                content.setAlpha(contentAlphaRadio);
                content.setTranslationX(contentTraRadio);
                content.setScaleX(contentScale);
                content.setScaleY(contentScale);
            }

            @Override
            public void onDrawerOpened(View drawerView) {

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                /*抽屉关闭后再次锁定右边抽屉*/
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, GravityCompat.END);
                /*解锁左边抽屉*/
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, GravityCompat.START);
            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
    }
}

我们增加了一个设定就是右边的菜单只能通过点击按钮打开。所以开始的时候把右边Drawer锁定让他不能滑动出来。点开后可以滑动回去，所以解除锁定。关闭之后再次解锁。

看一下效果图