快速掌握 DrawerLayout、NavigationView、FloatingActionButton、SnakeBar

一、一键生成

project > new Moudle > phone & Tablet Moudle > Navigation Drawer Activity

一键生成

下面我们开始一步步实现上面的效果，学习各个新控件的使用方法

二、DrawerLayout

1. 简介

DrawerLayout，v4包提供的一个实现滑动菜单效果的控件。

2. 基本使用

1. 导入v7包（v7包含v4）

compile 'com.android.support:appcompat-v7:25.3.1'

2. 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.strivestay.drawerlayoutdemo.MainActivity">

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 主界面 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello DrawerLayout"/>
        <!-- drawer -->
        <TextView
            android:layout_width="250dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white"
            android:text="This is DrawerLayout"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

DrawerLayout中一般包含两个子View，第一个为主界面的内容，第二个为侧滑菜单的内容；当然也可以再添加一个子View，设置为侧滑菜单；否则会覆盖第一个view，也就是主界面。
设置为侧滑菜单,是通过layout_gravity属性，取值有left、right、start、end。 start和end是根据系统语言决定菜单的显示位置

3. 设置drawerlayout的打开和关闭

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    
    // 设置drawlayout的打开和关闭
    DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);
    drawerLayout.addDrawerListener(toggle);
    toggle.syncState();
}

创建ActionBarDrawerToggle的后两个参数为随便定义的两个字符串资源，用来描述打开或关闭drawer

image

三、NavigationView

1. 简介

我们可以在Drawer（直译为“抽屉”）中定制各种样式布局，不过Google提供了更好的实现方式给我们——NavigationView，它是Design Support包中的一个控件，按照Material Design标准设计，且让Drawer实现酷炫效果更简单。

2. 基本使用

1. 添加Design包依赖（没导入design包的话）

compile 'com.android.support:design:25.3.1'

2. 创建NavigationView需要使用的headerLayout和menu

headerLayout:显示侧滑菜单的头部布局
menu:具体的菜单项

nav_header.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        app:srcCompat="@android:drawable/sym_def_app_icon"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="16dp"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com"/>

</LinearLayout>

nav_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/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import"/>
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery"/>
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow"/>
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools"/>
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share"/>
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send"/>
        </menu>
    </item>

</menu>

3. xml引用NavigationView

<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.strivestay.drawerlayoutdemo.MainActivity">

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <!-- 主界面 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello DrawerLayout"/>
        <!-- drawer -->
        <android.support.design.widget.NavigationView
            android:id="@+id/nav"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:scrollbars="none"
            android:background="@android:color/white"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/nav_menu"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

在布局中为DrawerLayout加入tools:openDrawer="start"可以在Preview中看到侧滑菜单的效果

4. 代码中设置NavigationView

NavigationView nav = (NavigationView) findViewById(R.id.nav);
// 默认选中
nav.setCheckedItem(R.id.nav_camera);
// 去除NavigationView中Scrollbar；xml中使用android:scrollbars="none"无效
NavigationMenuView navigationMenuView = (NavigationMenuView) nav.getChildAt(0);
navigationMenuView.setVerticalScrollBarEnabled(false);
// menu点击事件
nav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }
});

image

四、FloatingActionButton

1. 简介

FloatingActionButton继承自ImageView，也是Design包中的控件，使用前也要先导包；该控件实现的是一个悬浮按钮的效果，以colorAccent为按钮的背景颜色，我们可根据需要的功能给它设置不同的图片；其余和普通View一样。

2. 基本使用

1. 导design包（没导入design包的话）

compile 'com.android.support:design:25.3.1'

2. xml引用

<?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.strivestay.drawerlayoutdemo.MainActivity"
    >

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

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <!-- 主界面 -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            ……
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:src="@android:drawable/ic_dialog_email"
                android:layout_gravity="bottom|end"
                />
        </FrameLayout>

        <!-- menu -->
        ……
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

可以通过app:elevation="8dp"属性设置悬浮高度，越高则阴影越淡

3. 代码设置

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                <!--点击事件-->
            }
        });

五、SnakeBar

1. 简介

SnakeBar，design包中的一个控件；和Toast类似，使用方法也类似，是一个提示工具，但是可以定制、交互。

2. 基本使用

1. 导入design包（没导入design包的话）

compile 'com.android.support:design:25.3.1'

2. 代码中使用

 Snackbar.make(mFab,"点击了FloatingActionButton",2000)
         .setActionTextColor(Color.RED)  // 默认红色，
         .setAction("ok", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this,"点击了Action按钮",Toast.LENGTH_SHORT).show();
                }
            })
         .show();

3. 自定义snackbar的背景色、提示文字颜色

private void customSnackbar(){
    Snackbar snackbar = Snackbar.make(mFab, "点击了FloatingActionButton", 2000)
            .setAction("ok", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // TODO
                }
            });
    // 获取snackbar
    View view = snackbar.getView();
    // 提示文字的Textview
    TextView snackbarText = (TextView) view.findViewById(R.id.snackbar_text);
    // Action所在button
    Button snackbarAction = (Button) view.findViewById(R.id.snackbar_action);
    // 设置背景
    view.setBackgroundColor(ContextCompat.getColor(MainActivity.this,R.color.colorPrimary));
    // 提示文字颜色
    snackbarText.setTextColor(Color.BLACK);
    // Action颜色
    snackbarAction.setTextColor(Color.BLACK);

    snackbar.show();

}

默认效果

image

自定义效果

image

上面的图片可以看到，我们的snackbar弹出时将FloatingActionButton给覆盖了，解决办法如下：

将上面DrawerLayout中的主界面部分的FrameLayout替换为CoordinatorLayout

<!-- 主界面 -->
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello DrawerLayout"/>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_gravity="bottom|end"
        />
</android.support.design.widget.CoordinatorLayout>

补充说明：
代码没有变动，仍然是 Snackbar.make(mFab, "点击了FloatingActionButton", 2000)
CoordinatorLayout只能监听到子view的事件，而snackbar不是它的子视图却能够被监听到，并协调snackbar和floatingactionbutton的动作, 是因为第一个参数传入的是floatingactionbutton，是CoordinatorLayout的子视图，如果传入的不是CoordinatorLayout的子视图，就达不到这个效果，悬浮按钮仍会被覆盖

GitHub示例：ViewDemo/DrawerLayoutDemo

个人总结，水平有限，如果有错误，希望大家能给留言指正！如果对您有所帮助，可以帮忙点个赞！如果转载，希望可以留言告知并在显著位置保留草帽团长的署名和标明文章出处！最后，非常感谢您的阅读！

快速掌握 DrawerLayout、NavigationView、FloatingActionButton、SnakeBar

一、一键生成

二、DrawerLayout

1. 简介

2. 基本使用

1. 导入v7包 （v7包含v4）

2. xml添加DrawerLayout

3. 设置drawerlayout的打开和关闭

三、NavigationView

1. 简介

2. 基本使用

1. 添加Design包依赖 （没导入design包的话）

2. 创建NavigationView需要使用的headerLayout和menu

3. xml引用NavigationView

4. 代码中设置NavigationView

四、FloatingActionButton

1. 简介

2. 基本使用

1. 导design包 （没导入design包的话）

2. xml引用

3. 代码设置

五、SnakeBar

1. 简介

2. 基本使用

1. 导入design包 （没导入design包的话）

2. 代码中使用

3. 自定义snackbar的背景色、提示文字颜色

1. 导入v7包（v7包含v4）

1. 添加Design包依赖（没导入design包的话）

1. 导design包（没导入design包的话）

1. 导入design包（没导入design包的话）