0

我想在我的 CoordinatorView 中有两个 FloatingActionButtons。但是当我尝试将边距添加到顶部 FloatingActionButton 时，它会从视图的末尾应用 - 它应该在 FloatingActionButtons 之间添加空间。XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    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">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/wordpackAddButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/add"
    app:elevation="5dp"
    app:layout_anchor="@id/wordpacks_list"
    app:layout_anchorGravity="bottom|right|end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/importWordpack"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:layout_marginBottom="16dp"
    android:src="@drawable/add"
    app:elevation="5dp"
    app:layout_anchor="@id/wordpackAddButton"
    app:layout_anchorGravity="top" />

<ListView
    android:id="@+id/wordpacks_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></ListView>
</android.support.design.widget.CoordinatorLayout>

4

3 回答 3

9

解决方案 1：

添加另一个View在gap两个之间FAB's。将anchorof设置View为的top位置，wordpackAddButton并将锚点设置importWordpack为的top-right位置View。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    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">

    <ListView
        android:id="@+id/wordpacks_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </ListView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/wordpackAddButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/add"
        app:elevation="5dp"
        app:layout_anchor="@id/wordpacks_list"
        app:layout_anchorGravity="bottom|right|end" />

    <View
        android:id="@+id/gap"
        android:layout_width="16dp"
        android:layout_height="16dp"
        app:layout_anchor="@id/wordpackAddButton"
        app:layout_anchorGravity="top">

    </View>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/importWordpack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:src="@drawable/add"
        app:elevation="5dp"
        app:layout_anchor="@id/gap"
        app:layout_anchorGravity="top|center" />


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

解决方案 2：

将两个包裹FAB成一个LinearLayout，anchor这个布局到 的bottom-right位置ListView。

这是一种解决方法：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    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="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_anchor="@id/wordpacks_list"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_margin="16dp"
        android:background="@android:color/transparent"
        android:clipToPadding="false">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/importWordpack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:src="@drawable/add"
            app:elevation="5dp" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/wordpackAddButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:src="@drawable/add"
            app:elevation="5dp" />

    </LinearLayout>

    <ListView
        android:id="@+id/wordpacks_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

输出：

在此处输入图像描述

于 2017-05-15T21:12:53.937 回答
1

在 Fab 按钮之后添加此视图，并将顶级 fab 的 layout_anchor 更改为 transparent_view。

<View
    android:layout_width="8dp"
    app:layout_anchor="@id/wordpackAddButton"
    app:layout_anchorGravity="top"
    app:useCompatPadding="false"
    android:layout_gravity="end"
    android:background="@android:color/transparent"
    android:id="@+id/transparent_view"
    android:layout_height="8dp"/>

希望能帮助到你。

于 2017-05-15T20:54:43.780 回答
0

我在实现 FAB 菜单时遇到了类似的问题。您可以通过像这样包装第二个 FAB 来解决这个问题FrameLayout：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/wordpackAddButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    app:elevation="5dp"
    app:layout_anchorGravity="bottom|right|end" />

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="56dp"
    app:layout_anchor="@id/wordpackAddButton"
    app:layout_anchorGravity="top|right">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/importWordpack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_margin="16dp"
        app:elevation="5dp"
        app:layout_anchor="@id/wordpackAddButton" />
</FrameLayout>

这可能是一个 hacky 解决方案，但它很简单并且有效。的padding值FrameLayout设置为 56dp，因为这是 FAB 的大小。

于 2017-05-15T20:51:59.947 回答