Android笔记：Material Design系列之DrawerLayout和NavigationView应用

前言

从事Android开发近4年，在工作中根据开发需求不断的去学习新的东西。有些东西用过之后很长时间都没有继续使用，渐渐忘差不多了。再次使用的时候，去翻之前的笔记和demo发现记录的不全，导致自己的学习成本变的很高。所有打算自己把之前用过的做一个详细的笔记，方便自己。
现在有个新项目需要自己完成，就以此为契机，按照项目的需求以此记录更新该系列，第一部分介绍Design Support Library里用到的相关内容。

Material Design

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，Google为Android推出了适用于Material Design的兼容库（Design Support Library）

使用DrawerLayout和NavigationView

gradle引入implementation 'com.android.support:design:26.1.0'

使用Android studio新建project时有一个选项提供模板生成Navigation Drawer Activity，可以大大减少我们的工作量，但是为了讲解如何使用，没有采用此方法，新建空白的Activity。


在xml里添加DrawerLayout和NavigationView

<?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/layout_drawer"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--内容-->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        </FrameLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/view_navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/layout_nav_header"
            app:menu="@menu/drawer"
            app:itemIconTint="@color/colorAccent"
            app:itemTextColor="@color/primary_text"
            android:fitsSystemWindows="true"

            />

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

DrawerLayout为根布局，其中有两个子layout：分别是FrameLayout和NavigationView；FrameLayout展示主页面的内容，NavigationView展示抽屉的内容
NavigationView关键属性讲解
android:layout_gravity="start"start从屏幕左方滑出，end从屏幕右侧滑出；如果没有该属性打开页面直接显示抽屉内容，点击报错。
app:headerLayout="@layout/layout_nav_header"NavigationView头部布局，用于展示信息
app:menu="@menu/drawer"菜单选项，用于展示菜单

layout_nav_header.xm

<?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="150dp"
              android:background="?attr/colorPrimaryDark"
              android:gravity="bottom"
              android:orientation="vertical"
              android:padding="16dp"
              android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="头部信息"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</LinearLayout>

menu/drawer.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/home"
            android:checked="true"
            android:icon="@mipmap/home"
            android:title="主页" />
        <item
            android:id="@+id/theme"
            android:icon="@mipmap/theme"
            android:title="主题" />
        <item
            android:id="@+id/settings"
            android:icon="@mipmap/setting"
            android:title="设置" />

        <item android:title="子菜单">
        <menu>
            <item
                android:id="@+id/tablayout"
                android:icon="@mipmap/favorite"
                android:title="TabLayout" />
            <item
                android:id="@+id/ablum"
                android:icon="@mipmap/ablum"
                android:title="menu2" />
            <item
                android:id="@+id/friends"
                android:icon="@mipmap/friends"
                android:title="menu3" />
        </menu>
        </item>


    </group>

</menu>

Activity中java代码

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{

    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;


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

        initView();
        mNavigationView.setNavigationItemSelectedListener(this);
        openFragment(HomeFragment.newInstance());//

    }

    private void initView() {
        mDrawerLayout = (DrawerLayout) findViewById(R.id.layout_drawer);
        mNavigationView = (NavigationView) findViewById(R.id.view_navigation);
        /*去掉navigation中的滑动条*/
        mNavigationView.getChildAt(0).setVerticalScrollBarEnabled(false);
    }


    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        String title = (String) item.getTitle();
        //int itemId = item.getItemId();
        Toast.makeText(MainActivity.this, "点击了 " + title, Toast.LENGTH_SHORT).show();

        item.setChecked(true);//
        mDrawerLayout.closeDrawer(mNavigationView);

        return true;
    }
}

使用其他布局替代NavigationView

上边完美实现了抽屉效果。但是在实际使用过程中，Navigation抽屉布局不能满足我们的需求，例如像qq侧滑抽屉，底部有按钮，不能使用NavigationView；


微信截图_20180103172511.png

只需要用合适的布局替代NavigationView即可，不能缺少android:layout_gravity="start"属性

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


        <!--内容-->
        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        </FrameLayout>

        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_gravity="start"
            android:background="@color/primary_light"
            >

            <TextView
                android:layout_width="match_parent"
                android:text="z这是一个textview"
                android:layout_height="wrap_content"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="button1"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="button2"/>
        </LinearLayout>


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

和ToolBar实现联动

Android提供了Toolbar替代ActionBar

implementation 'com.android.support:appcompat-v7:26.1.0'support:appcompat-v7提供Toolbar

修改theme，取消Actionbar

使用Theme.AppCompat.Light.NoActionBar作为父Style

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

修改activity_main.xml，DrawerLayout不能继续作为根布局



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.musejianglan.app4md.activity.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
    </android.support.v7.widget.Toolbar>

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


        <!--内容-->
        <FrameLayout
         。。。
        </FrameLayout>

          <!--抽屉-->
        <android.support.design.widget.NavigationView
           。。。。            />

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

</LinearLayout>

代码修改

private Toolbar toolbar;
 /*创建一个Drawerlayout和Toolbar联动的开关*/
 private ActionBarDrawerToggle toggle;

        initView:
        toolbar = findViewById(R.id.toolbar);
         /*设置ActionBar*/
        setSupportActionBar(toolbar);
        /*显示Home图标*/
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        /*设置Drawerlayout的开关,并且和Home图标联动*/
        toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, 0, 0);
        mDrawerLayout.addDrawerListener(toggle);
        /*同步drawerlayout的状态*/
        toggle.syncState();

至此常用的Drawerlayout和NavigationView实现方法讲解完毕，后续会添加在使用过程中遇到的问题和根据特殊需求实现的定制。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,066评论 25赞 709
  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    passiontim阅读 15,659评论 2赞 45
  • 独一无二的自己
    回家的路，我独自向窗外看去，看到植物荗盛的生长，感叹生命是多么渺小，但又那么令人尊重，不管是植物还是人类，都是这大...
    百善修行阅读 1,131评论 0赞 0
  • 精神不朽
    魔龙戒
    股将阅读 715评论 0赞 0
  • 步韻詠春百律之八十一
    春糧 春來倉廩量猶存，更有新糧進庫門。漫漫香餐思汗土，萋萋芳草憶王孫。須知斤兩休浪費，難得緇銖且積屯。田壟如今收割...
    轩若临风阅读 1,339评论 0赞 1