悬浮按钮和可交互按钮

        2014年Googel I/O大会上重磅推出了一套全新的界面设计语言MaterialDesign。因为设计人员也不了解这个东西，开发人员实现起来也很费劲，几乎没有一个可以用的API，都需要自己实现所以普及程度比较低。

        而google也意识到了这一问题，于是2015年的Google I/O大会上推出了一个Design Support库，这个库将一些具有代表性的一些控件和效果进行了封装，这样就大大的简化了实现难度。

        立面设计也是MaterialDesign中一条非常重要的设计思想。也就是说Material Design除了有平面还有立体的效果。

1.FloatingActionButton

基本使用：

我用的是这个包里的：implementation 'com.android.support:design:28.0.0-alpha3'

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:src="@mipmap/ic_done"
    app:elevation="9dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    tools:ignore="MissingConstraints" />

其中app:elevation="9dp"表示悬浮的高度，高度值越小，投影范围越小，投影效果越浓；高度值越大，投影效果越大，越淡。

点击事件：

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "FloatingActionButton", Toast.LENGTH_SHORT).show();

    }
});

2.Snackbar

类似于toast但是比toast多了可交互按钮。比如删除的时候想撤回，可以提示的时候撤回。具体使用：

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "FloatingActionButton", Toast.LENGTH_SHORT).show();
        Snackbar.make(v, "Delect", Snackbar.LENGTH_SHORT)
                .setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this, "Undo", Toast.LENGTH_SHORT).show();
                    }
                })
                .show();
    }
});

 

Snackbar.make(v, "Delect", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "Undo", Toast.LENGTH_SHORT).show(); } }) .show();

make方法创建对象，传入view，Snackbar使用这个view查找到最外层布局，展示Snackbar。第二个参数是内容，第三个参数是时间。

Snackbar从底部出现，上面有提示的文字，还有一个UNDO按钮，按钮可点击，显示一会自动消失。

不过Snackbar把悬浮按钮遮挡住了，我们可以只用CoordinatorLayout解决

3.CoordinatorLayout

使用也很简单

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:src="@mipmap/ic_done"
        app:elevation="9dp"
        tools:ignore="MissingConstraints" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

只是需要用CoordinatorLayout将原来的FloatingActionButton包裹一下就好。。

其实CoordinatorLayout就是一个加强版的Framlayout,也是由support:design库提供。他可以监听各个子控件的各个事件，并作出最合理的响应。比如当FloatingActionButton被遮挡了，他会自动将其上移从而不被遮挡。

转发表明出处：https://blog.csdn.net/qq_35698774/article/details/107944474

点击下载

android互助群：

感谢：郭霖的《第一行代码 第二版》

 

本文地址：https://blog.csdn.net/qq_35698774/article/details/107944474