このStaggered GridViewの作成方法は？

Question

こんにちは、私はアンドロイドスタジオで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