利用DrawerLayout实现侧滑菜单

来源：互联网发布：淘宝商城积分兑换编辑：程序博客网时间：2024/06/06 13:09

本文基本参考自 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锁定让他不能滑动出来。点开后可以滑动回去，所以解除锁定。关闭之后再次解锁。

看一下效果图

0 0