[移动开发] Android FloatingActionButton+Snackbar 学习笔记

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Android FloatingActionButton+Snackbar 学习笔记 -> 正文阅读

[移动开发]Android FloatingActionButton+Snackbar 学习笔记

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

在build.gradle添加Material库的依赖

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

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

修改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();
            }
        });

优化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();
            }
        });

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