Design Support Library (II): 浮动操作按钮及注意事项
2015-06-14 15:06 307 0
原文 Design Support Library (II): Floating Action Button
如果你读了我的第一篇文章 Navigation View ，你可能会想Android Design support library 还有哪些其它的东西。今天我们来谈谈浮动操作按钮（ Floating Action Button）。
介绍
浮动操作按钮（Floation Action Button简称FAB）是Material Design guidelines中介绍的一个新控件，它突出的是当前屏幕上最重要的操作，是吸引用户注意的一种个性化的方式。
虽然关于这个控件充满着许多天花乱醉的宣传，但是务必注意只在必要的时候，一个操作使用非常频繁的时候（最好是activity一直都需要它）才使用它。关于浮动操作按钮，也有反对的声音，FAB是一个错误的设计一文写的比较有趣。
浮动操作按钮的使用
FAB的使用很简单，不过在design library发布之后的这些天，人们对于这个控件产生了一些争论，为什么呢？因为有些效果和预期不符。
注：关于争论最开始应该是在stackoverflow上：fab的阴影问题。
我们先介绍常规用法，然后再讲讲要让它正常工作需要你做的一些事情。
首先，你需要的只是一个继承自ImageView的FloatingActionButton而已，ImageView的很多知识在这里都会有用。按如下方法把它添加进xml：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add_black"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
你可以看到，我只添加了一个图标，一个elevation（这样就可以显示阴影）和一个pressedTranslationZ（这样在它被按下的时候阴影就会增大）。不错的效果，这种添加方式也很简单。为了把它设置在屏幕的右下角，我还添加了gravity标志，这里假设你是使用的FrameLayout。你可以使用自己的布局。
其它选项
前面讲到的那些自定义是最简单的几种。FAB会采用主题中定义的accent color，同时采用colorControlHighlight作为ripple color。不过这两个都是可以自定义的。
对于背景颜色可以这样：
app:backgroundTint="@color/mycolor"
而ripple则可以这样:
app:rippleColor="@android:color/white"
还可以在java代码中调用相关方法，不过backgroundTint稍微麻烦点，因为它使用的是state list，下面的具体做法（感谢Carlos Morera的提示）：
fab.setBackgroundTintList(ColorStateList.valueOf("Your color"));
有两种大小的浮动操作按钮，要得到mini版的fab耶很简单，添加一个属性就是：
app:fabSize="mini"
注意事项
虽然这些错误在将来也许会被修复，但是我们还是先介绍几个让FAB正常工作的技巧。首先，如果你运行前面的代码，你会发现根据安卓系统版本的不同，会出现很多未料到的事情。所有这些问题似乎都和一个叫做 borderWidth的属性有关， borderWidth需要设置成0：
app:borderWidth="0dp"
另外，在lollipop以前的版本上，使用这个属性会在周围产生外边距（margin），而21＋以上则不会。产生的原因和CardView上所看到的是一样的：lollipop 以前阴影是使用一个drawable来渲染的，使用的是自身的空间来绘制，而Lollipop之后阴影是由系统渲染的。CardView有一个属性可以启用compat padding。
但是浮动操作按钮却没有。不过要模拟出来耶很简单。只要根据安卓版本添加一个margin就可以了。
android:layout_margin="@dimen/fab_compat_margin"
现在只需在dimen.xml文件中定义一个属性值。
values目录下:
<dimen name="fab_compat_margin">0dp</dimen>
values-v21目录下:
<dimen name="fab_compat_margin">16dp</dimen>
简单，对吧？
点击事件
可以按照往常的做法添加一个点击事件：
fab.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
Snackbar.make(content, "FAB Clicked", Snackbar.LENGTH_SHORT).show();
}
});
结论
虽然 Design Support Library给我们的感觉并不太完美，但是使用一点小技巧来弥补也可以工作的很好，而且它也的确为我们节省了很不少时间。接下来我会继续研究新的控件。记得到github上的一个小样例项目中查看相关的代码。
感谢阅读。
