android - 如何制作这个 Staggered 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