Android FloatingActionButton+Snackbar 学习笔记

Posted 2021-10-25 啊俊仔

FloatingActionButton 是Material库中提供的一个控件，可以实现悬浮按钮的效果。

1. 在build.gradle添加Material库的依赖

//Material库
    implementation 'com.google.android.material:material:1.1.0'

2. 修改activity_main.xml

<?xml version="1.0" encoding="utf-8"?><!--drawerlayout 实现滑动菜单-->
<androidx.drawerlayout.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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!-- 此布局允许放入两个控件 第一个控件 主屏幕中显示的内容    -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar xmlns:app="http //schemas android com/apk/res-auto"
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_200"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:navigationIcon="@drawable/navi"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></androidx.appcompat.widget.Toolbar>
        <!--个悬浮按钮-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/setting_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            app:borderWidth="0dp"
            android:backgroundTint="@color/skyBlue"
            android:src="@drawable/notebook"
            app:rippleColor="@color/LightSlateBlue"></com.google.android.material.floatingactionbutton.FloatingActionButton>
        <!--
        end 如果系统语言是从右往左，那么end就表示左边；
            如果系统语言是从左往右的，那么end就表示右边.

        android:src：FloatingActionButton中显示的图标
        app:backgroundTint：正常的背景颜色
        app:rippleColor：按下时的背景颜色
        app:elevation：正常的阴影大小

        不设置  app:borderWidth="0dp" 会出现一圈默认颜色的边框
        -->
    </FrameLayout>
    <!--    第二个控件 滑动菜单中显示的内容（任意控件）-->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"></com.google.android.material.navigation.NavigationView>
    <!--通过app:menu和app:headerLayout属性将刚刚准备的menu和headerLayout设置进去-->

    <!--
    android:layout_gravity="start"
    告诉滑动菜单在左在右
    start 属性自动判断
    英语、汉语，滑动菜单在左边-->


    <!--
    ?attr/actionBarSize => @dimen/mtrl_toolbar_default_height => 56dp

    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    使toolbar单独使用深色主题(因为浅色主题的toolbar文字是黑色的，不好看)
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    使toolbar的弹出菜单使用浅色主题
    -->
</androidx.drawerlayout.widget.DrawerLayout>

3. 修改MainActivity.java

 private FloatingActionButton setting_btn;

 //绑定 FloatingActionButton控件
 setting_btn = findViewById(R.id.setting_btn);

//监听 FloatingActionButton控件
        setting_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplication(),"你点击了悬浮按钮",Toast.LENGTH_SHORT).show();
            }
        });

4. 优化MainActivity.java
   使用Snackbar替换掉Toast
   Toast的作用是告诉用户现在发生了什么事情，用户无法交互；
   Snackbar允许在提示中增加一个可交互按钮，当用户点击时则在这方面进行一些扩展。

//        监听 FloatingActionButton控件
        setting_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //make方法：view 只要是当前界面布局的任意一个view就可以，Snackbar会使用这个view来自动查找最外层的布局
                //make方法：第二个参数 Snackbar中显示的内容
                //make方法：第三个参数 Snackbar显示的时长
                //make方法：setAction方法 设置一个动作
                Snackbar.make(v,"你点击了悬浮按钮",Snackbar.LENGTH_SHORT)
                        .setAction("后悔啦不点啦", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(getApplication(),"我假装不知道你点过按钮了",Toast.LENGTH_SHORT).show();
                    }
                }).show();
//                Toast.makeText(getApplication(),"你点击了悬浮按钮",Toast.LENGTH_SHORT).show();
            }
        });

5. 解决Snackbar遮挡悬浮按钮问题
   CoordinatorLayout可以说是一个增强版的FrameLayout，也是由Material库所提供的。可以监听所有子空间的各种事件，自动帮助我们做出最为合理的响应。
   在activity_main.xml中替换FrameLayout布局为CoordinatorLayout。

<?xml version="1.0" encoding="utf-8"?><!--drawerlayout 实现滑动菜单-->
<androidx.drawerlayout.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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!-- 此布局允许放入两个控件 第一个控件 主屏幕中显示的内容    -->
    <com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar xmlns:app="http //schemas android com/apk/res-auto"
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_200"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:navigationIcon="@drawable/navi"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></androidx.appcompat.widget.Toolbar>
        <!--个悬浮按钮-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/setting_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            app:borderWidth="0dp"
            android:backgroundTint="@color/skyBlue"
            android:src="@drawable/notebook"
            app:rippleColor="@color/LightSlateBlue"></com.google.android.material.floatingactionbutton.FloatingActionButton>
        <!--
        end 如果系统语言是从右往左，那么end就表示左边；
            如果系统语言是从左往右的，那么end就表示右边.

        android:src：FloatingActionButton中显示的图标
        app:backgroundTint：正常的背景颜色
        app:rippleColor：按下时的背景颜色
        app:elevation：正常的阴影大小

        不设置  app:borderWidth="0dp" 会出现一圈默认颜色的边框
        -->
    </com.google.android.material.circularreveal.coordinatorlayout.CircularRevealCoordinatorLayout>
    <!--    第二个控件 滑动菜单中显示的内容（任意控件）-->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"></com.google.android.material.navigation.NavigationView>
    <!--通过app:menu和app:headerLayout属性将刚刚准备的menu和headerLayout设置进去-->

    <!--
    android:layout_gravity="start"
    告诉滑动菜单在左在右
    start 属性自动判断
    英语、汉语，滑动菜单在左边-->


    <!--
    ?attr/actionBarSize => @dimen/mtrl_toolbar_default_height => 56dp

    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    使toolbar单独使用深色主题(因为浅色主题的toolbar文字是黑色的，不好看)
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    使toolbar的弹出菜单使用浅色主题
    -->
</androidx.drawerlayout.widget.DrawerLayout>

6. 运行效果图