Android FloatingActionButton+Snackbar 学习笔记

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

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

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

2. 修改activity_main.xml

<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>
        
    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>
    

    


    
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。

<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>
        
    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>
    

    


    
androidx.drawerlayout.widget.DrawerLayout>

6. 运行效果图