DrawerLayout侧滑详解-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

DrawerLayout侧滑详解

简介: 前面我们说了自定义侧滑菜单,也说了SlidingMenu的使用,这一节我们再来说下DrawerLayout。DrawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说DrawerLayout是因为第三方控件如SlidingMenu等出现之后,google借鉴而出现的产物。
前面我们说了自定义侧滑菜单,也说了SlidingMenu的使用,这一节我们再来说下DrawerLayout。DrawerLayoutSupport Library包中实现了侧滑菜单效果的控件,可以说DrawerLayout是因为第三方控件如SlidingMenu等出现之后,google借鉴而出现的产物。DrawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(drawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)。drawerLayout其实是一个布局控件,跟LinearLayout等控件是一种东西,但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果。
1、DrawerLayout的使用
使用时直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧菜单,第三个View为右侧侧滑菜单,当然第三个是可选的。主内容区的布局代码要放在侧滑菜单布局的前面,这样可以帮助DrawerLayout判断谁是侧滑菜单,谁是主内容区;
第一个View也即主界面的宽高应当设置为match_parent。
第二、三个View需要设置android:layout_gravity="left",和android:layout_gravity="right"且一般高度设置为match_parent,宽度为固定值,即侧滑菜单的宽度。
按照上面的描述写个布局文件,然后设置给Activity就添加好了左右侧滑
写一个布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_main_layout"
    tools:context="com.example.drawerlayout.MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_main_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="OpenRightMenu"
            android:text="打开"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />

    </RelativeLayout>

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

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

看布局文件我们可以知道,左菜单和右菜单我们都是用一个fragment进行实现,具体的代码就不再写了,大家可以下载源码查看

2、看下MainActivity.java
public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private Button mButton;

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


    private void initViews() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_main_layout);
        mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,
                Gravity.RIGHT);
        mButton = (Button) findViewById(R.id.btn_main_right);
    }

    private void setListeners() {
        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDrawerLayout.openDrawer(Gravity.RIGHT);
                mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,
                        Gravity.RIGHT);
            }
        });
        mDrawerLayout.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {
            //在这个方法里可以设置动画效果
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {

            }

            // 菜单打开
            @Override
            public void onDrawerOpened(View drawerView) {

            }

            // 菜单关闭
            @Override
            public void onDrawerClosed(View drawerView) {
                mDrawerLayout.setDrawerLockMode(
                        DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        });
    }

}
drawerLayout菜单的展开与隐藏可以被DrawerLayout.DrawerListener的实现监听到,这样你就可以在菜单展开与隐藏发生的时候做一些希望做的事情,比如更新actionbar菜单等。如果你的activity有actionbar的话,建议用ActionBarDrawerToggle来监听,这是因为ActionBarDrawerToggle实现了DrawerListener,所以他能做DrawerListener可以做的任何事情,同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来,当展开与隐藏的时候图标有一定的平移效果,点击图标的时候还能展开或者隐藏菜单。
在本例中右侧菜单需要点击才能出现,所以在初始化DrawerLayout的时候,使用了 mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT); 意思是关闭手势滑动。然后在弹出以后,需要让手势可以滑动回去,所以在openRightMenu方法中又调用
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.RIGHT); UNLOCK了一下。最后在onDrawerClosed回调中,继续设置mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.RIGHT);
3、setDrawerListener
通过代码也能看出来,可以使用setDrawerListener监听菜单的打开与关闭等等。这里对于当前操作是哪个菜单的判断是通过TAG判断的,使用gravity应该也能判断出来,大家可以试试
由于DrawerLayout默认只能从边界划出菜单,但是一般侧滑菜单的手势区域都比较大,有兴趣的话,可以重写Activity的onTouchEvent在里面判断
看下效果:

源代码
参考:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: