如何在两个小部件/布局之间添加新的“浮动操作按钮”

287

我想您已经看过新的Android设计指南，其中包括新的“浮动操作按钮”（又名“ FAB”）

例如，此粉红色按钮：

在此处输入图片说明

我的问题听起来很愚蠢，我已经尝试了很多方法，但是将这个按钮放置在两个布局的交集上的最佳方法是什么？

在上面的示例中，此按钮完美地放置在我们可以想象的ImageView和relativeLayout之间。

我已经尝试了很多调整，但是我相信有正确的方法可以做到。

android  android-coordinatorlayout  floating-action-button 
— Waza_Be
source
您可以将布局放置在布局内，然后将按钮放置在该布局上
— Chrome Penguin Studios
1
我认为该库可以提供很多帮助：github.com/ksoichiro/Android-ObservableScrollView
— android开发人员
滚动时如何隐藏？我面临的一个问题是，如果我滚动页面，则fab仍位于顶部并且没有隐藏！请帮助
— Anish Kumar

Answers:

473

最佳实践：

  • 添加compile 'com.android.support:design:25.0.1'到gradle文件
  • 使用CoordinatorLayout作为根视图。
  • 添加layout_anchor到FAB并将其设置为顶视图
  • 添加layout_anchorGravity到FAB并将其设置为：bottom|right|end

在此处输入图片说明

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.4"
            android:background="@android:color/holo_orange_light"
            android:orientation="horizontal"/>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>
