堆栈视图Android设计[已关闭]

Question

我有这样的景色。

我已经尝试使用约束布局，但它是不工作的根据设计可以有人建议我如何使这种设计，或者我们有相同的库，因为我也想添加一些动画。

编辑:我面临的主要问题是相互重叠的视图

Answer 1

试试这段代码，它会让你知道如何设置这样的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
  android:background="@color/white"
  android:clickable="true"
  android:focusable="true"
android:orientation="vertical">


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

    <ImageView
        android:id="@+id/img_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_dummy_product" />

    <LinearLayout
        android:id="@+id/layout_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="150dp"
        android:layout_marginTop="100dp"
        android:background="@color/white"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="25dp"
            android:layout_marginTop="25dp"
            android:text="Welcom Back" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="25dp"
            android:layout_marginTop="10dp"
            android:text="Merida"
            android:textColor="@color/blue_border"
            android:textSize="25sp" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-35dp"
        android:background="#2f47d2"
        android:minHeight="90dp"
        android:layout_below="@+id/layout_1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="15dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="10dp"
                android:tint="@color/white"
                app:srcCompat="@drawable/ic_cart" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="20dp"
                android:text="Find Product"
                android:textColor="@color/white"
                android:textSize="18sp" />


        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-35dp"
        android:background="#2FACD2"
        android:minHeight="90dp"
        android:layout_below="@+id/layout_2">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="15dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="10dp"
                android:tint="@color/white"
                app:srcCompat="@drawable/ic_cart" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="20dp"
                android:text="Find Product"
                android:textColor="@color/white"
                android:textSize="18sp" />


        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/layout_4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-35dp"
        android:background="#2FD2BF"
        android:minHeight="90dp"
        android:layout_below="@+id/layout_3">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="15dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="10dp"
                android:tint="@color/white"
                app:srcCompat="@drawable/ic_cart" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="20dp"
                android:text="Find Product"
                android:textColor="@color/white"
                android:textSize="18sp" />


        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/layout_5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-35dp"
        android:background="#AF2FD2"
        android:minHeight="90dp"
        android:layout_below="@+id/layout_4">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="15dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="10dp"
                android:tint="@color/white"
                app:srcCompat="@drawable/ic_cart" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="20dp"
                android:text="Find Product"
                android:textColor="@color/white"
                android:textSize="18sp" />


        </LinearLayout>

    </LinearLayout>


</RelativeLayout>

并且对于每一行，您必须创建具有不同颜色的自定义背景可绘制文件。