手记

陪伴了你N年的控件等你来看—DrawerLayout

下码看花
2019-09-06 14:33:32浏览 2005

前言

Hi，又见面啦，昨天给大家介绍了关于微信的一个控件，那么今天给大家介绍的是一个“陪伴”了我们很多年且常用又实用的控件。阔能花粉们会很疑惑，我只是个技术小白呀，怎么它就陪伴了我好多年了？那么就赶紧来看看今天的主角—DrawerLayout吧~

简介及示例

DrawerLayout被称为滑动菜单，就是将一些菜单选项隐藏起来，而不是放在主屏幕上，通过滑动的方式将菜单显示出来。这种方式即节省了屏幕空间，又实现了好看的动画效果，比如我们一直在用的扣扣的左侧菜单效果~

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件。

在之前的应用中，实现侧滑菜单功能大多是通过开源库SlidingMenu来实现，后来谷歌在V4包中添加了DrawerLayout来实现这个功能，完全可以替代SlidingMenu。

先上一张效果图：

1.基本使用

对于DrawerLayout来说，从它的名字就可以看出来它是一个布局，继承自ViewGroup，在布局中允许放入两个直接子控件，第一个子控件为主屏幕中显示的内容，第二个子控件是侧滑菜单中显示的内容。布局代码如下：

<?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"
    tools:context=".MainActivity">
    
	<!--主屏幕中显示的内容-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="主屏幕内容"
            android:textSize="20dp" />
    </LinearLayout>

    <!--侧滑菜单中显示的内容,必须设置layout_gravity属性,表示侧滑方向-->
    <TextView
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#009688"
        android:gravity="center"
        android:text="侧滑菜单内容"
        android:textColor="#FFFFFF"
        android:textSize="20sp" />
</android.support.v4.widget.DrawerLayout>


上图代码中，最外层控件使用了DrawerLayout，其包裹了两个子控件，我们可以根据实际项目需求修改成自己的布局样式，自行定义。

注意：侧滑菜单部分的布局必须设置layout_gravity属性，表示侧滑菜单是在左边（left）还是右边（right）。

2.代码控制及监听

上述示例中，只有在屏幕左边缘处进行拖拽，才可显示侧滑菜单，有时用户并不知道有此功能，这就需要我们通过按钮的点击操作，控制DrawerLayout的显示或隐藏。

DrawerLayout mDrawerLayout = findViewById(R.id.drawerLayout);
//控制DrawerLayout的显示
mDrawerLayout.openDrawer(GravityCompat.START);
//控制DrawerLayout的隐藏
mDrawerLayout.closeDrawer(GravityCompat.START);

并且，我们还可以通过addDrawerListener()对DrawerLayout的显示状态进行监听。

mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
 	@Override
    public void onDrawerSlide(@NonNull View view, float v) {
    	Log.e(TAG, "onDrawerSlide: " + "滑动过程中的监听");
   	}

	@Override
   	public void onDrawerOpened(@NonNull View view) {
    	Log.e(TAG, "onDrawerOpened: " + "滑动开始的监听");
    }

    @Override
    public void onDrawerClosed(@NonNull View view) {
   		Log.e(TAG, "onDrawerClosed: " + "滑动结束的监听");
    }

	@Override
    public void onDrawerStateChanged(int i) {
    	Log.e(TAG, "onDrawerStateChanged: " + "滑动状态改变的监听");
    }
});

3.综合示例

下面通过一个与Toolbar和NavigationView 结合的示例，来介绍DrawerLayout。

1.首先引入design包依赖。

implementation 'com.android.support:design:28.0.0'

2.在styles.xml中设置NoActionBar主题。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

3.设置侧滑菜单布局Head和Menu。

先在layout文件夹下创建head.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginTop="40dp"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="下码看花"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="18dp"
        android:layout_marginTop="12dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:text="下码看花，下码看花下码看花"
        android:textSize="16sp" />
</LinearLayout>

再在res目录下新建一个文件夹menu，在menu目录下新建drawer_menu.xml文件，名字可以自己随意起。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/android"
            android:icon="@mipmap/ic_launcher"
            android:title="Android" />
        <item
            android:id="@+id/ios"
            android:icon="@mipmap/ic_launcher"
            android:title="IOS" />
        <item
            android:id="@+id/web"
            android:icon="@mipmap/ic_launcher"
            android:title="Web" />
        <item
            android:id="@+id/java"
            android:icon="@mipmap/ic_launcher"
            android:title="Java" />
        <item
            android:id="@+id/php"
            android:icon="@mipmap/ic_launcher"
            android:title="PHP" />
    </group>
</menu>

android:checkableBehavior="single"表示item的选项为单选。

4.在代码中控制，完成代码如下。

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;
    private NavigationView mNavigationView;

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

        mDrawerLayout = findViewById(R.id.drawerLayout);
        mToolbar = findViewById(R.id.toolbar);
        mNavigationView = findViewById(R.id.navigationView);

        //传入ToolBar实例
        setSupportActionBar(mToolbar);
        //得到ActionBar实例
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //显示导航按钮
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置导航按钮图片
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu_top);
        }

        //设置Toolbar的导航按钮监听事件
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //显示侧滑菜单
                mDrawerLayout.openDrawer(GravityCompat.START);
            }
        });

        //设置NavigationView条目点击事件
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                //关闭侧滑菜单
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

        //获取NavigationView的HeadView
        View headerView = mNavigationView.getHeaderView(0);
        ImageView ivHead = headerView.findViewById(R.id.iv_head);
        ivHead.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "这是头像", Toast.LENGTH_SHORT).show();
            }
        });
    }
}


<?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"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:title="DrawerLayout示例"
            app:titleTextColor="#FFFFFF" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="主屏幕内容"
            android:textSize="20sp" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head"
        app:menu="@menu/drawer_menu" />
  
</android.support.v4.widget.DrawerLayout>

效果如图：

结语

我们目前已经给大家讲了很多实战中会用到的控件了，比如电商类型、微信、扣扣，那么各位花粉们是不是已经有了好多demo存货啦，希望各位花费自我发挥一哈，把我们之前讲的内容都融合到一个项目之中~

以上就是今天介绍的DrawerLayout的全部内容，DrawerLayout还有很多有意思的扩展功能，让我们根据自己的项目进行配置，赶快在项目中使用吧！

还想看更多实用的控件用法，请关注WXGZH：下码看花！

相关标签
Android
Kotlin
Android Studio
0人推荐
随时随地看视频
慕课网APP

相关阅读

Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）
android.support.v4.widget.DrawerLayout 抽屉效果导航菜单
ASwipeLayout一个强大的侧滑菜单控件
高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题
常用UI布局