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

下码看花

发布于 2019-09-06 09:19:41

5960

发布于 2019-09-06 09:19:41

前言

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

简介及示例

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

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

在之前的应用中，实现侧滑菜单功能大多是通过开源库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>

效果如图：