Materail Design 入门（五）—— 使用DrawerLayout实现仿qq6.0的侧滑菜单功能

最新推荐文章于 2021-05-26 05:58:26 发布

小欣儿

最新推荐文章于 2021-05-26 05:58:26 发布

阅读量925

点赞数

本文链接：https://blog.csdn.net/u012230055/article/details/74537710

版权

Android Matarial Design 同时被 2 个专栏收录

18 篇文章 3 订阅

订阅专栏

Android Material Design 入门

16 篇文章 6 订阅

订阅专栏

本节引言：
本节给大家带来基础UI控件部分的最后一个控件：DrawerLayout，官方给我们提供的一个侧滑菜单控件，和上一节的ViewPager一样，3.0以后引入，低版本使用它，需要v4兼容包，说到侧滑，相信很多人都用过github上的SlidingMenu，不过好像有两个版本，一个是单独的，另一个需要依赖另一个开源项目：ActionBarSherlock；既然Google为我们提供了这个控件，为何不用咧，而且在 Material Design设计规范中，随处可见的很多侧滑菜单的动画效果，大都可以通过Toolbar + DrawerLayout来实现~，本节我们就来探究下这个DrawerLayout的一个基本用法~还有人喜欢把他称为抽屉控件~官方文档：DrawerLayout

1.使用的注意事项

1.主内容视图一定要是DrawerLayout的第一个子视图（主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单，谁是主内容区；侧滑菜单的部分的布局（这里是ListView）可以设置layout_gravity属性，他表示侧滑菜单是在左边还是右边）
2.主内容视图宽度和高度需要match_parent
3.必须显示指定侧滑视图的android:layout_gravity属性
android:layout_gravity = “start”时，从左向右滑出菜单
android:layout_gravity = “end”时，从右向左滑出菜单
不推荐使用left和right!!!
侧滑视图的宽度以dp为单位，不建议超过320dp(为了总能看到一些主内容视图)

设置侧滑事件：
mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener);
不过还是建议用ActionBarDrawerToggle来监听，ActionBarDrawerToggle实现了DrawerListener，所以他能做DrawerListener可以做的任何事情，同时他还能将drawerLayout的展开和隐藏与actionbar的app 图标关联起来，当展开与隐藏的时候图标有一定的平移效果，点击图标的时候还能展开或者隐藏菜单。我们可以重写ActionBarDrawerToggle的onDrawerOpened()和onDrawerClosed()以监听抽屉拉出或隐藏事件！

mDrawerToggle = new ActionBarDrawerToggle(
        this,                  /* host Activity */
        mDrawerLayout,         /* DrawerLayout object */
        R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
        R.string.drawer_open,  /* "open drawer" description for accessibility */
        R.string.drawer_close  /* "close drawer" description for accessibility */
        ) {
    public void onDrawerClosed(View view) {
        //关闭
        getActionBar().setTitle(mTitle);
        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    }
    public void onDrawerOpened(View drawerView) {
        //打开
        getActionBar().setTitle(mDrawerTitle);
        invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    }
};
mDrawerLayout.setDrawerListener(mDrawerToggle);

4.在代码中主动展开与隐藏侧边菜单。
在点击侧边菜单选项的时候我们往往需要隐藏菜单来显示整个菜单对应的内容。DrawerLayout.closeDrawer方法用于隐藏侧边菜单，DrawerLayout.openDrawer方法用于展开侧边菜单（参见第3点中的代码部分）
5.如何在菜单展开或者隐藏的时候更新activity的menu
上面的的第2点讲到DrawerLayout.DrawerListener监听展开与隐藏事件，在监听的回调方法中我们用invalidateOptionsMenu通知activity重绘menu，然后activity就有机会在onPrepareOptionsMenu方法中更新menu元素的显示与隐藏
6.设置锁定模式
mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); //关闭手势滑动
mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); //打开手势滑动

2.使用代码示例

slidemenu_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:paddingLeft="@dimen/dp_20"
        android:paddingRight="@dimen/dp_20"
        android:paddingBottom="@dimen/dp_20"
        android:paddingTop="@dimen/dp_30"
        android:text="@string/nickname"
        android:textColor="@color/white" />
    <ListView
        android:id="@+id/slidelist"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/light_blue"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</LinearLayout>

如图：
这里写图片描述
main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 主布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.v7.widget.Toolbar
            android:paddingTop="@dimen/dp_20"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/gray"
            android:minHeight="?attr/actionBarSize"
            app:title="">
            <ImageView
                android:id="@+id/icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="首页"
                android:textColor="@color/white"
                android:textSize="18sp" />
        </android.support.v7.widget.Toolbar>
    </LinearLayout>

    <!-- 侧边菜单-->
    <include
        layout="@layout/slidemenu_layout"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>

如图：
这里写图片描述
MainActivity.java

public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;
    private ListView slideList;
    private ImageView icon;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS    );

        setContentView(R.layout.main);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
                R.string.drawer_close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                //打开
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                //关闭
            }
        };
        mDrawerToggle.syncState();//同步DrawerLayout状态
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        //drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
        //drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            //@Override
            //public void onDrawerSlide(View drawerView, float slideOffset) {

           // }

           // @Override
           // public void onDrawerOpened(View drawerView) {

           // }

           // @Override
            //public void onDrawerClosed(View drawerView) {
               // drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
           // }

            //@Override
            //public void onDrawerStateChanged(int newState) {

            //}
        //});

        slideList = (ListView) findViewById(R.id.slidelist);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1,
                this.getResources().getStringArray(R.array.slidemenus));

        slideList.setAdapter(adapter);
        slideList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(MainActivity.this, i + "", Toast.LENGTH_SHORT).show();
                //drawerLayout.closeDrawer(Gravity.LEFT);
            }
        });

        icon = (ImageView) findViewById(R.id.icon);
        icon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.LEFT);
                //drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
            }
        });
    }
}