前言
很多时候我们都在刷微博或微信朋友圈的时候都会看到很多图片,而这些图片的显示跟我们平时很多控件的显示方式都不1样,而且,当我们仔细去视察后就会发现,他加载的图片都是根据图片数量动态加载的,根据不同的图片数量来用不同的布局显示
当图片是4张的时候,就会构成1个2x2的正方形,除1张的情况,另外的都是依照9宫格的方式显示和排列图片的。那末这类布局是怎样实现的呢,1开始,好多人都可能认为用原生的GridView就可以弄掂,但是,却有几种特殊的情况是GridView解决不了的,例如4张图片的情况,或1张,其实也能够根据图片的数量然后用几个不同布局的GridView来实现,不过那样的话就复杂很多了。而且处理起来很麻烦,其实,大部份的实现都是通过自定义ViewGroup来实现的,通过代码编写来设定childrenView的layout来实现这类布局,而NineGridView控件就是这么1个东西,代码其实很简单,100行就够了。
代码编写
先自定义1个View集成ViewGroup,编辑器会提示你实现OnLayout方法,实现之,这里我们动态的添加的话其实不用到OnLayout方法,自定义1个layoutChildrenView()用来为子view设定位置就好了,该方法的实现以下:
这代码里面在调用子view的layout方法的同时设定了本身ViewGroup的高度大小,由于NineGridView的高度是要根据子View的高度来肯定的.
-
private void layoutChildrenView(){
-
int childrenCount = listData.size();
-
-
int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
-
int singleHeight = singleWidth;
-
-
//根据子view数量肯定高度
-
ViewGroup.LayoutParams params = getLayoutParams();
-
params.height = singleHeight * rows + gap * (rows - 1);
-
setLayoutParams(params);
-
-
for (int i = 0; i < childrenCount; i++) {
-
CustomImageView childrenView = (CustomImageView) getChildAt(i);
-
childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
-
int[] position = findPosition(i);
-
int left = (singleWidth + gap) * position[1];
-
int top = (singleHeight + gap) * position[0];
-
int right = left + singleWidth;
-
int bottom = top + singleHeight;
-
-
childrenView.layout(left, top, right, bottom);
-
}
-
-
}
复制代码
添加1个设置图片资源的接口,1般情况下我们都是用在listview来显示数据,而数据都是封装好的,这里提供1个Image封装类,接口和封装类代码以下:
-
public void setImagesData(List<Image> lists) {
-
if (lists == null || lists.isEmpty()) {
-
return;
-
}
-
//初始化布局
-
generateChildrenLayout(lists.size());
-
//这里做1个重用view的处理
-
if (listData == null) {
-
int i = 0;
-
while (i < lists.size()) {
-
CustomImageView iv = generateImageView();
-
addView(iv,generateDefaultLayoutParams());
-
i++;
-
}
-
} else {
-
int oldViewCount = listData.size();
-
int newViewCount = lists.size();
-
if (oldViewCount > newViewCount) {
-
removeViews(newViewCount - 1, oldViewCount - newViewCount);
-
} else if (oldViewCount < newViewCount) {
-
for (int i = 0; i < newViewCount - oldViewCount; i++) {
-
CustomImageView iv = generateImageView();
-
addView(iv,generateDefaultLayoutParams());
-
}
-
}
-
}
-
listData = lists;
-
layoutChildrenView();
-
}
复制代码
Image封装类:
-
-
public class Image {
-
private String url;
-
private int width;
-
private int height;
-
-
public Image(String url, int width, int height) {
-
this.url = url;
-
this.width = width;
-
this.height = height;
-
L.i(toString());
-
}
-
-
public String getUrl() {
-
return url;
-
}
-
-
public void setUrl(String url) {
-
this.url = url;
-
}
-
-
public int getWidth() {
-
return width;
-
}
-
-
public void setWidth(int width) {
-
this.width = width;
-
}
-
-
public int getHeight() {
-
return height;
-
}
-
-
public void setHeight(int height) {
-
this.height = height;
-
}
-
-
@Override
-
public String toString() {
-
-
return "image---->>url="+url+"width="+width+"height"+height;
-
}
-
}
-
复制代码
在添加数据的时候,我们要根据图片的个数来肯定具体的布局情况,这个函数就是generateChildrenLayout(),实现以下:
-
/**
-
* 根据图片个数肯定行列数量
-
* 对应关系以下
-
* num row column
-
* 1 1 1
-
* 2 1 2
-
* 3 1 3
-
* 4 2 2
-
* 5 2 3
-
* 6 2 3
-
* 7 3 3
-
* 8 3 3
-
* 9 3 3
-
*
-
* @param length
-
*/
-
private void generateChildrenLayout(int length) {
-
if (length <= 3) {
-
rows = 1;
-
columns = length;
-
} else if (length <= 6) {
-
rows = 2;
-
columns = 3;
-
if (length == 4) {
-
columns = 2;
-
}
-
} else {
-
rows = 3;
-
columns = 3;
-
}
-
}
复制代码
这些,就是NineGridLayout的核心代码了,是否是很简单,全部类的源码以下:
-
package com.weixinninegridlayout;
-
-
import android.content.Context;
-
import android.graphics.Color;
-
import android.graphics.drawable.ColorDrawable;
-
import android.util.AttributeSet;
-
import android.view.View;
-
import android.view.ViewGroup;
-
import android.widget.ImageView;
-
-
import java.util.List;
-
-
-
/**
-
* Created by Pan_ on 2015/2/2.
-
*/
-
public class NineGridlayout extends ViewGroup {
-
-
/**
-
* 图片之间的间隔
-
*/
-
private int gap = 5;
-
private int columns;//
-
private int rows;//
-
private List listData;
-
private int totalWidth;
-
-
public NineGridlayout(Context context) {
-
super(context);
-
}
-
-
public NineGridlayout(Context context, AttributeSet attrs) {
-
super(context, attrs);
-
ScreenTools screenTools=ScreenTools.instance(getContext());
-
totalWidth=screenTools.getScreenWidth()-screenTools.dip2px(80);
-
}
-
-
@Override
-
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
-
}
-
-
@Override
-
protected void onLayout(boolean changed, int l, int t, int r, int b) {
-
-
}
-
private void layoutChildrenView(){
-
int childrenCount = listData.size();
-
-
int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
-
int singleHeight = singleWidth;
-
-
//根据子view数量肯定高度
-
ViewGroup.LayoutParams params = getLayoutParams();
-
params.height = singleHeight * rows + gap * (rows - 1);
-
setLayoutParams(params);
-
-
for (int i = 0; i < childrenCount; i++) {
-
CustomImageView childrenView = (CustomImageView) getChildAt(i);
-
childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
-
int[] position = findPosition(i);
-
------分隔线----------------------------
------分隔线----------------------------