一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件。
CSDN：http://blog.csdn.net/hmyang314/article/details/51415396
1、当只有1张图时，可以自己定制图片宽高，也可以使用默认九宫格的宽高；
2、当只有4张图时，以2*2的方式显示；
3、除以上两种情况下，都是按照3列方式显示，但这时有一些细节：
a、如果只有9张图，当然是以3*3的方式显示；
b、如果超过9张图，可以设置是否全部显示。
如果设置不完全显示，则按照3*3的方式显示，但是在第9张图上会有一个带“+”号的数字，
代表还有几张没有显示，这里是模仿了QQ空间图片超出9张的显示方式；
如果设置全部显示，理所当然的将所有图片都显示出来。
4、图片被按下时，会有一个变暗的效果，这也是模仿微信朋友圈的效果。
1、核心类是NineGridLayout，继承自ViewGroup的抽象类，所以我们实际项目使用需要继承它，并要实现3个方法，如下：
public abstract class NineGridLayout extends ViewGroup {
//******************************其他代码省略**************************
/**
* 显示一张图片
* @param imageView
* @param url
* @param parentWidth 父控件宽度
* @return true 代表按照九宫格默认大小显示，false 代表按照自定义宽高显示
*/
protected abstract boolean displayOneImage(RatioImageView imageView, String url, int parentWidth);
protected abstract void displayImage(RatioImageView imageView, String url);
/**
* 点击图片时执行
*/
protected abstract void onClickImage(int position, String url, List<String> urlList);
}
2、我这里用NineGridTestLayout继承NineGridLayout实现，displayOneImage()与displayImage()中的参数都是显示图片需要的，我这里用的是ImageLoader显示图片，当然你也可以用其他的。
public class NineGridTestLayout extends NineGridLayout {
protected static final int MAX_W_H_RATIO = 3;
public NineGridTestLayout(Context context) {
super(context);
}
public NineGridTestLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected boolean displayOneImage(final RatioImageView imageView, String url, final int parentWidth) {
//这里是只显示一张图片的情况，显示图片的宽高可以根据实际图片大小自由定制，parentWidth 为该layout的宽度
ImageLoader.getInstance().displayImage(imageView, url, ImageLoaderUtil.getPhotoImageOption(), new ImageLoadingListener() {
@Override
public void onLoadingStarted(String imageUri, View view) {
}
@Override
public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
}
@Override
public void onLoadingComplete(String imageUri, View view, Bitmap bitmap) {
int w = bitmap.getWidth();
int h = bitmap.getHeight();
int newW;
int newH;
if (h > w * MAX_W_H_RATIO) {//h:w = 5:3
newW = parentWidth / 2;
newH = newW * 5 / 3;
} else if (h < w) {//h:w = 2:3
newW = parentWidth * 2 / 3;
newH = newW * 2 / 3;
} else {//newH:h = newW :w
newW = parentWidth / 2;
newH = h * newW / w;
}
setOneImageLayoutParams(imageView, newW, newH);
}
@Override
public void onLoadingCancelled(String imageUri, View view) {
}
});
return false;// true 代表按照九宫格默认大小显示(此时不要调用setOneImageLayoutParams)；false 代表按照自定义宽高显示。
}
@Override
protected void displayImage(RatioImageView imageView, String url) {
ImageLoaderUtil.getImageLoader(mContext).displayImage(url, imageView, ImageLoaderUtil.getPhotoImageOption());
}
@Override
protected void onClickImage(int i, String url, List<String> urlList) {
Toast.makeText(mContext, "点击了图片" + url, Toast.LENGTH_SHORT).show();
}
}
3、在xml中实现
<com.hmy.ninegridlayout.view.NineGridTestLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_nine_grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:sapcing="4dp" />
app:sapcing是设置九宫格中图片之间的间隔。
4、使用：
List<String> urlList = new ArrayList<>();//图片url
NineGridTestLayout layout = (NineGridTestLayout) view.findViewById(R.id.layout_nine_grid);
layout.setIsShowAll(false); //当传入的图片数超过9张时，是否全部显示
layout.setSpacing(5); //动态设置图片之间的间隔
layout.setUrlList(urlList); //最后再设置图片url
5、效果图
