CoordinatorLayout在元素之间添加填充

时间:2017-05-15 20:09:30

标签: android android-coordinatorlayout floating-action-button floating-action-menu

我希望在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>

3 个答案:

答案 0 :(得分:7)

解决方案1:

添加另一个View以在gap之间生成FAB's。将anchor的{​​{1}}设置为View的{​​{1}}位置,并将top的锚点设置为wordpackAddButton importWordpack的{​​{1}}位置}。

top-right

解决方案2:

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> 此布局中的两个FAB包裹到LinearLayout的{​​{1}}位置。

以下是解决方法:

anchor

<强>输出:

enter image description here

答案 1 :(得分:1)

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

希望它有所帮助。

答案 2 :(得分: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的{​​{1}}值设置为56dp,因为这是FAB的大小。