recyclerview 實現正方形網格效果
阿新 • • 發佈:2019-01-24
如下圖所示,我們要實現類似圖片的效果:
首先想到的是使用gridviw實現,但是用gridview實現分割線效果比較繁瑣,恰巧鴻樣大神用Recycleview實現了gridview+分割線的效果,連結地址:
http://blog.csdn.net/lmj623565791/article/details/45059587
然後就是按慣例寫item佈局:
一切就緒,真機跑起來,我用的一臺的nexus4測試,下面是顯示效果:<?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>
圖片被拉長了,上面還有留白,為什麼會產生這種問題呢:
仔細想想,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的文章,本屌受益匪淺。