Android L - 浮动操作按钮 (FAB)
Posted
技术标签:
【中文标题】Android L - 浮动操作按钮 (FAB)【英文标题】：Android L - Floating Action Button (FAB) 【发布时间】：2014-08-18 12:24:00 【问题描述】：Google 是否已经为这个新的圆形 FAB 按钮发布了定义的样式或组件，还是我应该自己实现设计？
这里描述了按钮：Google Design | Floating Action Buttons
编辑 (05/2015)：检查 Lukas' answer / Gabriele's answer 显示使用设计支持库实现它的简单方法。
【问题讨论】：
如何在这个按钮上添加材质选择效果？ @Sandra 当背景属性设置为“波纹”类型的可绘制对象时，将自动添加此效果。 啊哈，我不知道，谢谢。我应该在哪里创建ripple.xml，我想drawables...... 好的，我让它工作了，谢谢你指点我:) 没有setOutline()这样的方法... 【参考方案1】：更新日期：26/08/2021
将Material components for android 添加到您的build.gradle：
implementation 'com.google.android.material:material:1.x.x'
然后添加你的布局：
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_
android:layout_
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
app:srcCompat="@drawable/ic_plus_24"/>
并使用它：
FloatingActionButton floatingActionButton =
(FloatingActionButton) findViewById(R.id.floating_action_button);
floatingActionButton.setOnClickListener(new OnClickListener()
@Override
public void onClick(View view)
// Handle the click.
);
如果您使用Theme.MaterialComponents.* 主题，您的FAB 将继承材质样式。否则只需应用样式@style/Widget.MaterialComponents.FloatingActionButton
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="@style/Widget.MaterialComponents.FloatingActionButton"
../>
更多info here.
使用 Jetpack 撰写 1.0.x 使用：
//Simple FAB
FloatingActionButton(onClick = /* .. */ )
Icon(Icons.Filled.Add,"contentDescription")
//FAB custom color
FloatingActionButton(
onClick = /* .. */ ,
backgroundColor = Color.Blue,
contentColor = Color.White
)
Icon(Icons.Filled.Add,"contentDescription")
更新日期：2015 年 5 月 30 日，官方设计支持库
现在有一个官方小部件。
只需将此依赖项添加到您的build.gradle
compile 'com.android.support:design:22.2.0'
将此视图添加到您的布局中：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_
android:layout_gravity="end|bottom"
android:src="@drawable/ic_done" />
并使用它：
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View view)
//TODO
);
文档Android documentation。
更新日期：2014 年 2 月 12 日，使用 Android 5 代码
您还可以将 stateListAnimator 添加到您的 Button：
<Button
android:stateListAnimator="@anim/anim"
/>
anim.xml 在哪里：
<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/button_elevation"
android:valueTo="@dimen/button_press_elevation"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="@dimen/button_press_elevation"
android:valueTo="@dimen/button_elevation"
android:valueType="floatType" />
</item>
</selector>
Dimens.xml 是
<resources>
<dimen name="fab_size">56dp</dimen>
<dimen name="button_elevation">2dp</dimen>
<dimen name="button_press_elevation">4dp</dimen>
</resources>
查看 Daniele 的答案。
关于 Daniele 提到的大纲。 将 elevation 属性添加到您的 Button，并通过代码设置 Outline：
<ImageButton
android:background="@drawable/ripple"
android:stateListAnimator="@anim/anim"
android:src="@drawable/ic_action_add"
android:elevation="4dp"
/>
关于大纲：
public class MainActivity extends Activity
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline: OLD METHOD IN L-PREVIEW
//int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
//Outline outline = new Outline();
//outline.setOval(0, 0, size, size);
//findViewById(R.id.fab).setOutline(outline);
Button fab = (Button) findViewById(R.id.fab);
ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider()
@Override
public void getOutline(View view, Outline outline)
// Or read size directly from the view's width/height
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
outline.setOval(0, 0, size, size);
;
fab.setOutlineProvider(viewOutlineProvider);
【讨论】：
谢谢！与此同时，我在 android l 上越来越好。但是我有一个问题，这个“stateListAnimator”是做什么的？我实现了但实际上没有任何变化，是为了自定义“涟漪”效果吗？ @theyanu stateListAnimator 提供基于按钮状态的 Z 动画。 仅供参考，如果您使用stateListAnimator 来调整 z 平移（如在此答案中），则无需指定 elevation。在这种情况下添加elevation 会使动画变得不那么明显，因为无论按钮处于何种状态（至少在 Android-L 的预览版中），所创建的阴影始终可见。
@GabrieleMariotti 似乎没有名为 setOutline 的方法
@DineshAnandan 这个方法在 android Preview 中使用过。现在代码不同了。我已经用新代码更新了答案。【参考方案2】：
更新：现在有一个用于 FAB 的官方小部件：FloatingActionButton，有关完整信息，请参阅 Gabriele Mariotti 回复。
根据 Adam Powell 和 Chet Haase 的说法，他们没有为 FAB 按钮创建小部件，因为它是一个非常容易复制的组件。
在 Google IO 2014 演讲“Google I/O 2014 - Material science: Developing Android applications with material design”中有一个问题，在演讲的最后（大约 37:50）有一个问题，你可以在这里听到： https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280
Chet Haase 说有一个 RoundedBitmapDrawable（我没有检查是否是这个名字）应该已经完成了定义大纲的工作。
但您可以使用自己的可绘制对象来完成，为其设置一个高度并以编程方式定义一个圆形轮廓。
这应该会在 L 释放时为您提供带有阴影的圆形按钮。 但我认为你必须自己构建 Shadow pre-L。
我应该检查 CardView 的代码，看看它如何重现阴影 pre-L。我可能会这样做，但现在没有时间。如果没有人弹出详细信息，我会在找到时间去检查之后再做。
编辑：
Gabriele Mariotti（请参阅下面的答案，谢谢）添加了一些代码来向您展示如何做到这一点。
感谢@shomeser cmets，他写了一个库来制作fab按钮：
https://github.com/shamanland/floating-action-button
使用它：
dependencies
compile 'com.shamanland:fab:0.0.3'
您也可以阅读他对另一个问题的回答：How can I add the new "Floating Action Button" between two widgets/layouts
【讨论】：
虽然这个小部件很简单，但我用这个小部件发布了库：com.shamanland:fab:0.0.3，查看我的帖子：***.com/a/25098626/1891118【参考方案3】：
Google 现在提供了一个官方库，称为设计库，包含 Fab 按钮。只需添加以下 Gradle 依赖项：
compile 'com.android.support:design:22.2.0'
之后，您可以像这样使用 fab 按钮：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_
android:layout_/>
更多信息可以在他们的公告中找到
http://android-developers.blogspot.ch/2015/05/android-design-support-library.html
或在 javadoc 页面上
http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
【讨论】：
【参考方案4】：由于标签 FAB 功能（如在 Evernote 或 Inbox 应用程序中）已添加到这个很棒的 library 中，请随意使用它：
Gradle 依赖：
compile 'com.getbase:floatingactionbutton:1.3.0'
布局.xml：
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions"
android:layout_
android:layout_
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_labelStyle="@style/menu_labels_style"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp">
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_
android:layout_
fab:fab_colorNormal="@color/white"
fab:fab_title="Action A"
fab:fab_colorPressed="@color/white_pressed"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_
android:layout_
fab:fab_colorNormal="@color/white"
fab:fab_title="Action B"
fab:fab_colorPressed="@color/white_pressed"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
menu_labels_style.xml：
<style name="menu_labels_style">
<item name="android:background">@drawable/fab_label_background</item>
<item name="android:textColor">@color/white</item>
</style>
fab_label_background.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/black_semi_transparent"/>
<padding
android:left="16dp"
android:top="4dp"
android:right="16dp"
android:bottom="4dp"/>
<corners
android:radius="2dp"/>
</shape>
享受吧！
【讨论】：
这太棒了 :) 感谢分享！ @Roman 我只使用这个库。但是，我无法通过您在此处建议的方法获得涟漪。请提供一些意见。以上是关于Android L - 浮动操作按钮 (FAB)的主要内容，如果未能解决你的问题，请参考以下文章
如何在 android 上更改浮动操作按钮 (FAB) 的形状？