「译文」 design support library第一部分 – 浮动操作按钮

泡在网上的日子 / 文 发表于2015-07-13 19:21 第次阅读 FAB

原文:http://davinci42.github.io/AndroidDesignSupportLibrary-1-FAB/ 

本文翻译自 Part 1 – Floating action button

作者 Paresh Mayani


Floating action button (FAB) 是一个带有环状阴影的圆形按键,位于 UI 之上,用于显示常用的操作,比如添加新条目、编写邮件等。

Android Reference 文档中关于 FloatingActionButton 的部分指出,floating button 有两种大小可选:1、普通(56dp);2、迷你(40dp)。

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 文件中添加如下一行以添加 Android support library:

compile 'com.android.support:design:22.2.0'

Step 1

在 xml 布局文件中添加 FloatingActionButton。此处假设以下

xmlns:app="http://schemas.android.com/apk/res-auto"

已经在布局文件的开头声明过。

<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>

属性介绍

开发者文档中关于 FAB 的部分只包含 FAB 大小属性介绍,以下是其它一些可用属性:

  • FAB 默认使用应用主题中设置的浮起色作为按键背景。你可以使用 app:backgroundTint 属性,或者调用 setBackgroundTintList (ColorStateList tint) 方法改变 FAB 背景色;

  • 如上文中提到的,可以使用 app:fabSize 属性选择普通大小或者迷你大小;

  • 使用 android:src 改变 FAB 对应的 drawable;

  • 使用 app:rippleColor 设置 FAB 按下时的波纹效果;

  • 使用 app:borderWidth 设置 FAB 边框宽度;

  • 使用 app:elevation 设置闲置状态下 FAB 的景深(默认是 6dp);

  • 使用 app:pressedTranslationZ 设置 FAB 按下时的景深(默认是 12dp)。

Step 2

添加以下代码,用以显示带有图片和大小属性的 FAB。

<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"/>

Step 3

采用与 ImageView 或 Button 相同的方法,为 FAB 添加点击事件。

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();
    }
});

以上!

Issues:

本文编写时,FAB 支持库仍然存在一些 bug,在 Kitkat 和 Lollipop 中分别运行示例代码,可以看到如下结果:

Lollipop 中的 FAB:

Kitkat 中的 FAB:

Issues 1: Android 4.4 和 5.0 中边缘显示

很容易看出,Lollipop 中存在边缘显示的问题。为了解决此问题,API21+ 的版本统一定义底部与右边缘空白为 16dp,Lollipop 以下版本统一设置为 0dp.

values/dimens.xml

<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>

values-v21/dimens.xml

<dimen name="fab_margin_right">16dp</dimen>
<dimen name="fab_margin_bottom">16dp</dimen>

布局文件的 FAB 中,也设置相应的值。

<android.support.design.widget.FloatingActionButton
    ...
    ...
    android:layout_marginBottom="@dimen/fab_margin_bottom"
    android:layout_marginRight="@dimen/fab_margin_right"/>

Issues 2: Android 5.0 中阴影显示 
再看一遍上面的截图,会发现 Kitkat 中有阴影显示,而 Lollipop 中并没有。在 Lollipop 上,可以直接在 FAB 中设置:

<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"/>

Issues 3: FAB 中没有旋转动画

Issue3 ID: #176116

Github 源代码下载


收藏 赞 (1) 踩 (0)
上一篇:Android ViewDragHelper完全解析 自定义ViewGroup神器
一、概述 在自定义ViewGroup中,很多效果都包含用户手指去拖动其内部的某个View(eg:侧滑菜单等),针对具体的需要去写好onInterceptTouchEvent和onTouchEvent这两个方法是一件很不容易的事,需要自己去处理:多手指的处理、加速度检测等等。 好在官方在v4的支
下一篇:design support library第二部分:放弃Toast吧,用Snackbar
Snackbar,可以在屏幕底部快速的显示一条消息,大体与 Toast 相同,但多了几分灵活性