Question

我想创建一个旁边有textview的浮动操作按钮。我尝试了一切。这是我想要的截图

这是我试过的代码

  <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/floatingactionbuttonmargin"
        android:layout_marginTop="@dimen/floatingactionbuttonmargin"
        android:src="@mipmap/menu"
        app:backgroundTint="@android:color/holo_red_light" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:background="@drawable/roundedcorner"
        android:text="   MENU"
        android:textColor="@android:color/white"
        android:textSize="10sp"
        android:layout_marginTop="@dimen/floatingactionbuttonmargin"
        android:layout_marginLeft="50dp"
         />

我正在使用RelativeLayout。请帮忙

Answer 1

这是您的解决方案

试一下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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:orientation="horizontal"
        android:layout_height="wrap_content">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_add_my_album_listing"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            app:srcCompat="@drawable/ic_new_plus" />


        <TextView
            android:layout_toRightOf="@+id/fab_add_my_album_listing"
            android:layout_width="wrap_content"
            android:layout_marginLeft="-30dp"
            android:background="@drawable/btn_round"
            android:paddingTop="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp"
            android:text="Menu"
            android:paddingLeft="20dp"
            android:textStyle="bold"
            android:textColor="#FAFAFA"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content" />

    </LinearLayout>

</RelativeLayout>

<强> drawable.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle">
    <solid android:color="#FFFF3141" />
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />
</shape>

Answer 2

请你可以尝试这样..希望它会帮助你

  <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:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
     android:layout_marginRight="50dp"
        app:srcCompat="@android:drawable/ic_dialog_email"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="Menu"
        android:layout_margin="@dimen/fab_margin"/>
    </RelativeLayout>

Answer 3

试试这个

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

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

    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="35dp"
        android:background="@color/colorAccent"
        android:layout_toEndOf="@id/fab_button"
        android:text="Rathod Nilesh" />


</RelativeLayout>

Answer 4

使用CoordinatorLayout很容易实现。我使用线性布局来获得与截图相同的结果。

以下是完成任务的代码块：

<android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.Toolbar>

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        />
</android.support.design.widget.AppBarLayout>



<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin">


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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="-20dp"
        android:background="@drawable/red_button_background"
        android:paddingBottom="@dimen/margin_small"
        android:paddingLeft="@dimen/margin_large"
        android:paddingRight="@dimen/margin_small"
        android:paddingTop="@dimen/margin_small"
        android:text="Menu" />
</LinearLayout>

我为我的工厂使用了一个自定义drawable，并为我的TextView使用了自定义背景。当然，您可以根据需要更改这些部件。

这是结果。

如果您热衷于使用RelativeLayout，请添加

android:layout_toRightOf="@id/fab"
android:layout_centerVertical="true"

到TextView。结果应该是相同的。

浮动动作按钮，旁边有textview

4 个答案: