注:在这提供的代码是用kotlin语言。
示例 Github地址:https://github.com/ChaiJiangpeng/AndroidMaterialDesignDemo
使用之前要先引入design包
compile'com.android.support:design:27.0.2'
1.简单使用
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimary"
android:layout_margin="15dp"
android:src="@drawable/ic_index_dashboard"
app:borderWidth="0dp"
app:rippleColor="@color/colorPrimaryDark"
app:elevation="8dp"
app:pressedTranslationZ="15dp"
app:useCompatPadding="false"
app:fabSize="normal"/>
使用很简单,这样即可
效果图如下:
2.各个属性的解释
backgroundTint - 设置FAB的背景颜色。
rippleColor - 设置FAB点击时的背景颜色\n
borderWidth - 内边距 可以自己实现看下效果
elevation 默认状态下阴影大小
fabSize 设置大小,该属性有两个值,分别为normal和mini,对应的大小分别为56dp和40dp
pressedTranslationZ 按钮按下去的状态下的阴影大小
app:useCompatPadding 设置为true时 那么在5.0设备上点击后会显示正方形填充效果
这样设置后,就可以在屏幕上创建出一个FloatingActionButton了。
3.CoordinatorLayout与FloatingActionButton
CoordinatorLayout与FloatingActionButton可以一起使用,实例中就是这样使用的,如下:
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinator"
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:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/colorAccent"
android:padding="15dp"
android:textSize="24sp"/>
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/content"
app:layout_anchorGravity="right|bottom"
app:backgroundTint="@color/colorPrimary"
android:layout_margin="15dp"
android:src="@drawable/ic_index_dashboard"
app:borderWidth="0dp"
app:rippleColor="@color/colorPrimaryDark"
app:elevation="8dp"
app:pressedTranslationZ="15dp"
app:useCompatPadding="false"
app:fabSize="normal"/>
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout 当做父布局,里边用到这两个属性
app:layout_anchor="@id/content"
app:layout_anchorGravity="right|bottom"
app:layout_anchor - 设置FloatingActionButton的锚点,即以哪个控件为参照点设置位置。
app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。
设置后fab会一直在content(TextView)控件的右下方,并且当content 内容超出屏幕后 fab会停留在屏幕的右下方,不会移除屏幕。代码里设置fab点击事件时如下:
override fun onClick(v: View?) {
when(v!!.id){
fab.id->{
Snackbar.make(fab,"我是FloatingActionButtonActivity!",Snackbar.LENGTH_LONG).show()
}}}
当使用普通布局当做fab父布局时,fab在右下方,弹出snackbar 就会遮挡fab。CoordinatorLayout 当做父布局可以很好的解决这个问题。
ok,这样就简单使用FloatingActionButton了。