浮动操作按钮的标签答案

【问题标题】：Floating action button's label浮动操作按钮的标签
【发布时间】：2017-09-22 10:42:55
【问题描述】：

是否可以在不使用任何第三方库的情况下显示浮动操作按钮的标签（如）？我正在为我的工厂使用 android 支持库，我想知道是否可以用它显示标签。

我的 FAB 代码如下所示：

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_visitdetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/right_arrow"/>

我没有使用任何菜单，只是一个 FAB。

【问题讨论】：

标签： android floating-action-button

【解决方案1】：

试试这样的

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_visitdetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/right_arrow"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Compose"
        android:elevation="16dp"
        android:textColor="@android:color/white"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>

【讨论】：

这只是一个示例，您可以重新排列代码添加删除代码或其他任何内容。
把你的完整版面放好，我可以帮忙

【解决方案2】：

您可以使用如下代码；

<RelativeLayout 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" >

<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#00fff0"
app:borderWidth="0dp"
android:elevation="0dp"
app:fabSize="normal" />

<TextView
android:layout_toRightOf="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="Compose"/>

</RelativeLayout>

【讨论】：

【解决方案3】：

试试这个

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:padding="@dimen/padding_4"
        android:text="Add"
        android:textColor="@android:color/black" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="@dimen/margin_16"
        android:layout_marginLeft="@dimen/margin_16"
        android:layout_marginRight="@dimen/margin_16"
        android:layout_marginTop="@dimen/margin_8"
        android:src="@android:drawable/ic_input_add" />

</LinearLayout>

【讨论】：

【解决方案4】：

您实际上想使用 FloatingActionMenu。

例子：

<android.support.design.widget.FloatingActionMenu
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_visitdetail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        app:fab_label="fab_visitdetail_label"
        android:src="@drawable/right_arrow"/>
</android.support.design.widget.FloatingActionMenu>

【讨论】：