学习笔记： DrawerLayout、NavigationView、FloatingActionButton、SnakeBar的使用

最新推荐文章于 2023-02-07 12:07:56 发布

淡然一笑、

最新推荐文章于 2023-02-07 12:07:56 发布

阅读量615

点赞数 1

分类专栏：【Android】文章标签： DrawerLayout NavigationView FloatingActionButton SnakeBar 5.0新控件

本文链接：https://blog.csdn.net/weixin_39251617/article/details/79032709

版权

【Android】专栏收录该内容

34 篇文章 13 订阅

订阅专栏

一、一键生成

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

三、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;
    }
});

四、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();

}

默认效果

自定义效果

上面的图片可以看到，我们的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的子视图，就达不到这个效果，悬浮按钮仍会被覆盖

个人总结，水平有限，如果有错误，希望大家能给留言指正！如果对您有所帮助，可以帮忙点个赞！如果转载，希望可以标明文章出处！最后，非常感谢您的阅读！

淡然一笑、

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记： DrawerLayout、NavigationView、FloatingActionButton、SnakeBar的使用

一、一键生成 project &amp;gt; new Moudle &amp;gt; phone &amp;amp; Tablet Moudle &amp;gt; Navigation Drawer Activity下面我们开始一步步实现上面的效果，学习各个新控件的使用方法二、DrawerLayout1. 简介DrawerLayout，v4包提供的一个实现滑动菜单效果的控件。2. ...
复制链接

扫一扫