1. 程式人生 > >recyclerview 實現正方形網格效果

recyclerview 實現正方形網格效果

如下圖所示,我們要實現類似圖片的效果:


首先想到的是使用gridviw實現,但是用gridview實現分割線效果比較繁瑣,恰巧鴻樣大神用Recycleview實現了gridview+分割線的效果,連結地址:

http://blog.csdn.net/lmj623565791/article/details/45059587

然後就是按慣例寫item佈局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/classify_cycler_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:src="@drawable/default_img" />

    <TextView
        android:id="@+id/classify_ctxt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/round_bottom_transparent"
        android:gravity="center"
        android:padding="3dp"
        android:textColor="@color/white"
        android:textSize="12sp" />

</RelativeLayout>
一切就緒,真機跑起來,我用的一臺的nexus4測試,下面是顯示效果:

圖片被拉長了,上面還有留白,為什麼會產生這種問題呢:

 仔細想想,item佈局的寬度是你指定Recycleview列數以後確定下來,高度在onmeasue方法裡計算出來,如果想要實現效果圖那樣矩形的效果,自然需要寬高一樣。

有了思路以後,只需要把item佈局的父佈局搞成寬高一樣就哦了

自定義一個簡單的relativelayout:

public class SquareRelativeLayout extends RelativeLayout {

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

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

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

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
				getDefaultSize(0, heightMeasureSpec));

		int childWidthSize = getMeasuredWidth();
		// 高度和寬度一樣
		heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(
				childWidthSize, MeasureSpec.EXACTLY);
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

}

別忘了 super 還有子佈局呢。

現在在看一下效果:



與效果圖一致。這裡是提供一個思路,這樣做的好處是不用寫不同的dimensions適配,當寬或高一方固定時,可以通過比例實現佈局的大小。

如果還有疑問建議看看郭神關於view的文章,本屌受益匪淺。