最近,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