Question

我正在尝试在两个布局之间放置一个按钮。

另外，如果我可以提供帮助，当你开始处理不同屏幕尺寸的保证金分解时，我不希望这样做。（在此图中，我试图将绿色按钮放在两个布局之间）

Desired resulting layout

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:background="@color/busy_white">

    <LinearLayout
        android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/profile_default_round"
            android:background="@drawable/ring_status_clock_in"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="John Doe"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Manager"/>

    </LinearLayout>

    <RelativeLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/translucent_black_90"
        android:padding="16dp">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_alignParentLeft="true">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Today Total"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="08:32"/>

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:layout_alignParentRight="true">

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Week Total"
                android:gravity="right"/>

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="24:32"
                android:gravity="center"/>

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="-40dp">

        </LinearLayout>

        </RelativeLayout>

    <include layout="@layout/dashboard_clock_in_button" />

</LinearLayout>

Answer 1

这种UI要求多层重叠。
所以FrameLayout就是这里的英雄。

为了基本了解我们希望实现的目标，我们可以绘制屏幕草图并确定放置位置
FL 是FrameLayout的主要容器。
你需要制作一个固定高度的按钮。假设BL的高度为 bl dp。
只需在LinearLayout LL 中提供长度 bl / 2 dp的MarginBottom。
其中 LL 是包含个人资料图像和作品的容器。

布局文件将如下所示

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/ConcernedPortionofScreen"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.4"
        android:orientation="vertical">

        <!-- Parent FrameLayout 'FL' -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!-- This is Layout 'LL'
                 This is where you will place your image & the nice bg
            -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="25dp"
                android:background="#b2ebf2" />

            <!-- BL = 50dp -->
            <Button
                android:layout_width="100dp"
                android:layout_height="50dp"
                android:layout_gravity="bottom|center_horizontal"
                android:background="#558b2f"
                android:text="@android:string/ok"
                android:textSize="18sp"
                android:textColor="@android:color/white" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/RestofScreen"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.6"
        android:orientation="vertical" />

</LinearLayout>

输出将如下所示

Answer 2

我认为您应该尝试使用RelativeLayout，其中您将放置两个布局和按钮。但是，如果您想将按钮置于两个布局的顶部，则必须将其放在RelativeLayout最后，因为z顺序，然后使用XML属性android:centerInParent。

所以你的布局将如下所示：

<RelativeLayout ...
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout ...
        android:id="@+id/myLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" > <!-- Or wherever you want to position this layout -->
        ...
    </LinearLayout>
    <LinearLayout ...
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/myLayout1" > <!-- Or wherever you want to position this layout -->
        ...
    </LinearLayout>
    <Button ...
        android:layout_centerInParent="true" />
</RelativeLayout>

Answer 3

您可以使用Coordinator布局轻松实现此目的。我们必须一个一个地指定多个布局，并且两个布局都必须是LinearLayout。现在我们必须在Button内使用layout_anchor属性

<android.support.design.widget.CoordinatorLayout 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="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/LinearLayout1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:background="#CDDC39"
                    android:layout_weight="50"/>

                <LinearLayout
                    android:id="@+id/LinearLayout2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:layout_weight="50"
                    android:background="#C6FF00"
                    />

            </LinearLayout>

            <Button
                android:id="@+id/button"
                android:layout_width="200dp"
                android:layout_height="wrap_content"
                app:layout_anchor="@id/LinearLayout1"
                app:backgroundTint="#2196F3"
                app:elevation="7dp"
                android:text:"click Me"
                android:layout_margin="20dp"
                android:src="@android:drawable/ic_dialog_email"
                app:layout_anchorGravity="bottom|center" />

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

如何在两个布局之间放置按钮

3 个答案: