android fab_Android推荐的操作：浮动操作按钮（FAB）

android fab

最近，Android中引入了新的设计模式。 最著名的模式之一是“ 促进行动” 。 它们是在UI中直接可见的操作，而不是使用操作栏按钮； 因此，这些操作称为提升操作，可以轻松访问它们并在当前UI中定义主要操作。 例如，如果我们使用的是电子邮件应用程序，并且列出了收件箱文件夹，则推荐的操作可以是一封新邮件。 可视模式称为浮动动作按钮（或FAB），因为可以使用UI上的浮动圆形按钮来表示提升的动作。

这种类型的设计模式可在Android L中使用，但我们也可以在以前的Android版本中创建一个浮动按钮。 让我们假设我们的UI中有一个元素列表，升级后的动作可以是“添加新项”，因此我们可以看到如下图所示的图片：

我们可以使用多种方法来创建浮动操作按钮。

使用ImageButton的浮动操作按钮

创建FAB的第一种方法是使用ImageButton ，我们只需将ImageButton添加到我们的UI布局中，并利用Android L提供的一些新功能。

<ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:src="@drawable/plus"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:tint="@android:color/white"
android:id="@+id/fab"
android:elevation="1dp"
android:background="@drawable/ripple"
android:stateListAnimator="@anim/fab_anim"
/>

如果我们在上方看，我们会注意到它是通常放置在右下角的普通ImageButton。 我们应该考虑一些方面：

• 背景
• 阴影
• 动画

为了使我们的按钮更具“吸引力”，我们可以实现一些效果作为背景。 如果我们注意到我们使用以这种方式定义的涟漪可绘制对象 ：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

我们说这是一个浮动按钮，因此它意味着它应该浮动在UI数据上方，就像在另一个平面级别一样。 可以使用在Z轴上“移动” UI组件的height属性获得此效果。 最后是按下按钮时的动画效果。 我们想让用户感觉到按钮在按下时正在下沉，因此我们必须扩大其周围的阴影：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/start_z"
            android:valueTo="@dimen/end_z"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/end_z"
            android:valueTo="@dimen/start_z"
            android:valueType="floatType" />
    </item>
</selector>

使用自定义组件的浮动操作按钮

创建浮动按钮的另一种方法是使用自定义组件。 在这种情况下，我们不使用Android L功能，而是手动对其进行编码。

首先，我们创建代表自定义组件的类：

public class CustomFAB extends ImageButton {
...
}

下一步是读取一些会影响UI行为的自定义属性，我们可以在称为init的方法中进行操作：

private void init(AttributeSet attrSet) {
    Resources.Theme theme = ctx.getTheme();
    TypedArray arr = theme.obtainStyledAttributes(attrSet, R.styleable.FAB, 0, 0);
    try {
        setBgColor(arr.getColor(R.styleable.FAB_bg_color, Color.BLUE));
        setBgColorPressed(arr.getColor(R.styleable.FAB_bg_color_pressed, Color.GRAY));
        StateListDrawable sld = new StateListDrawable();

        sld.addState(new int[] {android.R.attr.state_pressed}, createButton(bgColorPressed));
        sld.addState(new int[] {}, createButton(bgColor));
        setBackground(sld);
    }

    catch(Throwable t) {}
    finally {
         arr.recycle();
    }

}

同时，我们在XML文件中定义以下属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FAB">
        <!-- Background color -->
        <attr name="bg_color" format="color|reference"/>
        <attr name="bg_color_pressed" format="color|reference"/>
    </declare-styleable>
</resources>

如果您注意到我们有一些控制背景颜色的属性。 在第8行，我们使用StateListDrawable定义了几个按钮状态，并为每个状态创建按钮：

private Drawable createButton(int color) {
    OvalShape oShape = new OvalShape();
    ShapeDrawable sd = new ShapeDrawable(oShape);
    setWillNotDraw(false);
    sd.getPaint().setColor(color);

    OvalShape oShape1 = new OvalShape();
    ShapeDrawable sd1 = new ShapeDrawable(oShape);

    sd1.setShaderFactory(new ShapeDrawable.ShaderFactory() {
        @Override
        public Shader resize(int width, int height) {
            LinearGradient lg = new LinearGradient(0,0,0, height,
                    new int[] {
                            Color.WHITE,
                            Color.GRAY,
                            Color.DKGRAY,
                            Color.BLACK
                    }, null, Shader.TileMode.REPEAT);

            return lg;
        }
    });

    LayerDrawable ld = new LayerDrawable(new Drawable[] { sd1, sd });
    ld.setLayerInset(0, 5, 5, 0, 0);
    ld.setLayerInset(1, 0, 0, 5, 5);

    return ld;
}

最后，我们可以将此组件添加到布局中：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.survivingwithandroid.fab"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MyActivity">
...

    <com.survivingwithandroid.fab.CustomFAB
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:src="@android:drawable/ic_input_add"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"
        custom:bg_color="@color/light_blue"
        android:tint="@android:color/white"
     />
     
</RelativeLayout>

• 源代码可用@ github

翻译自: https://www.javacodegeeks.com/2014/09/android-promoted-actions-floating-action-button-fab.html

android fab