自定义 ViewGroup 实现微信朋友圈九宫格图片控件
最近项目里有个类似微信朋友圈的九图控件的需求，Github 找了一下，发现都不太满足需求，我需要单张图片的时候可以按照图片宽高比列在一定范围内自适应，而大多开源项目单张图片也是一个小正方形，所以，干脆自己动手写一个
项目源码
具体自定义NineImageLayout过程，可以查看NineImageLayout。
效果图如下：
主要功能如下：
1：单张图片的时候支持按照图片宽高比列在设定区域内自适应
2：
Adapter方式绑定数据和 UI3：图片点击事件回调
4：设置图片间隔大小
5：自由通过 Glide 设置 ImageView 圆角效果
使用
1:自定义属性如下
<resources>
<declare-styleable name="NineImageLayout">
<attr name="nine_layoutWidth" format="dimension"/>
<attr name="nine_singleImageWidth" format="dimension" />
<attr name="nine_imageGap" format="dimension" />
</declare-styleable>
</resources>
2：布局中使用自定义 NineImageLayout
<com.cyq.customview.nineLayout.view.NineImageLayout
android:id="@+id/nine_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_title"
android:layout_marginTop="20dp"
app:nine_imageGap="4dp"
app:nine_layoutWidth="300dp"
app:nine_singleImageWidth="180dp" />
3：Adapter 方式绑定数据和 UI
其中Glide.asBitmap是为了计算图片宽高，如果后台有返回图片的宽高可以省略这一步，直接setSingleImage(width, height,imageView)。
Ps:如果可以建议后台返回图片宽高，这样可以避免单张图片的时候控件高度跳屏，比如我限制单张图片宽高在·200dp·范围，要展示宽1000px高500px的时候，在图片未加载完成时控件宽高为200dp，图片加载完成后高度变为100dp，会有一个不好的用户体验，所以建议上传图片的时候记录图片宽高信息。
nineImageLayout.setAdapter(new NineImageAdapter() {
@Override
protected int getItemCount() {
return mData.size();
}
@Override
protected View createView(LayoutInflater inflater, ViewGroup parent, int i) {
return inflater.inflate(R.layout.item_img_layout, parent, false);
}
@Override
protected void bindView(View view, final int i) {
final ImageView imageView = view.findViewById(R.id.iv_img);
Glide.with(mContext).load(mData.get(i)).into(imageView);
if (mData.size() == 1) {
Glide.with(mContext)
.asBitmap()
.load(mData.get(0))
.into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap bitmap, Transition<? super Bitmap> transition) {
final int width = bitmap.getWidth();
final int height = bitmap.getHeight();
nineImageLayout.setSingleImage(width, height,imageView);
}
});
Glide.with(mContext).load(mData.get(0)).into(imageView);
} else {
Glide.with(mContext).load(mData.get(i)).into(imageView);
}
}
@Override
public void OnItemClick(int i, View view) {
super.OnItemClick(position, view);
Toast.makeText(mContext, "position:" + mData.get(i), Toast.LENGTH_SHORT).show();
}
});
列表里面使用
1：页面放一个RecyclerView
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".nineLayout.NineImageLayoutActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
2：item 布局如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:textColor="@android:color/black"
android:textSize="18sp" />
<com.cyq.customview.nineLayout.view.NineImageLayout
android:id="@+id/nine_image_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_title"
android:layout_marginTop="20dp"
app:nine_imageGap="4dp"
app:nine_layoutWidth="300dp"
app:nine_singleImageWidth="180dp" />
</RelativeLayout>
3：Activity 中构造一下测试数据，大致代码如下
public class NineImageLayoutActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private MyAdapter mAdapter;
private Random random;
private final String URL_IMG = "http://q3x62hkt1.bkt.clouddn.com/banner/58f57dfa5bb73.jpg";
private final String URL_IMG_2 = "http://q3x62hkt1.bkt.clouddn.com/timg.jpeg";
private List<List<String>> mList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_nine_image_layout);
random = new Random();
List<String> testList = new ArrayList<>();
testList.add(URL_IMG_2);
for (int i = 0; i < 100; i++) {
int count = i % 9 + 1;
List<String> list = new ArrayList<>();
for (int j = 0; j < count; j++) {
list.add(URL_IMG);
}
if (i % 8 == 0) {
mList.add(testList);
}
mList.add(list);
}
mRecyclerView = findViewById(R.id.recyclerview);
mAdapter = new MyAdapter(mList, this);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setAdapter(mAdapter);
}
}
4: MyAdapter 中设置数据
import java.util.List;
/**
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论