logo标签列表

如何在Android中使用AppCompat v21创建浮动操作按钮（FAB）？

androidxml
79

我想创建一个浮动按钮（用于向列表视图中添加项目），就像谷歌日历一样，同时保持与Android 5.0之前的旧版系统兼容。

我已经创建了以下布局：

活动 main_activity.xml：

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

Drawable fab.xml：

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

样式 styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>
结果相似，但缺少材料设计中的阴影特色：
日历浮动操作按钮： Calendar's floating action button 我的应用程序浮动操作按钮： My app's floating action button 如何给我的按钮添加阴影？
我已经使用了 elevation 属性，但没有效果。
1
高程API仅适用于棒棒糖系统，您尝试在棒棒糖设备上吗？ - Marc Plano-Lesay
2
也许现在是时候接受其中一个给出的答案了。 - Phantômaxx
事实上，在我的4.4.2三星Galaxy S III上，由于AppCompat的存在，阴影是存在的。 - FractalBob
7个回答
101

现在不再需要创建自己的 FAB 或使用第三方库，因为它已经包含在 AppCompat 22 中。

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

只需在 gradle 文件中添加名为 design 的新支持库：

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

...然后你就可以开始了:

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />
1
你如何改变背景颜色？ - Jjang
3
默认情况下，背景颜色将是您主题中的“colorAccent”。但是，您也可以使用floatingActionButton.setRippleColor(color)。不要让“ripple”这个名字吓到您，它也适用于早期版本的设备。 - user1354603
我猜你可以在LinearLayout中放置一堆迷你FAB。只需确保FAB的大小与Material Design模式相匹配：https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button - user1354603
我很抱歉目前没有例子。不过，我认为你应该能够通过使用CoordinatorLayout和Behaviors创建一些很酷的动画效果，所以请留意涉及这些内容的示例。 - user1354603
1
@Jjang @user1354603 来自文档的内容：此视图的背景颜色默认为您主题的colorAccent。如果您希望在运行时更改此设置，则可以通过setBackgroundTintList(ColorStateList)进行更改。 - Muhammad Babar
显示剩余9条评论
43

一般我会使用XML drawable来在早于Android 5.0的设备上为控件创建阴影/高度。以下是一个XML drawable示例，可用于模拟浮动操作按钮的高度。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

你可以选择任何颜色来替换?attr/colorPrimary。以下是结果的屏幕截图：

enter image description here

1
谢谢你分享这个。我一直很担心要再次挖掘XML代码来重新创建它。 - Cookster
另外，我添加了一个增强功能，您可以非常容易地添加涟漪效果，以下是代码。 - Amilcar Andrade
2
将来参考， 这是一个避免阴影和高程的好例子-->http://www.curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/comment-page-1/ - Amilcar Andrade
我注意到阴影问题只发生在Lolipop上，你能提供一些关于这个问题的例子吗？ - Eric
@Eric，我不太确定你在问什么。你能详细说明一下吗？ - Justin Pollard
显示剩余5条评论
20
8
5
请阅读：http://meta.stackexchange.com/questions/57497/limits-for-self-promotion-in-answers该链接讨论了在回答中进行自我推广的限制。 - nkjt
4

@Justin Pollard，XML代码运行得非常好。顺便说一句，您可以使用以下 XML 代码添加涟漪效果。

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>
2

尝试使用这个库，它支持阴影，最低版本为7，并且隐式地支持API-21的android:elevation属性。

原始帖子在这里。

0

添加填充和高度：

 android:elevation="10dp"
 android:padding="10dp"
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接