最近在公司项目重构一个类似朋友圈或微博的动态界面,其中需要显示九宫格图片,在查找一些开源库之后,发现没特别好用的,或者说满足我需求的,就一不小心造了个轮子。
这是一个自定义控件,用来显示类似微信朋友圈或微博中那样的九宫格图片, GitHub地址 。效果图如下所示:
NineGridImageView-Demo 下载
设置图片之间的间隔
app:imgGap="4dp"
或 nineGridImageView.setGap(int gap);
设置显示样式
app:showStyle="fill"
或 nineGridImageView.setShowStyle(int style);
默认样式是网格样式: STYLE_GRID
:
另外一种样式是: STYLE_FILL
:
两者的区别见图或在Demo中体验。
当只有一张图的时候,可以设置其显示大小,不让其显示的过小:
app:singleImgSize="120dp"
或 nineGridImageView.setSingleImgSize(int singleImgSize)
compile 'com.jaeger.ninegridimageview:library:1.0.0'
<com.jaeger.ninegridimageview.NineGridImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="wrap_content" android:layout_margin="16dp" android:layout_width="match_parent" app:imgGap="4dp" app:showStyle="fill" app:singleImgSize="120dp"/>
nineGridImageView.setAdapter(nineGridViewAdapter);
下面是 NineGridImageViewAdapter.class
的源码:
public abstract class NineGridImageViewAdapter<T> { protected abstract void onDisplayImage(Context context, ImageView imageView, T t); protected void onItemImageClick(Context context, int index, List<T> list) { } protected ImageView generateImageView(Context context) { GridImageView imageView = new GridImageView(context); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); return imageView; } }
onDisplayImage(Context context, ImageView imageView, T t)
方法去设置显示图片的方式, 你可以使用 Picasso、Glide 、ImageLoader 或者其他的图片加载库,你也可以给 ImageView
设置一个占位图; onItemImageClick(Context context, int index, List<T> list)
方法,加上你自己的处理逻辑; ImageView
,你可以重写 generateImageView(Context context)
方法, 去生成自定的 ImageView
。 下面是一段示例代码:
private NineGridImageViewAdapter<Photo> mAdapter = new NineGridImageViewAdapter<Photo>() { @Override protected void onDisplayImage(Context context, ImageView imageView, Photo photo) { Picasso.with(context) .load(photo.getSmallUrl) .placeholder(R.drawable.ic_default_image) .into(imageView); } @Override protected ImageView generateImageView(Context context) { return super.generateImageView(context); } @Override protected void onItemImageClick(Context context, int index, List<Photo> photoList) { showBigPicture(context, photoList.get(index).getBigUrl()); } }; ... mNineGridImageView.setAdapter(mAdapter); ...
nineGridImageView.setImagesData(List<T> imageDataList);
第一次发布开源库,如果你有任何建议或问题,请及时联系我。如果你对本控件有优化,欢迎 fork 提 pr。
GitHub 传送门