Android 如何制作交错网格视图？

嗨，我试图通过androidstudio中的xml代码来实现类似的内容，但是我无法理解我是如何部分到达那里，但感觉我没有使用正确的方法，但是有人可以告诉我如何通过xml或java来实现这个布局

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="2dp"
    tools:context="com.stocks.android.gridview.MainActivity">

    <LinearLayout
        android:id="@+id/linear_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="280dp"
            android:layout_height="200dp"
            android:layout_marginRight="5dp"
            android:layout_weight="40"
            app:cardBackgroundColor="#BCE36E"
            app:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/img1" />

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_weight="60"
            app:cardBackgroundColor="#8BD3FB"
            app:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/img2" />

        </android.support.v7.widget.CardView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/linear_one"
        android:layout_margin="5dp"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_weight="60"
            app:cardBackgroundColor="#FFB637"
            app:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/img2" />
        </android.support.v7.widget.CardView>

        <LinearLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_marginLeft="5dp"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="200dp"
                android:layout_height="100dp"
                app:cardBackgroundColor="#FB7649"
                app:cardCornerRadius="4dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/img3" />

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="200dp"
                android:layout_height="95dp"
                android:layout_marginTop="5dp"
                app:cardBackgroundColor="#F1F1F1"
                app:cardCornerRadius="4dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/img7" />

            </android.support.v7.widget.CardView>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/linear_two">

        <android.support.v7.widget.CardView
            android:layout_width="280dp"
            android:layout_height="200dp"
            android:layout_marginRight="5dp"
            android:layout_weight="60"
            app:cardBackgroundColor="#F34F45"
            app:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/img6" />

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_weight="40"
            app:cardBackgroundColor="#55C6FF"
            app:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/img4" />

        </android.support.v7.widget.CardView>
    </LinearLayout>
</RelativeLayout>

---

为动态高度图像创建一个类

public class DynamicHeightNetworkImageView extends ImageView {
private float mAspectRatio = 1.5f;

public DynamicHeightNetworkImageView(Context context) {
    super(context);
}

public DynamicHeightNetworkImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public DynamicHeightNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int measuredWidth = getMeasuredWidth();
    setMeasuredDimension(measuredWidth, (int) (measuredWidth / mAspectRatio));
}

public void setAspectRatio(float aspectRatio) {
    mAspectRatio = aspectRatio;
    requestLayout();
}

}

并在xml文件中使用它

<com.dmitrymalkovich.android.xyzreader.ui.DynamicHeightNetworkImageView
        android:id="@+id/thumbnail"
        android:layout_width="match_parent"
        android:background="@color/material_grey_300"
        android:layout_height="wrap_content" />

---

查看此github代表：

检查本教程：查看

GridLayout

。创建常规

RecyclerView

并将

LayoutManager

设置为

StaggedGridLayoutManager