如何实现这种布局设计，其中视图位于另一个视图之上

debugcn 发表于 Dev

阴极

我必须编码 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>

穆罕默德·莫海丁 AH

使用相对布局的 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>