[英]How to get two floating action buttons to not overlap over each other?
I am trying to get two floating action buttons to be right next to each other, but everything I have tried has not worked. 我试图使两个浮动操作按钮彼此相邻,但是我尝试过的所有操作均无效。 I believe this is because I am in FrameLayout, but I still cannot figure out how to fix this issue.
我相信这是因为我在FrameLayout中,但是我仍然不知道如何解决此问题。
This is what I have now: 这就是我现在所拥有的:
<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>
I am hoping to have two floating action buttons one on top of another, like so 我希望有两个浮动操作按钮,一个像另一个一样
Create a LinearLayout put the two FABs inside Linear Layout and make the Frame layout as the root of LinearLayout. 创建一个LinearLayout,将两个FAB放入Linear Layout中,并使Frame布局成为LinearLayout的根。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="bottom|end"
android:orientation="vertical">
<android.support.design.widget.FloatingActionButton
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_add_button"
/>
<android.support.design.widget.FloatingActionButton
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_add_button"
/>
</LinearLayout>
</FrameLayout>
Try putting each floating button in its own FrameLayout
. 尝试将每个浮动按钮放在其自己的
FrameLayout
。
From the Android documentation: 从Android文档中:
FrameLayout is designed to block out an area on the screen to display a single item.
FrameLayout旨在遮挡屏幕上的某个区域以显示单个项目。 Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.
通常,应使用FrameLayout来保存单个子视图,因为在子视图彼此不重叠的情况下,难以以可扩展到不同屏幕尺寸的方式组织子视图。 You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
不过,您可以使用android:layout_gravity属性将多个子项添加到FrameLayout并通过将重力分配给每个子项来控制它们在FrameLayout中的位置。
I also put the frame layouts inside of a RelativeLayout
, however I'm not sure if it's necessary depending on what else you're doing with this layout. 我也将框架布局放在
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.