Android开发之FloatingActionButton的使用

来源:互联网 发布:皇后谥号 知乎 编辑:程序博客网 时间:2024/06/07 19:11

前言:FloatingActionButton又是V7包下的一个控件,还是MD的设计风格,今天我们就来讨论一下FAB的兼容性开发!看了好多介绍FAB的用法,发现hongyang大神的讲解不错,不过我感觉写的还是有点多,我会用最简单的最少的代码,来介绍FAB的使用,以及兼容性开发。

-----------------------------------分割线-------------------------------------

hongyang的讲解:《FloatingActionButton 完全解析[Design Support Library(2)]》  ,感兴趣的可以参考下。

-----------------------------------分割线-------------------------------------

1.兼容性注意,需要写两个layout/layout-v21

layout-v21:添加layout_margin="16dp"
layout: 添加layout_margin="0dp"

2.各个属性:

app:backgroundTint="?attr/colorPrimary"//背景着色

app:elevation="10dp"//阴影深度

app:fabSize="mini"//大小:normal,mini

app:elevation="10"//正常显示的阴影大小,5.x效果

app:pressedTranslationZ="12dp"//点击时显示的阴影大小,5.x效果

app:borderWidth="0dp"//添加阴影,5.x效果

app:rippleColor="#ff0"//按下时候显示的背景色,5.x效果

-----------------------------------分割线-------------------------------------

4.x效果显示:


代码:

    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_margin="0dp"        android:onClick="rotate"        android:src="@drawable/ic_add_white_24dp"        app:backgroundTint="?attr/colorPrimary"        app:elevation="10dp"        app:fabSize="mini" />

旋转效果代码:

private boolean reverse = false;    public void rotate(View view) {        float toDegree = reverse ? -180f : 180f;        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0.0f, toDegree).setDuration(400);        animator.start();        reverse = !reverse;    }
-----------------------------------分割线-------------------------------------

5.x效果显示:



代码:

<android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_margin="16dp"        android:clickable="true"        android:onClick="rotate"        android:src="@drawable/ic_add_white_24dp"        app:backgroundTint="?attr/colorPrimary"        app:elevation="10dp"        app:fabSize="normal"        app:pressedTranslationZ="12dp"        app:rippleColor="#ff0" />
旋转代码同4.x一样。

-----------------------------------分割线-------------------------------------


阅读全文
1 0
原创粉丝点击