FloatingActionButton+Snackbar实现MD风格的悬浮按钮+可交互提示

千夜零一 · 简书 · · 2020-10-22 20:27

介绍

Google提供了FloatingActionButton来满足我们实现悬浮按钮的开发需求。CoordinatorLayout，这是MD风格中的折叠式布局；Snackbar不同于Toast，它不光可以用于实际需求中对用户进行消息提示，同时可以进行用户交互功能（Toast只具备提示功能，不可交互）。
此次我将它们结合起来使用，将更明显和直观地感受到悬浮按钮的效果。

效果预览

用法

布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".blog.Case51"
    tools:ignore="MissingConstraints">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/floatingActionBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="40dp"
            android:layout_marginBottom="40dp"
            android:backgroundTint="@color/white"
            android:scaleType="center"
            android:src="@mipmap/add"
            app:elevation="10dp"
            android:layout_gravity="bottom|end"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

在Activity中书写业务逻辑代码

//悬浮按钮+可交互提示
public class Case51 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case51);
        findViewById(R.id.floatingActionBtn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                ToastUtils.show("发布消息");    //用户不可交互
                Snackbar.make(v,"删除数据",Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        ToastUtils.show("取消");
                    }
                }).show();
            }
        });
    }
}