Material Design 组件之FloatingActionButton

原文首发于微信公众号：jzman-blog，欢迎关注交流！

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 获取最新更新，一块儿交流学习!