Android L - 浮动操作按钮(FAB)

时间:2014-06-27 11:45:01

标签: java android android-5.0-lollipop material-design android-design-library

Google是否已经为此新的循环FAB按钮发布了已定义的样式或组件,还是应该自行实现该设计?

此处描述了按钮:Google Design | Floating Action Buttons

编辑(05/2015):检查Lukas' answer / Gabriele's answer,了解使用设计支持库实现它的简便方法。

4 个答案:

答案 0 :(得分:57)

更新时间:2015年5月30日,官方设计支持库

现在有一个官方小部件。

只需将此依赖项添加到build.gradle

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

将此视图添加到您的布局:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    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
            }
        });

文档:

更新时间:2014年12月2日,Android 5代码

您还可以在按钮中添加 stateListAnimator

<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提到的大纲。 将提升属性添加到Button,并通过代码设置提纲

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

}

enter image description here

答案 1 :(得分:23)

更新:现在有一个FAB官方小部件:FloatingActionButton,请参阅Gabriele Mariotti回复以获取完整信息。

根据Adam Powell和Chet Haase的说法,他们没有为FAB按钮创建一个小部件,因为它是一个非常容易重现的组件。

Google IO 2014演讲中有一个问题“Google I / O 2014 - 材料科学:开发具有材料设计的Android应用程序”,在演讲结束时(大约37:50)确实存在这个问题,你可以在这里听到: https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Chet Haase说有一个RoundedBitmapDrawable(我没有检查这是否是名字)应该已经完成​​了定义Outline的工作。

但是你可以使用自己的drawable,设置Elevation并以编程方式定义圆形轮廓。

这应该会给你带有L版本阴影的圆形按钮。 但我认为你必须自己制作暗影前L。

我应该检查CardView的代码,看看它如何重现阴影pre-L。我可能会这样做,但现在没有时间。如果没有人知道详细信息,我会在找到时间进行检查后再进行检查。

编辑:

Gabriele Mariotti(请参阅下面的答案,谢谢)添加了一些代码,告诉您如何操作。

感谢@shomeser评论,他写了一个库来制作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

答案 2 :(得分:20)

Google现在提供了一个名为设计库的官方库包含Fab按钮。只需添加以下Gradle依赖项:

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

之后你可以像这样使用fab按钮:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

更多信息可在其公告中找到

http://android-developers.blogspot.ch/2015/05/android-design-support-library.html

或在javadoc页面上

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

答案 3 :(得分:7)

由于标签FAB功能(如在Evernote或Inbox应用程序中)添加到这个真棒library随意使用它:

Gradle依赖:

    compile 'com.getbase:floatingactionbutton:1.3.0'

Layout.xml:

     <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            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>

享受!