類似朋友圈或微博的動態界面，NineGridImageView（九宮格圖片控件）
來自： http://laobie.github.io/android/2016/03/06/nine-grid-iamge-view-libaray.html
最近在公司項目重構一個類似朋友圈或微博的動態界面，其中需要顯示九宮格圖片，在查找一些開源庫之后，發現沒特別好用的，或者說滿足我需求的，就一不小心造了個輪子。
這是一個自定義控件，用來顯示類似微信朋友圈或微博中那樣的九宮格圖片， GitHub地址 。效果圖如下所示：
Demo App
特性
-
設置圖片之間的間隔
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)
用法
1. 首先添加依賴
compile 'com.jaeger.ninegridimageview:library:1.0.0'
2. 在布局文件中添加 NineGridImageView， 如下所示：
<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"/>
3. 為 NineGridImageView 設置 NineGridImageViewAdapter
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;
}
}
- T 是你圖片的數據類型, 你可以簡單的使用 String 類型也可以是你自定義的類型；
- 你必須重寫 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);
...
4. 給 NineGridImageView 設置圖片數據：
nineGridImageView.setImagesData(List<T> imageDataList);
參考資料
最后
第一次發布開源庫，如果你有任何建議或問題，請及時聯系我。如果你對本控件有優化，歡迎 fork 提 pr。
</div> 本文由用戶 w00t 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！