Material Design系列--DrawerLayout

最新推荐文章于 2023-06-20 11:45:00 发布

怂猫

最新推荐文章于 2023-06-20 11:45:00 发布

阅读量304

点赞数

分类专栏：轮子 Material库文章标签： android 设计控件布局

本文链接：https://blog.csdn.net/qq_33306988/article/details/53707165

版权

轮子同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Material库

4 篇文章 0 订阅

订阅专栏

DrawerLayout(抽屉式布局)：

在Android support.v4 中有一个抽屉视图控件DrawerLayout。使用这个控件，可以生成通过在屏幕上水平滑动打开或者关闭菜单，能给用户一个不错的体验效果。

DrawerLayout配合v7包下的Toolbar和design库的NavigationView 可以快速实现一个高大上侧滑菜单，如图：

这里写图片描述

1.在build.gradle/dependencies下添加依赖

    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.android.support:design:25.0.1'
    compile 'com.android.support:support-v4:25.0.1'

2.布局中引入DrawerLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.lm.demo.toolbar_demo.Main2Activity">


    <android.support.v4.widget.DrawerLayout
        android:id="@+id/id_main_DrawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="主页"
                android:textColor="@color/colorAccent"
                android:textSize="32sp" />
        </FrameLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:text="侧滑菜单"
            android:textColor="@color/colorAccent"
            android:textSize="32sp" />
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

DrawerLayout直接继承于ViewGroup类，所以这个类也是一个容器类，它内部需要放两个任意View：
DrawerLayout的第一个子元素是主要内容，即抽屉没有打开时显示的布局。这里采用了一个FrameLayout。
DrawerLayout的第二个子元素是抽屉中的内容，即抽屉布局，值得需要注意的是android:layout_gravity="start" ，android:layout_gravity属性是必须要指定的，因为我们要告诉DrawerLayout，滑动菜单是在屏幕左边还是右边，设置为start或者left，是在屏幕左边，相反属性就是右边。

这里写图片描述

现在我们不需要添加任何的java代码，就可以实现了侧滑的功能。

3.为了让滑动菜单显得高大上，我们配合Toolbar和NavigationView使用

A.先是NavigationView：
将DrawerLayout的第二个子元素换成NavigationView

  <android.support.v4.widget.DrawerLayout
        android:id="@+id/id_main_DrawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="主页"
                android:textColor="@color/colorAccent"
                android:textSize="32sp" />
        </FrameLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/id_main_NavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/navigationview_menu"
            app:headerLayout="@layout/nav_header"
            />

    </android.support.v4.widget.DrawerLayout>

在NavigationView中有两个属性app:menu 和 app:headerLayout ，作用如下图所示

这里写图片描述

@menu/navigationview_menu 是引用menu文件夹中的navigationview_menu.xml
步奏：首先在res目录下new->Directory,创建一个menu文件夹，然后再该文件夹中new->Menu resource file，创建一个xml文件，写入几个item

<?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/id_menu_SHOEYE"
            android:icon="@mipmap/start_time"
            android:title="首页" />
        <item
            android:id="@+id/id_menu_SOUSUO"
            android:icon="@mipmap/start_time"
            android:title="搜索" />
        <item
            android:id="@+id/id_menu_SHUOSHUO"
            android:icon="@mipmap/start_time"
            android:title="说说" />
        <item
            android:id="@+id/id_menu_WODE"
            android:icon="@mipmap/start_time"
            android:title="我的" />
    </group>
</menu>

android:checkableBehavior指定为single，表示所有菜单只能单选

@layout/nav_header就直接上代码了

<?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:background="@color/colorPrimaryDark"
    android:padding="15dp"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        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:text="昵称：XXX"
        android:textSize="16sp"
        android:layout_marginTop="5dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="个人简介：*******"
        android:textSize="16sp"
        android:layout_marginTop="5dp"/>
</LinearLayout>

这样我们就完成了上图的内容

B.接下来是Toolbar,不懂的就看上一章Material Design系列–Toolbar详细

1）. 首先我们先隐藏掉原有的ActionBar
2）.布局引入，为了复用，新建一个toolbar_item布局（其实还有添加依赖的，但是我们建项目的时候，自动添加了）
3）.主布局引入<include layout="@layout/toolbar_item"></include> （这里需要注意的是，侧滑时若不想遮住Toolbar，就在引用DrawerLayout的前面引入，要是想遮住，就在DrawerLayout第一个子元素内引入）

5.Activity

package com.lm.demo.toolbar_demo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.TextView;

public class Main2Activity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;
    private TextView mTextView;
    //监听器，或者说是将Toolbar跟DrawerLayout绑定的工具，V7包下的，V4也可以
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        initView();


    }

    private void initView() {
        mTextView= (TextView) findViewById(R.id.id_main_textView);
        mDrawerLayout= (DrawerLayout) findViewById(R.id.id_main_DrawerLayout);
        mToolbar= (Toolbar) findViewById(R.id.id_Item_toolbar);
        //设置标题栏
        setSupportActionBar(mToolbar);
        ActionBar actionBar=getSupportActionBar();
        if (actionBar!=null){
            actionBar.setTitle("标题");
            //让导航图标显示出来
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        //mDrawerLayout,mToolbar绑定，参数4,5是对打开和关闭的描述
        mActionBarDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,
        R.string.open_drawer,R.string.close_drawer);
        //初始化状态
        mActionBarDrawerToggle.syncState();
        //设置抽屉监听
        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);

        mNavigationView= (NavigationView) findViewById(R.id.id_main_NavigationView);
        //设置默认选中
        mNavigationView.setCheckedItem(R.id.id_menu_SHOEYE);
        //设置每项的监听
        mNavigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        mTextView.setText(item.getTitle());
        mDrawerLayout.closeDrawers();
        return true;
    }
}

Gif

如果有误，欢迎指正！

怂猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design系列--DrawerLayout

DrawerLayout(抽屉式布局)：在Android support.v4 中有一个抽屉视图控件DrawerLayout。使用这个控件，可以生成通过在屏幕上水平滑动打开或者关闭菜单，能给用户一个不错的体验效果。DrawerLayout配合v7包下的Toolbar和design库的NavigationView 可以快速实现一个高大上侧滑菜单，如图：1.在build.gradle/dependenc
复制链接

扫一扫