现在的位置: 首页 > 编程技术 > 安卓开发 > 正文

Part 1 – Floating Action Button(翻译)

2015年11月20日 安卓开发 ⁄ 共 3170字 ⁄ 字号 Part 1 – Floating Action Button(翻译)已关闭评论 ⁄ 阅读 414 次

在 Android weekly 上看到篇挺不错的文章,在拜读学习后,趁着有点时间翻译一下,提高下英语水平,因为翻译的时候会比较认真斟酌原文的真正意思,从而达到更深入学习的效果。


原文地址:http://www.technotalkative.com/part-1-floating-action-button/


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:src="@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 时候的效果:
Part 1 – Floating Action Button(翻译)

FloatingActionButton Lollipop

Part 1 – Floating Action Button(翻译)

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

代码下载

demo 代码下载:
https://github.com/PareshMayani/DesignSupportLibraryExamples

抱歉!评论已关闭.