Android Material Design 之 CoordinatorLayout + FloatingActionButton

xiaoxiao2021-02-28  92

https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-usage 中的 Don’t block the floating action button 部分,当 SnackBar 显示的时候,FloatingActionButton 跟着一起往上移动。

下面来看看怎么实现。

首先添加 design library

compile 'com.android.support:design:25.4.0'

布局文件如下

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:layout_margin="16dp" android:src="@drawable/ic_add" /> </android.support.design.widget.CoordinatorLayout>

很简单,CoordinatorLayout 的右下角放一个 FloatingActionButton。

设置点击 FloatingActionButton 弹出 SnackBar,代码如下

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(v, "Snack Bar", Snackbar.LENGTH_LONG).show(); } }); } }

运行效果如下

可以看到,SnackBar 弹出来的时候,FloatingActionButton 也跟着一起往上移动了。

我们仅仅是把 FloatingActionButton 放在了一个 CoordinatorLayout 中,它是怎么实现的呢?

这边涉及到 Behavior 的使用,我们看 FloatingActionButton 的源码会发现它使用了 FloatingActionButton.Behavior

@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class) public class FloatingActionButton extends VisibilityAwareImageButton

看 FloatingActionButton.Behavior 介绍,可以知道它的主要作用就是不让 SnackBar 盖住自己

/** * Behavior designed for use with {@link FloatingActionButton} instances. Its main function * is to move {@link FloatingActionButton} views so that any displayed {@link Snackbar}s do * not cover them. */ public static class Behavior extends CoordinatorLayout.Behavior<FloatingActionButton>
转载请注明原文地址: https://www.6miu.com/read-66547.html

最新回复(0)