乐趣区

Material-Design-组件之-FloatingActionButton

jiezi

Material Design 设计规范在 Google I/O 2014 推出，这种设计理念一经推出就受到广大开发者的喜爱，主要侧重于纸墨化创作和突出设计的实体感，使得设计更接近于真实世界，力求平滑、连续的交互方式与用户体验，这种设计规范更能促进 Android 生态系统的发展，为此，Google 提供了一系列的符合 Material Design 风格的控件，如 FloatingActionButton、Snackbar、TabLayout 等。虽然经常在开发中用到，但是没有做记录，打算从头开始记录一下这些组件的使用，今天说一下 CoordinatorLayout 和 FloatingActionButton 相关的知识。

CoordinatorLayout

CoordinatorLayout 是一个加强版的 FramLayout，意味着如果不加任何限制，在 CoordinatorLayout 里面的子 View 都会默认出现在左上角，CoordinatorLayout 有两个主要的使用方式：

  1. 作为应用的顶层布局
  2. 作为与一个或多个子 View 交互的容器

可为 CoordinatorLayout 里面的子 View 指定 Behavior，就在单个父布局中提供许多不同的交互效果，子 View 之间也可以相互交互，CoordinatorLayout 可以使用 CoordinatorLayout.DefaultBehavior 注解来指定子 View 的默认行为，总之，可以借助 CoordinatorLayout 实现不同的滚动效果。

FloatingActionButton

FloatingActionButton 是 Material Design 类型的按钮控件，一般表现是浮动在 UI 上层的圆形图标，有自己的 behavior 并可以设置锚点。

FloatingActionButton 有两种大小，分别是 normal(56dp) 和 mini(40dp)，默认是 mini(40dp)，其大小可以通过属性 fabSize 来指定需要的大小，当然也可以设置 fabSize 为 auto，系统会根据不同的屏幕选择合适的大小。

FloatingActionButton 间接继承 ImageView，可以使用如下方式在代码中设置图标：

// 设置图标
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);

FloatingActionButton 的背景颜色默认是主题的 colorAccent 表示的值，在代码中可以通过如下方式修改 FloatingActionButton 的背景颜色，具体如下：

// 设置背景颜色
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));

可以通过如下方式设置 FloatingActionButton 的大小，具体如下：

// 设置大小
fab.setSize(FloatingActionButton.SIZE_MINI);

那么，如何自定义 FloatingActionButton 的大小呢，可以从 FloatingActionButton 部分源码中看到决定其大小的尺寸是定义到 dimens 文件中的，具体由 design_fab_size_mini 和 design_fab_size_normal 来决定，部分代码如下：

// 源码
private int getSizeDimension(@Size final int size) {final Resources res = getResources();
    switch (size) {
        case SIZE_AUTO:
            // If we're set to auto, grab the size from resources and refresh
            final int width = res.getConfiguration().screenWidthDp;
            final int height = res.getConfiguration().screenHeightDp;
            return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
                    ? getSizeDimension(SIZE_MINI)
                    : getSizeDimension(SIZE_NORMAL);
        case SIZE_MINI:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
        case SIZE_NORMAL:
        default:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
    }
}

所以只需要创建 dimens 文件夹，在里面重新设置 design_fab_size_mini 和 design_fab_size_normal 的值即可自定义 FloatingActionButton 的大小了，具体如下：

/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
    <dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>

当然 FloatingActionButton 间接继承 ImageView，ImageView 的一些属性肯定可以使用，这里就不在说了。

FloatingActionButton 的属性

下面是一些常用的属性，具体如下：

android:src             // 设置图标 (24dp)
app:backgroundTint      // 设置图标背景颜色。app:rippleColor         // 设置点击时水波纹颜色  
app:elevation           // 设置阴影大小
app:fabSize             // 设置大小 
app:pressedTranslationZ // 按下时距离 Z 轴的距离  
app:layout_anchor       // 设置锚点  
app:layout_anchorGravity// 设置相对锚点的位置

关于属性，了解一下，具体使用时设置后观察效果不失为一种直观的学习方式。

简单使用

总觉得做笔记还是有效果图比较好，那就简单使用 CoordinatorLayout 和 FloatingActionButton 看一下具体效果，布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.manu.materialdesignsamples.samples.SampleActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:visibility="visible"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:layout_gravity="bottom|end"
        android:src="@drawable/fab"
        android:scaleType="center"
        app:backgroundTint="@color/colorAccent"
        app:backgroundTintMode="src_in"
        app:elevation="5dp"
        app:rippleColor="#000000"
        app:fabSize="auto"
        app:pressedTranslationZ="10dp"/>

</android.support.design.widget.CoordinatorLayout>

然后在设置 FloatingActionButton 的点击事件，具体如下：

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {Snackbar.make(v,"我是 Snackbar...",Snackbar.LENGTH_SHORT)
                .setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {Toast.makeText(SampleActivity.this, "取消", Toast.LENGTH_SHORT).show();}
                }).show();}
});

先来一张效果图，具体如下：

可知 FloatingActionButton 会自动给 Snackbar 留出位置，避免 Snackbar 弹出时遮挡 FloatingActionButton，因为在 FloatingActionButton 内部已经实现了使用 Snackbar 对应的 Behavior，CoordinatorLayout 会根据对应的 Behavior 的具体表现自动调整子 View 的位置，这里当然是 FloatingActionButton 的位置，可以试一试将根布局设置为 RelativeLayout 等，当然，此时 Snackbar 弹出时会遮挡 FloatingActionButton，顾名思义 CoordinatorLayout 就是协调布局，关于 Behavior 这部分留到后面整理。

可以选择关注微信公众号：jzman-blog 获取最新更新，一起交流学习!

退出移动版