CoordinatorLayout 在元素之间添加填充

Question

我想在我的 CoordinatorView 中有两个 FloatingActionButton。但是当我尝试向顶部 FloatingActionButton 添加边距时，它从视图的末尾开始应用 - 它应该在 FloatingActionButton 之间添加 space。 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>

Answer 1

我在实施 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>

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

Answer 2

在 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"/>

希望对您有所帮助。

Answer 3

解决方案 1：

添加另一个 View 以在两个 FAB's 之间创建一个 gap。将View的anchor设置到wordpackAddButton的top位置，将importWordpack的anchor设置到[=12=的top-right位置].

<?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这个布局到ListView的bottom-right位置。

解决方法如下：

<?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>

输出：

CoordinatorLayout 在元素之间添加填充

CoordinatorLayout add padding between elements

android

floating-action-button

android-coordinatorlayout

floating-action-menu