android - 如何在视图位于另一个视图之上的情况下实现这种布局设计

Question

我必须编写 a layout，其中视图与另一个视图重叠。在设计中，当我点击时，bt1 Linearlayout我们会在正下方看到bt1带有小动画。我可以设计动画和布局的所有内容，除了考虑如何LinearLayout放置bt3和bt4。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background">

<TableLayout
    android:id="@+id/lv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/custom_toolbar"
    android:layout_marginTop="5dp"
    android:orientation="horizontal">

    <TableRow>

        <Button
            android:id="@+id/bt1"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_marginEnd="2.5dp"
            android:layout_marginStart="3dp"
            android:layout_weight="1"
            android:background="@color/darkgrey"
            android:fontFamily="@font/brandon_re"
            android:text="button1"
            android:textColor="@color/defaultWhite"
            android:textSize="15dp" />

        <Button
            android:id="@+id/bt2"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_marginEnd="3dp"
            android:layout_marginStart="2.5dp"
            android:layout_weight="1"
            android:background="@color/darkgrey"
            android:fontFamily="@font/brandon_re"
            android:text="button2"
            android:textColor="@color/defaultWhite"
            android:textSize="15dp" />
    </TableRow>
</TableLayout>

<LinearLayout
    android:id="@+id/lv2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/lv1"
    android:layout_alignBottom="@+id/lv1">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="130dp"

        />
</LinearLayout>

<Button
    android:id="@+id/bt3"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_marginEnd="3dp"
    android:layout_marginStart="2.5dp"
    android:layout_weight="1"
    android:background="@color/darkgrey"
    android:fontFamily="@font/brandon_re"
    android:layout_below="@+id/lv1"
    android:layout_marginTop="20dp"
    android:text="button3"
    android:textColor="@color/defaultWhite"
    android:textSize="15dp" />
<Button
    android:id="@+id/bt4"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_marginEnd="3dp"
    android:layout_marginStart="2.5dp"
    android:layout_weight="1"
    android:background="@color/darkgrey"
    android:fontFamily="@font/brandon_re"
    android:layout_below="@+id/bt3"
    android:layout_marginTop="20dp"
    android:text="button4"
    android:textColor="@color/defaultWhite"
    android:textSize="15dp" />
</RelativeLayout>

标签： android

Answer 1

使用相对布局的 layout_below 属性。

将您的线性布局代码更改为在按钮代码之后并在一个布局中添加按钮。

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    >
... 
/* buttons */

</RelativeLayout>     

<LinearLayout
        android:id="@+id/lv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lv1">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="130dp"

            />
    </LinearLayout>

完整代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableLayout
        android:id="@+id/lv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal">

        <TableRow>

            <Button
                android:id="@+id/bt1"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_marginEnd="2.5dp"
                android:layout_marginStart="3dp"
                android:layout_marginLeft="3dp"
                android:layout_marginRight="2.5dp"
                android:layout_weight="1"
                android:text="button1"
                android:textSize="15dp" />

            <Button
                android:id="@+id/bt2"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_marginEnd="3dp"
                android:layout_marginStart="2.5dp"
                android:layout_marginLeft="3dp"
                android:layout_marginRight="2.5dp"
                android:layout_weight="1"
                android:text="button2"
                android:textSize="15dp" />
        </TableRow>
    </TableLayout>


<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <Button
        android:id="@+id/bt3"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginEnd="3dp"
        android:layout_marginStart="2.5dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="2.5dp"
        android:layout_weight="1"
        android:layout_marginTop="20dp"
        android:text="button3"
        android:textSize="15dp" />

    <Button
        android:id="@+id/bt4"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginEnd="3dp"
        android:layout_marginStart="2.5dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="2.5dp"
        android:layout_weight="1"
        android:layout_below="@+id/bt3"
        android:layout_marginTop="20dp"
        android:text="button4"
        android:textSize="15dp" />

</RelativeLayout>

<LinearLayout
    android:id="@+id/lv2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="130dp"

        />
</LinearLayout>

</RelativeLayout>

您必须使用重叠布局的背景才能看到重叠..