Android Design Support Library系列
2017-05-18 本文已影响426人
滴滴滴9527
FloatingActionButton本质是一个ImageButton，只不过相对于ImageButton，FloatingActionButton多了很多特效而已.
惯例：给出官方文档.
一、FloatingActionButton实现的效果图
使用前添加依赖
dependencies {
compile 'com.android.support:design:25.3.1'
}
布局文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/add"
android:layout_centerInParent="true"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:borderWidth="0dp"
app:elevation="8dp"
app:pressedTranslationZ="16dp"
app:rippleColor="@color/colorAccent" />
</RelativeLayout>
FloatingActionButton使用及其简单，直接当做ImageButton使用，给它设置宽高、src等属性.
下图是 android:src="@mipmap/add"原图，是一个白色的+号.
add.png
观察上面的效果图,我们可以发现FloatingActionButton在add.png的基础上添加了不少额外的特效:
1)原图是没有填充色的，FloatingActionButton实现的效果图上多了蓝色的填充色
2)原图是没有阴影的，FloatingActionButton实现的效果图上在静止时有一个阴影，按下之后阴影范围扩大了
3) 原图是没有设置seletor的，FloatingActionButton实现的效果图上在静止时是一种填充色，按下之后填充色变了，并且伴随一个涟漪扩散的动画
二、FloatingActionButton的常用属性
android:src="" FloatingActionButton的图标
app:backgroundTint="" 填充色
该属性不设置的话，默认使用theme中colorAccent颜色
Android5.0 引入了Z轴的概念，让组件呈现3D效果，Z属性可以通过elevation和translationZ进行修改
Z＝ elevation＋translationZ
elevation：设置该属性使控件有一个阴影，感觉该控件像是“浮”起来一样，达到3D效果
translationZ：设置该组件阴影在Z轴（垂直屏幕方向）上的位移
在5.0之前，我们如果想给View添加阴影效果，以体现其层次感，通常的做法是给view设置一个带阴影的背景图片
在5.0之后，我们只需要简单的修改View的Z属性，就能让其具备阴影的层次感，不过要求版本至少5.0 Lollipop,也就是API21
使用FloatingActionButton的好处就是不需要5.0 就可以使用Z属性，因为google已经封装好了
app:elevation="" 默认状态下FloatingActionButton的阴影大小
app:pressedTranslationZ="" 按下时FloatingActionButton的阴影在Z方向（垂直屏幕方向）上的偏移
app:rippleColor="" 按下之后FloatingActionButton的背景颜色，还会伴随一个涟漪扩散的动画
(PS:需要给FloatingActionButton设置点击事件才会有效果)
app:fabSize="" FloatingActionButton的大小，normal,mini,auto三个值
当然，如果这三个值都不满意的话，我们可以直接通过 ：
android:layout_width="" android:layout_height=""
这两个我们最常用的属性来设置大小
app:borderWidth="0dp" 早期版本如果不设置这个属性为0dp的话，在5.X设备上没有阴影效果，不过我测试时发现不设置也没关系，阴影效果照样显示，大概google修复了吧，如果你的阴影效果不显示，可以设置这个属性试一试
FloatingActionButton还可以锚定在另外一个组件上方，这个通常搭配AppBarLayout，在使用CoordinatorLayoutt作为容器时才能生效
app:layout_anchor="@id/.......your AppBarLayout id" 锚定哪个组件，通常是AppBarLayout
app:layout_anchorGravity="end|bottom" 相对于该组件位置
三、FloatingActionButton兼容性
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:borderWidth="0dp"
app:elevation="8dp"
app:pressedTranslationZ="16dp"
app:rippleColor="@color/colorAccent" />
</RelativeLayout>
去掉了android:layout_centerInParent="true"
在5.0以前的设备上的效果图：
在5.0之后的设备上的效果图：
可以看见，两张效果图不一样，在5.0之前，会默认有一个外边距形成了margin的效果，在5.0之后就没有这个外边距，所以我们需要给FloatingActionButton设置一个正确的margin来兼容。
android:layout_margin="@dimen/fab_margin"
在res/values/dimens中
<dimen name="fab_margin">0dp</dimen>
在res/values-v21/dimens中
<dimen name="fab_margin">16dp</dimen>
ok,这样就能很好的兼容了O(∩_∩)O
PS：在使用CoordinateorLayout作为容器的时候就没有外边距这个问题了.
四、设置点击事件
像ImageButton一样设置就可以了
public class MainActivity extends AppCompatActivity {
private FloatingActionButton mFAB;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFAB= (FloatingActionButton) findViewById(R.id.floatingActionButton);
mFAB.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//do something
}
});
}
}
ok，FloatingActionButton的使用就介绍到这里~~~
