Question

这里有点新手。我试图将两个浮动动作按钮并排排列，但它们有点重叠。 Probabilly需要一种保证金，我尝试使用layout_marginRight =“85dp”，但它不起作用。

截图

Roomedit3dTranslationTool

如何让他们正确查看？感谢。

Answer 1

我能找到的最好方法是将两个FAB封装在RelativeLayout中，如下所示：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_margin="20dp">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:src="@drawable/ic_chat_white_24dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="50dp"
        android:src="@drawable/ic_person_add_white_24dp"/>
</RelativeLayout>

RelativeLayout与FAB具有相同的高度，因此您不必考虑高度对齐。由于这条线，FAB将在右侧对齐：

android:layout_alignParentEnd="true"

您可能希望调整每个布局中的边距值以满足您的需求。我认为这应该回答你的问题。

编辑：以上内容无法按预期工作。这将：

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="85dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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


</LinearLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|right"
    android:layout_margin="20dp">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:src="@android:drawable/ic_person_add_white_24dp"
    android:visibility="visible"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="20dp"
        android:src="@android:drawable/ic_person_add_white_24dp" />
</RelativeLayout>

解释

我现在使用

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="85dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

作为RelativLayout的锚点，其中包含FAB。

从RelativeLayout中删除了android:layout_gravity="bottom"，并将其替换为app:layout_anchor="@id/app_bar"和app:layout_anchorGravity="bottom|right"。

仍然需要根据需要调整边距。我还在你的AppBarLayout中添加了android:layout_height="85dp"，因为我没有android:layout_height="@dimen/app_bar_height"。也可以替换它。希望这可以帮助。

Answer 2

我不得不说并排放置两个FloatingActionButton并不是一个好的经验。通常放一个FAB或尝试在其上添加一个菜单。请参阅：https://github.com/Clans/FloatingActionButton

并排对齐两个浮动操作按钮

2 个答案: