Android自定义ViewGroup实现9宫格布局

实现思想即自定义一个继承ViewGroup的view

需要实现三个类

1.NineGridView ,即自定义的ViewGroup

2.NineGridViewAdapter,数据适配器类

3.ImageInfo,图片信息的实体类

相应类的实现代码：

NineGridView

package com.gif.gifchannel.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.NonNull;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.gif.gifchannel.R;

import java.util.ArrayList;
import java.util.List;

/**
* Created by Answer on 2017/7/14.
*/

public class NineGridView extends ViewGroup {

// public static final int MODE_FILL = 0;          //填充模式，类似于微信
// public static final int MODE_GRID = 1;          //网格模式，类似于QQ，4张图会 2X2布局

private static ImageLoader mImageLoader;        //全局的图片加载器(必须设置,否则不显示图片)
private clickL click;
private int singleImageSize = 250;              // 单张图片时的最大大小,单位dp
private float singleImageRatio = 1.0f;          // 单张图片的宽高比(宽/高)
private int maxImageSize = 9;                   // 最大显示的图片数
private int gridSpacing = 4;                    // 宫格间距，单位dp
// private int mode = MODE_FILL;                   // 默认使用fill模式

private int columnCount;    // 列数
private int rowCount;       // 行数
private int gridWidth;      // 宫格宽度
private int gridHeight;     // 宫格高度

private List<ImageView> imageViews;
private List<ImageInfo> mImageInfo;
private NineGridViewAdapter mAdapter;

public NineGridView(Context context) {
this(context, null);
}

public NineGridView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public NineGridView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

DisplayMetrics dm = context.getResources().getDisplayMetrics();
gridSpacing = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, gridSpacing, dm);

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NineGridView);
gridSpacing = (int) a.getDimension(R.styleable.NineGridView_ngv_gridSpacing, gridSpacing);
a.recycle();

imageViews = new ArrayList<>();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//控件总宽度
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = 0;
//为所有图片分配的总宽度，包括图片间距
int totalWidth = width - getPaddingLeft() - getPaddingRight();
if (mImageInfo != null && mImageInfo.size() > 0) {
//只有1张图时 图片宽度即是总宽度  高度等于宽度
if (mImageInfo.size() == 1) {
gridWidth = totalWidth;
gridHeight = gridWidth;
Log.d("yzpzz","wid  "+gridWidth+ "height   "+gridHeight);
} else {
//按照有几列 来计算每张图片的宽度和高度
//gridWidth 、gridHeight表示每张图片占据的宽、高
gridWidth = gridHeight = (totalWidth - gridSpacing * (columnCount - 1)) / columnCount;
}
//此处width height就是我们即将为控件设置的总宽度 width可在layout中给定 height需要根据图片数量计算
width = gridWidth * columnCount + gridSpacing * (columnCount - 1) + getPaddingLeft() + getPaddingRight();
height = gridHeight * rowCount + gridSpacing * (rowCount - 1) + getPaddingTop() + getPaddingBottom();
Log.d("yzp","wid  "+width+ "height   "+height);
}
setMeasuredDimension(width,height);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (mImageInfo == null) return;
int childrenCount = mImageInfo.size();
//根据图片数量 创建相应个数的imageview  并根据设定的imageview的宽高以及间距 ，将imageview放置在正确的位置
for (int i = 0; i < childrenCount; i++) {
//得到父控件中相应的imageview
ImageView childrenView = (ImageView) getChildAt(i);
int rowNum = i / columnCount;
int columnNum = i % columnCount;
int left = (gridWidth + gridSpacing) * columnNum + getPaddingLeft();
int top = (gridHeight + gridSpacing) * rowNum + getPaddingTop();
int right = left + gridWidth;
int bottom = top + gridHeight;
Log.d("yyy","left  "+left+"right "+right+ "top "+top+"bottom  "+bottom);
childrenView.layout(left, top, right, bottom);
//imageloader是接口，调用接口中的onDisplayImage方法绘制imageview 。在使用的地方调用setImageLoader方法
//重写接口中的方法，可以使用不同的图片框架显示图片 如Glide Piccasso等
if (mImageLoader != null) {
mImageLoader.onDisplayImage(getContext(), childrenView, mImageInfo.get(i).imageUrl);
}
}
}

/** 设置适配器 */
//等到adapter 得到需要显示的图片信息
public void setAdapter(@NonNull NineGridViewAdapter adapter) {
mAdapter = adapter;
List<ImageInfo> imageInfo = adapter.getImageInfo();

if (imageInfo == null || imageInfo.isEmpty()) {
setVisibility(GONE);
return;
} else {
setVisibility(VISIBLE);
}

int imageCount = imageInfo.size();
if (maxImageSize > 0 && imageCount > maxImageSize) {
imageInfo = imageInfo.subList(0, maxImageSize);
imageCount = imageInfo.size();   //再次获取图片数量
}

//默认是3列显示，行数根据图片的数量决定
rowCount = imageCount / 3 + (imageCount % 3 == 0 ? 0 : 1);
columnCount = 3;
//grid模式下，显示4张图片使用2X2模式
if (imageCount == 4) {
rowCount = 2;
columnCount = 2;
}
//grid模式下，显示2张图片使用 2X1 模式

if (imageCount == 2) {
rowCount = 1;
columnCount = 2;
}
if(imageCount ==1){
rowCount =1;
columnCount =1;
}

//保证View的复用，避免重复创建
//mImageInfo=null 表示第一次创建
if (mImageInfo == null) {
for (int i = 0; i < imageCount; i++) {
ImageView iv = getImageView(i);
if (iv == null) return;
//添加相应个imageview到父控件 viewgroup中
addView(iv, generateDefaultLayoutParams());
}
} else {
//根据上次已有的imageview数量以及这次需要创建的imageview数量 移除或添加相应个数个imageview
int oldViewCount = mImageInfo.size();
int newViewCount = imageCount;
if (oldViewCount > newViewCount) {
removeViews(newViewCount, oldViewCount - newViewCount);
} else if (oldViewCount < newViewCount) {
for (int i = oldViewCount; i < newViewCount; i++) {
ImageView iv = getImageView(i);
if (iv == null) return;
addView(iv, generateDefaultLayoutParams());
}
}
}
//修改最后一个条目，决定是否显示更多
/*if (adapter.getImageInfo().size() > maxImageSize) {
View child = getChildAt(maxImageSize - 1);
if (child instanceof NineGridViewWrapper) {
NineGridViewWrapper imageView = (NineGri
4000
dViewWrapper) child;
imageView.setMoreNum(adapter.getImageInfo().size() - maxImageSize);
}
}*/
//将传过来的imageInfo信息赋给mImageInfo 用于判断下次是否需要全部创建
mImageInfo = imageInfo;
requestLayout();
}

/** 获得 ImageView 保证了 ImageView 的重用 */
private ImageView getImageView(final int position) {
ImageView imageView;
if (position < imageViews.size()) {
imageView = imageViews.get(position);
} else {
imageView = mAdapter.generateImageView(getContext());
imageView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//  mAdapter.onImageItemClick(getContext(), NineGridView.this, position, mAdapter.getImageInfo());
click.imageClick();
}
});
imageViews.add(imageView);
}
return imageView;
}

/** 设置宫格间距 */
public void setGridSpacing(int spacing) {
gridSpacing = spacing;
}

/** 设置只有一张图片时的宽 */
public void setSingleImageSize(int maxImageSize) {
singleImageSize = maxImageSize;
}

/** 设置只有一张图片时的宽高比 */
public void setSingleImageRatio(float ratio) {
singleImageRatio = ratio;
}

/** 设置最大图片数 */
public void setMaxSize(int maxSize) {
maxImageSize = maxSize;
}

public int getMaxSize() {
return maxImageSize;
}

public static void setImageLoader(ImageLoader imageLoader) {
mImageLoader = imageLoader;
}

public static ImageLoader getImageLoader() {
return mImageLoader;
}

public interface ImageLoader {
/**
* 需要子类实现该方法，以确定如何加载和显示图片
*
* @param context   上下文
* @param imageView 需要展示图片的ImageView
* @param url       图片地址
*/
void onDisplayImage(Context context, ImageView imageView, String url);

/*  *//**
* @param url 图片的地址
* @return 当前框架的本地缓存图片
*//*
Bitmap getCacheImage(String url);*/
}
//设置图片的点击事件
public  void setClick(clickL click){
this.click=click;
}
public  interface  clickL{
void imageClick();
}
}

NineGridViewAdapter

package com.gif.gifchannel.widget;

import android.content.Context;
import android.widget.ImageView;

import com.gif.gifchannel.R;

import java.io.Serializable;
import java.util.List;

/**
* Created by Answer on 2017/7/14.
* 适配器类，用于添加数据以及生成imageview
*/

public  class NineGridViewAdapter implements Serializable {

protected Context context;
private List<ImageInfo> imageInfo;

public NineGridViewAdapter(Context context, List<ImageInfo> imageInfo) {
this.context = context;
this.imageInfo = imageInfo;
}

/**
* 如果要实现图片点击的逻辑，重写此方法即可
*
* @param context      上下文
* @param nineGridView 九宫格控件
* @param index        当前点击图片的的索引
* @param imageInfo    图片地址的数据集合
*/
protected void onImageItemClick(Context context, NineGridView nineGridView, int index, List<ImageInfo> imageInfo) {
}

/**
* 生成ImageView容器的方式，
* 如果需要自定义图片展示效果，重写此方法即可
*
* @param context 上下文
* @return 生成的 ImageView
*/
protected ImageView generateImageView(Context context) {
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
//imageView.setImageResource(R.drawable.ic);
return imageView;
}

public List<ImageInfo> getImageInfo() {
return imageInfo;
}

public void setImageInfoList(List<ImageInfo> imageInfo) {
this.imageInfo = imageInfo;
}
}

ImageInfo

package com.gif.gifchannel.widget;

import java.io.Serializable;

/**
* Created by Answer on 2017/7/14.
* 图片信息的实体类，三个参数分别为图片的URL地址 图片的高度以及宽度
*/

public class ImageInfo implements Serializable {
public String imageUrl;
public int imageViewHeight;
public int imageViewWidth;

public String getImageUrl() {
return imageUrl;
}

public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
}

public int getImageViewHeight() {
return imageViewHeight;
}

public void setImageViewHeight(int imageViewHeight) {
this.imageViewHeight = imageViewHeight;
}

public int getImageViewWidth() {
return imageViewWidth;
}

public void setImageViewWidth(int imageViewWidth) {
this.imageViewWidth = imageViewWidth;
}

@Override
public String toString() {
return "ImageInfo{" +
"imageUrl='" + imageUrl + '\'' +
", imageViewHeight=" + imageViewHeight +
", imageViewWidth=" + imageViewWidth +
'}';
}
}

自定义属性，在attrs.xml中

<declare-styleable name="NineGridView">
<attr name="ngv_gridSpacing" format="dimension"/>
</declare-styleable>

一般的应用场景是在列表中展示多条9宫格样式的图片，如微信朋友圈

因此需要在LIstView或RecyclerView的adapter对应的Item布局中引入NIneGridView, 在adapter中添加数据以及设置9宫格数据的适配器

使用方法:

1.布局中引入NineGridView，设置控件width，height，paddingLeft,paddingRight等信息

<com.gif.gifchannel.widget.NineGridView
android:id="@+id/ugc_item_ninegrid"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="@+id/ugc_item_content"
android:layout_marginTop="12dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
app:ngv_gridSpacing="4dp"
/>

2.在ListView或RecyclerView的adapter中调用setImageLoader方法，确定如何加载和显示图片（就是用哪种图片框架）

NineGridView.setImageLoader(new NineGridView.ImageLoader() {
@Override
public void onDisplayImage(Context context, ImageView imageView, String url) {
Glide.with(context).load(url).priority(Priority.NORMAL).placeholder(R.mipmap.placehold).centerCrop().into(
imageView);
}
});

3.添加图片数据信息，创建NineGridViewAdapter，将包含图片信息的数据集合list添加进去，最后调用NineGridView的setAdapter方法，

设置数据适配器。

List<ImageInfo> imageInfoList = new ArrayList<>();
for (int i = 0; i < ugcItem.getImages().size(); i++) {
String url = ugcItem.getImages().get(i).getUrl();
ImageInfo info = new ImageInfo();
info.setImageUrl(url);
imageInfoList.add(info);
}

NineGridViewAdapter adapter = new NineGridViewAdapter(mContext, imageInfoList);
holder.ugc_item_ninegrid.setAdapter(adapter);