如何使两个浮动操作按钮彼此不重叠?

时间:2019-05-07 00:31:24

标签: java android floating-action-button android-framelayout

我正在尝试使两个浮动操作按钮彼此相邻,但是我尝试的所有操作均无效。我相信这是因为我在FrameLayout中,但是我仍然不知道如何解决此问题。

这就是我现在拥有的:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/saveFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_save_24dp"
        />
    <View
        android:id="@+id/dummy"
        android:layout_width="1dp"
        android:layout_height="16dp"
        app:layout_anchor="@id/saveFloatingActionButton"
        app:layout_anchorGravity="top|right|end" />

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

</FrameLayout>

我希望有两个浮动操作按钮,一个像另一个

Expected Result

2 个答案:

答案 0 :(得分:1)

创建LinearLayout,将两个FAB放入Linear Layout中,然后将Frame布局作为LinearLayout的根。

queryInterface.bulkInsert('practices', [{ data }], { fields: 'Array of all fields except createdAt' });

答案 1 :(得分:0)

尝试将每个浮动按钮放在自己的FrameLayout中。

来自Android文档:

  

FrameLayout旨在挡住屏幕上的某个区域以显示单个项目。通常,应使用FrameLayout来保存单个子视图,因为在子视图彼此不重叠的情况下,难以以可扩展到不同屏幕尺寸的方式组织子视图。但是,您可以使用android:layout_gravity属性将重力分配给每个子级,从而将多个子级添加到FrameLayout并控制它们在FrameLayout中的位置。

我也将框架布局放在RelativeLayout内,但是我不确定是否有必要,这取决于您对此布局所做的其他事情。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom|right|end">

    <FrameLayout
        android:id="@+id/FAB_frame_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="@dimen/fab_margin"
            app:elevation="8dp"
            app:fabSize="normal"
            app:rippleColor="your_color"/>

        <TextView
            android:id="@+id/fab_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:elevation="16dp"
            android:text="your_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#fff"/>
    </FrameLayout>

    <FrameLayout
        android:id="@+id/FAB_frame_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FAB_frame_1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="@dimen/fab_margin"
            app:elevation="9dp"
            app:fabSize="normal"
            app:rippleColor="your_color"/>

        <TextView
            android:id="@+id/fab_text_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:elevation="17dp"
            android:text="your_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#fff"/>
    </FrameLayout>
</RelativeLayout>