两个浮动按钮在一个布局中

Question

我正在使用材料设计创建一个简单的应用程序.我想在一个布局上获得两个浮动按钮.

而且我想让他们在小吃店展示时继续前行.但我不能以正确的方式做错,因为layout_margin不起作用.这些是应用程序和标记的屏幕截图.你可以帮帮我吗？

                  <android.support.design.widget.AppBarLayout
                    android:id="@+id/addProductsAppBar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                    <android.support.design.widget.TabLayout
                        android:id="@+id/addProductsTabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content" />

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

                  <android.support.v4.view.ViewPager
                    android:id="@+id/addProductsViewpager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

                  <android.support.design.widget.FloatingActionButton
                    android:id="@+id/addProductFab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_add_white_36dp" />

                  <android.support.design.widget.FloatingActionButton
                    android:id="@+id/searchFab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_anchor="@id/addProductFab"
                    app:layout_anchorGravity="top|right|end"
                    android:layout_marginBottom="80dp"
                    android:layout_marginRight="16dp"
                    android:src="@drawable/ic_search_white_36dp"/>

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

Answer 1

我尝试使用您的代码进行一些调整以使其正常工作,并且在此过程中我已经对锚点的工作有了一些了解.

首先要注意的是CoordinatorLayout根据视图的边框对齐其子视图.因此,在元素之间添加边距对于运动完全没有帮助.它在布局上看起来很好,但放弃运动.

因此添加虚拟视图有助于正确锚定而不会出现问题.此外,您需要适当设置layout_gravities.

只需使用以下代码替换布局中2个FAB的代码:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addProductFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add_white_36dp" />

<View
    android:id="@+id/dummy"
    android:layout_width="1dp"
    android:layout_height="16dp"
    app:layout_anchor="@id/addProductFab"
    app:layout_anchorGravity="top|right|end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/searchFab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|top"
    android:layout_margin="16dp"
    android:src="@drawable/ic_search_white_36dp"
    app:layout_anchor="@id/dummy"
    app:layout_anchorGravity="top|right|end" />

希望这可以帮助!如果有效,请接受此答案.:)

Answer 2

在支持库版本24.2.0中,CoordinatorLayout有一个新属性layout_dodgeInsetEdges,您可以将其添加到包含两个FAB的LinearLayout(或任何其他视图),Snackbar将移动整个视图!

所以,例如:

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:fitsSystemWindows="true"
        tools:context=".Activities.MainActivity">

    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS

        <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/fab_margin"
                android:src="@drawable/icon"
                android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>

        <android.support.design.widget.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/fab_margin"
                android:src="@drawable/icon"
                android:tint="@color/colorTextAndIcons"
                app:backgroundTint="@color/colorPrimary"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>