手记

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

前言

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

简介及示例

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

DrawerLayoutSupport 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.综合示例

下面通过一个与ToolbarNavigationView 结合的示例,来介绍DrawerLayout

1.首先引入design包依赖。

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

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

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

3.设置侧滑菜单布局HeadMenu

先在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:下码看花!

0人推荐
随时随地看视频
慕课网APP