Android自定義ViewGroup之CustomGridLayout（一）
之前寫了兩篇關于自定義view的文章，本篇講講自定義ViewGroup的實現。
我們知道ViewGroup就是View的容器類，我們經常用的LinearLayout，RelativeLayout等都是ViewGroup的子類。并且我們在寫布局xml的時候，會告訴容器（凡是以layout為開頭的屬性，都是為用于告訴容器的），我們的寬度（layout_width）、高度（layout_height）、對齊方式（layout_gravity）等；于是乎，ViewGroup的職能為：給childView計算出建議的寬和高和測量模式 ；決定childView的位置；為什么只是建議的寬和高，而不是直接確定呢，別忘了childView寬和高可以設置為wrap_content，這樣只有childView才能計算出自己的寬和高。
View的根據ViewGroup傳入的測量值和模式，對自己寬高進行確定（onMeasure中完成），然后在onDraw中完成對自己的繪制。ViewGroup需要給View傳入view的測量值和模式（onMeasure中完成），而且對于此ViewGroup的父布局，自己也需要在onMeasure中完成對自己寬和高的確定。此外，需要在onLayout中完成對其childView的位置的指定。
因為ViewGroup有很多子View，所以它的整個繪制過程相對于View會復雜一點，但是還是遵循三個步驟measure，layout，draw，我們依次說明。
本文我們來寫一個類似于GridView的網格容器吧，姑且叫做CustomGridView。
自定義屬性/獲取屬性值
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomGridView"> <attr name="numColumns" format="integer" /> <attr name="hSpace" format="integer" /> <attr name="vSpace" format="integer" /> </declare-styleable> </resources>
public CustomGridView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
if (attrs != null) {
TypedArray a = getContext().obtainStyledAttributes(attrs,
R.styleable.CustomGridView);
colums = a.getInteger(R.styleable.CustomGridLayout_numColumns, 3);
hSpace = a.getInteger(R.styleable.CustomGridLayout_hSpace, 10);
vSpace = a.getInteger(R.styleable.CustomGridLayout_vSpace, 10);
a.recycle();
}
}
public MyGridLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyGridLayout(Context context) {
this(context, null);
}
LayoutParams
ViewGroup還有一個很重要的知識LayoutParams，LayoutParams存儲了子View在加入ViewGroup中時的一些參數信息，在繼承ViewGroup類時，一般也需要新建一個新的LayoutParams類，就像SDK中我們熟悉的LinearLayout.LayoutParams，RelativeLayout.LayoutParams類等一樣，那么可以這樣做，在你定義的ViewGroup子類中，新建一個LayoutParams類繼承與ViewGroup.LayoutParams。
public static class LayoutParams extends ViewGroup.LayoutParams {
public int left = 0;
public int top = 0;
public LayoutParams(Context arg0, AttributeSet arg1) {
super(arg0, arg1);
}
public LayoutParams(int arg0, int arg1) {
super(arg0, arg1);
}
public LayoutParams(android.view.ViewGroup.LayoutParams arg0) {
super(arg0);
}
}
那么現在新的LayoutParams類已經有了，如何讓我們自定義的ViewGroup使用我們自定義的LayoutParams類來添加子View呢，ViewGroup同樣提供了下面這幾個方法供我們重寫，我們重寫返回我們自定義的LayoutParams對象即可。
@Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new CustomGridLayout.LayoutParams(getContext(), attrs);
}
@Override
protected ViewGroup.LayoutParams generateDefaultLayoutParams() {
return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}
@Override
protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return new LayoutParams(p);
}
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof CustomGridLayout.LayoutParams;
}
measure
在onMeasure中需要做兩件事：
•計算childView的測量值以及模式
measureChildren(widthMeasureSpec, heightMeasureSpec);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
child.measure(WidthMeasureSpec, HeightMeasureSpec);
•設置ViewGroup自己的寬和高
測量ViewGroup的大小，如果layout_width和layout_height是match_parent或具體的xxxdp，就很簡答了，直接調用setMeasuredDimension()方法，設置ViewGroup的寬高即可，如果是wrap_content，就比較麻煩了，我們需要遍歷所有的子View，然后對每個子View進行測量，然后根據子View的排列規(guī)則，計算出最終ViewGroup的大小。
注意：在自定義View第一篇講SpecMode時，曾說到UNSPECIFIED一般都是父控件是AdapterView，通過measure方法傳入的模式。在這里恰好就用到了。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
//UNSPECIFIED一般都是父控件是AdapterView，通過measure方法傳入的模式
final int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth, MeasureSpec.UNSPECIFIED);
final int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight, MeasureSpec.UNSPECIFIED);
measureChildren(childWidthMeasureSpec, childHeightMeasureSpec);
int childCount = this.getChildCount();
int line = childCount % colums == 0 ? childCount / colums : (childCount + colums) / colums;
//寬布局為wrap_content時，childWidth取childView寬的最大值，否則動態(tài)計算
if (widthMode == MeasureSpec.AT_MOST) {
for (int i = 0; i < childCount; i++) {
View child = this.getChildAt(i);
childWidth = Math.max(childWidth, child.getMeasuredWidth());
}
} else if (widthMode == MeasureSpec.EXACTLY) {
childWidth = (sizeWidth - (colums - 1) * hSpace) / colums;
}
//高布局為wrap_content時，childHeight取childView高的最大值，否則動態(tài)計算
if (heightMode == MeasureSpec.AT_MOST) {
for (int i = 0; i < childCount; i++) {
View child = this.getChildAt(i);
childHeight = Math.max(childHeight, child.getMeasuredHeight());
}
} else if (heightMode == MeasureSpec.EXACTLY) {
childHeight = (sizeHeight - (line - 1) * vSpace) / line;
}
//遍歷每個子view，將它們左上角坐標保存在它們的LayoutParams中，為后面onLayout服務
for (int i = 0; i < childCount; i++) {
View child = this.getChildAt(i);
LayoutParams lParams = (LayoutParams) child.getLayoutParams();
lParams.left = (i % colums) * (childWidth + hSpace);
lParams.top = (i / colums) * (childHeight + vSpace);
}
//當寬高為wrap_content時，分別計算出的viewGroup寬高
int wrapWidth;
int wrapHeight;
if (childCount < colums) {
wrapWidth = childCount * childWidth + (childCount - 1) * hSpace;
} else {
wrapWidth = colums * childWidth + (colums - 1) * hSpace;
}
wrapHeight = line * childHeight + (line - 1) * vSpace;
setMeasuredDimension(widthMode == MeasureSpec.AT_MOST? wrapWidth:sizeWidth,heightMode == MeasureSpec.AT_MOST? wrapHeight:sizeHeight);
}
layout
最核心的就是調用layout方法，根據我們measure階段獲得的LayoutParams中的left和top字段，也很好對每個子View進行位置排列。
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = this.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = this.getChildAt(i);
LayoutParams lParams = (LayoutParams) child.getLayoutParams();
child.layout(lParams.left, lParams.top, lParams.left + childWidth, lParams.top + childHeight);
}
}
draw
ViewGroup在draw階段，其實就是按照子類的排列順序，調用子類的onDraw方法，因為我們只是View的容器，本身一般不需要draw額外的修飾，所以往往在onDraw方法里面，只需要調用ViewGroup的onDraw默認實現方法即可。不需要重寫。
最后，在自定義ViewGroup中定義GridAdatper接口，以便在外部可以為ViewGroup設置適配器。
public interface GridAdatper {
View getView(int index);
int getCount();
}
/** 設置適配器 */
public void setGridAdapter(GridAdatper adapter) {
this.adapter = adapter;
// 動態(tài)添加視圖
int size = adapter.getCount();
for (int i = 0; i < size; i++) {
addView(adapter.getView(i));
}
}
并且在自定義ViewGroup中定義OnItemClickListener接口，以便在外部可以獲取到childView的點擊事件。
public interface OnItemClickListener {
void onItemClick(View v, int index);
}
public void setOnItemClickListener(final OnItemClickListener listener) {
if (this.adapter == null)
return;
for (int i = 0; i < adapter.getCount(); i++) {
final int index = i;
View view = getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
listener.onItemClick(v, index);
}
});
}
}
使用自定義的CustomViewGroup
布局文件：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.hx.customgridview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#303030" android:orientation="vertical" > <com.hx.customgridview.CustomGridLayout android:id="@+id/gridview" android:layout_width="200dp" android:layout_height="300dp" android:background="#1e1d1d" app:hSpace="10" app:vSpace="10" app:numColumns="3"/> </LinearLayout>
grid_item：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/iv" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY"/> </LinearLayout>
Java文件：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
grid = (CustomGridLayout) findViewById(R.id.gridview);
grid.setGridAdapter(new GridAdatper() {
@Override
public View getView(int index) {
View view = getLayoutInflater().inflate(R.layout.grid_item, null);
ImageView iv = (ImageView) view.findViewById(R.id.iv);
iv.setImageResource(srcs[index]);
return view;
}
@Override
public int getCount() {
return srcs.length;
}
});
grid.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(View v, int index) {
Toast.makeText(MainActivity.this, "item="+index, Toast.LENGTH_SHORT).show();
}
});
}
}
運行后效果圖如下：
改變一下布局：
<com.hx.customgridview.CustomGridLayout android:id="@+id/gridview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#1e1d1d" app:hSpace="10" app:vSpace="10" app:numColumns="3"/>
再改變
<com.hx.customgridview.CustomGridLayout android:id="@+id/gridview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#1e1d1d" app:hSpace="10" app:vSpace="10" app:numColumns="3"/>
再變
<com.hx.customgridview.CustomGridLayout android:id="@+id/gridview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#1e1d1d" app:hSpace="10" app:vSpace="10" app:numColumns="4"/>
Demo下載地址：http://xiazai.jb51.net/201609/yuanma/CustomGridLayout(jb51.net).rar
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Android之ListView滾動到底后自動加載數據，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章給大家介紹android實現圖片自動輪播并且支持手勢左右無限滑動，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了Android 解決TextView排版參差不齊的問題的相關資料,需要的朋友可以參考下2017-01-01
目前的應用市場上，使用毛玻璃效果的APP隨處可見，比如用過微信語音聊天的人可以發(fā)現，語音聊天頁面就使用了高斯模糊效果。本文就使用Android仿寫一個這樣的效果2021-06-06
這篇文章主要介紹了Android 文件讀寫操作方法總結的相關資料,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了Android開啟新線程播放背景音樂，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了Android mvvm之LiveData原理案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
OkHttp3是一個處理網絡請求的開源項目,是安卓端最火熱的輕量級框架。本文將詳細解析它的源碼。2021-06-06
這篇文章主要為大家詳細介紹了Android實現圖片輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
本文主要介紹Android NDK開發(fā)，這里詳細整理了相關資料并介紹 NDK的知識和開發(fā)流程及簡單示例代碼，幫助大家學習，有需要的小伙伴可以參考下2016-09-09