Floating Action Button
Floating action button (FAB)是一个带有阴影的简单圆形按钮，它上浮于其他 UI 之中，它通常用来驱动一些动作，例如添加一个 item、新建一封 email 等等。
查看 Floating action button (FAB) 的代码，我们发现 FAB 可以有两个大小：i），正常（56dp）或者 ii）小型（40dp）
1 2 3 4 5 6 7 8 9 | final int getSizeDimension() { switch(this.mSize) { case 0: default: return this.getResources().getDimensionPixelSize(dimen.fab_size_normal); case 1: return this.getResources().getDimensionPixelSize(dimen.fab_size_mini);
}
} |
备注：
FloatingActionButton 只是一个继承了 ImageView 的 view。
独立添加 Android design support library
首先，添加以下代码到 gradle 文件：
1 | compile 'com.android.support:design:22.2.0' |
Step1：
把 FloatingActionButton 引入 xml 布局文件:
1 2 3 4 5 6 7 8 9 10 11 12 | <FrameLayout android:id="@+id/layoutInner" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.FloatingActionButton android:id="@+id/btnFloatingAction" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" /> </FrameLayout> |
Attributes：
开发者手册只描述了 fabSize 这个属性，已经有人提了issue#178117，里面有其他属性的详细解释。以下是那些属性：
默认 Floating action button 的背景色是应用主题的 ascent color，但可以通过app:backgroundTint 属性或者setBackgroundTintList (ColorStateList tint)方法去改变背景颜色。
上面提到 Floating action button 的大小尺寸，可以用过app:fabSize 属性设置（normal or mini）
android:src 属性改变 drawable
app:rippleColor设置点击 button 时候的颜色
app:borderWidth设置 button 的边框宽度
app:elevation设置普通状态阴影的深度（默认是 6dp）
app:pressedTranslationZ设置点击状态的阴影深度（默认是 12dp）
Step2：
使用部分属性的例子：
1 2 3 4 5 6 7 8 | <android.support.design.widget.FloatingActionButton android:id="@+id/btnFloatingAction" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|right" android:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/ic_plus" app:fabSize="normal" app:rippleColor="@android:color/background_dark"/> |
Step3：
我们可以像普通控件那样去注册它的监听事件：
1 2 3 4 5 6 7 8 | FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction);btnFab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show();
}
}); |
这样，我们就完成了一个 FloatingActionButton 的 demo 了！
问题：
在写这篇博文的同时，发现了 FAB 的一些 bugs。我们来看看上面这个 demo 运行在Kitkat 和Lollipop 时候的效果：
FloatingActionButton Lollipop
FloatingActionButton Kitkat
Issue 1: Margin issue in Android 4.4 and 5.0
很明显地可以看出，在 Lollipop 使用 FAB 的时候 margin 出现问题，我们可以这样来解决这个问题，在 API 21+ 定义 bottom 和 right margin 为 16dp，21 之前的都定义为 0dp
values/dimens.xml
1 2 | <dimen name="fab_margin_right">0dp</dimen><dimen name="fab_margin_bottom">0dp</dimen> |
values-v21/dimens.xml
1 2 | <dimen name="fab_margin_right">16dp</dimen><dimen name="fab_margin_bottom">16dp</dimen> |
在设置 FAB 属性的时候：
1 2 3 4 5 | <android.support.design.widget.FloatingActionButton ... ... android:layout_marginBottom="@dimen/fab_margin_bottom" android:layout_marginRight="@dimen/fab_margin_right"/> |
Issue 2: 在 Android 5.0 中还存在阴影问题
你应该也在上面的图中发现到这个问题了，我们可以通过设置边框宽度给它来解决这个问题：
1 2 3 4 5 6 7 | <android.support.design.widget.FloatingActionButton ... ... app:fabSize="normal" app:borderWidth="0dp" android:layout_marginBottom="@dimen/fab_margin_bottom" android:layout_marginRight="@dimen/fab_margin_right"/> |
Issue_ID:_#176116">Issue 3 RotateAnimation 在 FAB 中不能使用 Issue ID: #176116
共同学习，写下你的评论
评论加载中...
作者其他优质文章