— 大卫
source
3
@Aprendiz我也想引用，但我可以理解为什么这比HughJeffner的答案更好。我发现它更简单，更灵活，更简陋。您无需对任何layout_height或margin值进行硬编码，这些值可能会随时间变化或动态定义。休的答案可以在一些简单的情况下工作，也许可能是一些不完全支持第三方库解决方法CoordinatorLayout和layout_anchor和layout_anchorGravity功能，如一个他的使用，futuresimples。
— acrespo，2015年
1
顺便说一句，futuresimples是一个AWESOME库，如果有人想知道是否有一个将这种CoordinatorLayout方法与该库结合起来的fork ，请看一下。还有一个旧版本的fork。
— acrespo，2015年
2
我一直在寻找这个。为简单起见，+ 1。
— Emiliano De Santis 2015年
29
为什么Android的文档中没有这些内容？
— Mostafa 2015年
3
使用app：layout_anchor导致我出现渲染问题（无法将linearlayoutlayout layoutparams强制转换为coordinatorlayout。:(
— DAVIDBALAS1，2016年
91

在此示例中，最干净的方法似乎是：

  • 使用RelativeLayout
  • 将2个相邻的视图放置在另一个视图的下方
  • 将FAB与父右侧/末端对齐，并添加右侧/末端页边距
  • 将FAB与标题视图的底部对齐，并添加负边距，为FAB大小（包括阴影）的一半

改编自萨满实施的示例，可使用任何所需的FAB。假设FAB高64dp，包括阴影：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

FAB布局示例

— 休·杰夫纳（Hugh Jeffner）
source
这种布局对我有用！我使用FAB的futuresimple -这是很简单的添加和使用，享受！
— 罗马，
就像您说的“将两个相邻的视图放在另一个视图的下面”->这是我遇到的问题，我只是忽略了不匹配的括号而弄乱了我的“容器布局”：D谢谢：P
— Martin Pfeffer
这不是一个好的解决方案。负边距似乎消除了按钮的触摸目标的下半部分。如果我按下晶圆厂的下半部分，则点击不会被记录。
— Doronz
1
@Doronz Hmm，我似乎没有这个问题。您的视图顺序是否正确，即FAB是顶层？
— 休·杰夫纳
23
带有按钮的wrap_content的android：layout_marginBottom =“-32dp”硬编码值是不好的解决方案
— Lester，
51

您可以通过单击文件>导入示例...，在Android Studio中导入Google的示例项目。

进口样品

此示例包含一个从FrameLayout继承的FloatingActionButton视图。

编辑 使用新的支持设计库，您可以像以下示例中一样实现它：https : //github.com/chrisbanes/cheesesquare

— 罗尔
source
1
您应该有运行它的android-21。
— Yuliia Ashomok，2015年
如果要使用FloatingActionButton，则应使用支持设计库。参见Google的cheesesquare。
— Roel 2015年
16

使用AppCompat 22，旧设备支持FAB。

在您的build.gradle（app）中添加新的支持库：

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

然后，您可以在xml中使用它：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

要使用elevation和pressedTranslationZ属性，app需要名称空间，因此请将此名称空间添加到布局中： xmlns:app="http://schemas.android.com/apk/res-auto"

— 奥德·布雷纳
source
3
添加有关app名称空间的信息
— Lukasz'Severiaan'Grela 2015年
14

现在它是官方设计支持库的一部分。

在你的gradle中：

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

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

— 维龙妮
source
5
您的答案有点不清楚和含糊，您能否进一步解释一下DSL的组成部分，并可能引用该页面中的相关信息。
— SuperBiasedMan 2015年
抱歉，我已经看到很多对外部库的引用，所以我想指出一下官方库。该库只能创建一个按钮，但是位置在开发人员上。所以我的帖子不是很相关，对不起。
— Veronnie
12

试试这个库（javadoc在这里），最低API级别是7：

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

它提供了单个小部件，并可以通过主题，xml或java代码对其进行自定义。

光 之间

使用非常简单。有提供normal和mini实施，根据促进操作模式。

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

尝试编译演示应用程序。有详尽的例子：光明与黑暗的主题，使用ListView，两个视图之间对齐。

— Oleksii K.
source
3
只需添加到此答案即可^您还可以使用其他可用的反向端口库，例如：github.com/FaizMalkani/FloatingActionButton和github.com/makovkastar/FloatingActionButton。两者似乎都有更多的支持。但是，只需按照此答案中列出的来源执行“详细信息”视图即可。效果很好。
— 约翰·谢利2014年
是官方图书馆吗？
— Cocorico 2014年
没有官方图书馆。这是我的开源库。
— Oleksii K. 2014年
这个浮动动作按钮是一个不好的例子，如何实现它。它没有遵循真正的材料设计准则。
— 迈克尔
@Mike Milla，这个库怎么了？哪些要求不满足？
— Oleksii K. 2015年
6

通过提供四舍五入的xml背景，使使用TextView的Floating Action Button保持简单。-将编译添加com.android.support:design:23.1.1到gradle文件

  • 使用CoordinatorLayout作为根视图。
  • 在结束CoordinatorLayout之前，先介绍一个textView。
  • 在Drawable内部绘制一个圆圈。

圈子Xml是

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

    <solid
        android:color="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

布局xml是

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="5"
    >

    <RelativeLayout
        android:id="@+id/viewA"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1.6"
        android:background="@drawable/contact_bg"
        android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:padding="16dp"
        android:weightSum="10"
        >

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Name"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/name"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Ritesh Kumar Singh"
                android:singleLine="true"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Phone"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/number"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="8283001122"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Email"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="ritesh.singh@betasoftsystems.com"
                android:textSize="22dp"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="City"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Panchkula"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        android:id="@+id/floating"
        android:transitionName="@string/transition_name_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        android:clickable="false"
        android:background="@drawable/circle"
        android:elevation="10dp"
        android:text="R"
        android:textSize="40dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

        </android.support.design.widget.CoordinatorLayout>

单击此处以查看其外观

— 里特什
source
5

将此添加到您的gradle文件

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

这到你的activity_main.xml

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </android.support.design.widget.CoordinatorLayout>

您可以在http://www.ahotbrew.com/android-floating-action-button/下载完整的android studio项目示例

— 古林德·辛格
source
1

这是工作代码。

我使用appBarLayout锚定我的floatActionButton。希望这会有所帮助。

XML代码。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                android:id="@+id/toolbarItemDetailsView"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                android:orientation="vertical"
                android:focusableInTouchMode="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    android:visibility="gone"
                    android:layout_marginTop="56dp"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/third" />


                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <android.support.v7.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="8dp"
                                android:padding="3dp">


                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:orientation="vertical">


                                    <TextView
                                        android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:text="Title" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:layout_marginTop="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Shope Name" />

                                        <TextView
                                            android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:gravity="right"
                                            android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        android:layout_width="match_parent"
                                        android:minLines="5"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:layout_marginTop="16dp"
                                        android:text="description" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginBottom="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Qunatity" />

                                        <TextView
                                            android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:layout_weight="1"
                                            android:gravity="right"
                                            android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginRight="4dp"
                                        android:layout_weight="1"
                                        android:gravity="right"
                                        android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="@dimen/_6sdp"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_height="wrap_content" />

</android.support.design.widget.CoordinatorLayout>

现在，如果您粘贴上面的代码。您将在设备上看到以下结果。 结果图像

— Rk215科技
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.