Android的L - 浮动操作按钮（FAB） [英] Android L - Floating Action Button (FAB)

问题描述

难道谷歌已经发布了一个定义的样式或组件为这个新的循环FAB按钮或者我应该实现这个设计我自己？

Did Google already released a defined style or a component for this new circular FAB button or should I implement the design on my own?

该按钮被描述如下：<一href="http://www.google.com/design/spec/components/buttons.html#">http://www.google.com/design/spec/components/buttons.html#

修改（05/2015）：请查看卢卡斯的回答展示新设计库的实现来自谷歌。

EDIT (05/2015): Check out Lukas' answer showing the implementation in the new design library from Google.

在等待，我创建了它自己的：

While waiting, i created it for my own:

layout.xml

    <Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="+"
    android:textSize="40sp"
    android:background="@drawable/ripple"
    android:id="@+id/fabbutton"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:elevation="3dp"
    android:paddingBottom="16dp"
    android:fontFamily="sans-serif-light"
    android:layout_alignParentEnd="true"
    android:layout_gravity="right|bottom" />

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
 <ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/fab"></item>
</ripple>

fab.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@color/accentColor" />
</shape>

Activity.java

    import android.graphics.Outline;
    ...
    Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

这code将显示为Android的工作室v0.8.1的错误，从而为其他Android L个分量。这将在下一版本。

This code will be shown as error in android studio v0.8.1, so as other android l components. It will be fixed in the next version.

结果：

推荐答案

更新：现在有对FAB的官方小工具：FloatingActionButton，看到加布里埃尔马里奥蒂回复的全部信息

UPDATE: there's now an official widget for FAB: FloatingActionButton, see Gabriele Mariotti reply for full information.

据亚当·鲍威尔和切特·哈泽，他们没有创造一个小部件的FAB按钮，因为它是一个非常简单的组件复制。

According to Adam Powell and Chet Haase they didn't create a widget for the FAB button cause it's a very easy component to reproduce.

有没有在谷歌IO 2014年的演讲提问谷歌I / O 2014年 - 材料科学：开发Android应用程序与材料设计，在演讲结束（约37:50）还有正是这个问题，你可以听到它在这里： https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

There was a question in the Google IO 2014 speech "Google I/O 2014 - Material science: Developing Android applications with material design", at the end of the speech (at about 37:50) there was exactly that question, you can hear it here: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

切特·哈泽说，有一个RoundedBitmapDrawable（我没有检查，如果这是这个名字）应该已经在做定义纲要的工作。

Chet Haase says there's a RoundedBitmapDrawable (I didn't check if that's the name) that should already do the job of defining the Outline.

但是，你可以用自己绘制做到这一点，设置一个高程它和编程定义一个圆形轮廓。

But you can do it with your own drawable, set an Elevation to it and define an circle Outline programmatically.

这应该给你的影子对L-发布的圆形按钮。 但我认为你必须建立影子preL你自己了。

This should give you the round button with shadow on L release. But I think You'll have to build the Shadow pre-L on your own.

我应该检查$ C $下CardView来看看它是如何繁殖的影子preL。我可能会做，但没有时间了。如果没有人在持久性有机污染物的细节我会做到这一点后，我找到了时间去检查了。

I should check the code for CardView to see how it reproduce the shadow pre-L. I'll probably do that, but do not have time now. If no one pops in with the details I'll do it after I've found the time to go and check it up.

编辑：

加布里埃莱·马里奥蒂（见下面他的回答，谢谢）增加了一些code向您展示如何做到这一点。

Gabriele Mariotti (see his answer below, thank you) added some code to show you how to do it.

由于@shomeser的意见，他写了一个库，使晶圆厂按钮：

Thanks to @shomeser comments, he wrote a library to make the fab button:

https://github.com/shamanland/floating-action-button

要使用它：

dependencies {
    compile 'com.shamanland:fab:0.0.3'
}

您还可以阅读他的回答另一个问题：<一href="http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts/25098626#25098626">How我可以添加新的＆QUOT;浮动操作按钮＆QUOT; /布局的两个小部件之间的

You can also read his answer to another question: How can I add the new "Floating Action Button" between two widgets/layouts

这篇关于Android的L - 浮动操作按钮（FAB）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！