如何制作这个交错的 GridView？

Question

您好，我试图通过 android studio 中的 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>

Answer 1

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

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 代表：https://github.com/DmitryMalkovich/make-your-app-material