Question

您好我试图通过Android工作室中的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

如何制作这个Staggered GridView？

1 个答案: