很多项目都会有一个功能，就是仿朋友圈一样的动态显示，但这个里面有个问题就是图片的摆放是怎样的呢？用recycleView ,用GrideView?在实际过程中，根据不同项目要求不一样的，以上两种有些时候是不太方便做好图片摆放的，因此需要自定义一个，下面就来看看我的SuperGridLayout是如何处理不同张数图片，然后不同显示的吧。
首先是模拟数据，给列表添加的数据，一个HashMap，piece显示的是textview,picUrls是一个集合，存放图片地址的集合。我这里放的为aaaaaaaa,因为我后面用Glide加载图片有error方法，加载失败显示自定义的一个图片，仅仅只是给看个效果展示的。
privatevoidinitDatas() {
for(inti =0; i <6; i++) {
HashMap hashMap =newHashMap<>();
hashMap.put("piece","共"+ (i +1) +"张");
List list =newArrayList<>();
for(intj =0; j <= i; j++) {
list.add("aaaaaaaa"+ i);
}
hashMap.put("picUrls", list);
listDatas.add(hashMap);
}
testAdapter.setDatas(listDatas);
testAdapter.notifyDataSetChanged();
}
[java]view plaincopy
privatevoidinitView() {
mlistview = (ListView) findViewById(R.id.mlistview);
testAdapter =newTestAdapter(MainActivity.this);
testAdapter.setDatas(newArrayList>());
mlistview.setAdapter(testAdapter);
}
跟普通listview添加adapter一样的写法，没任何特别。
接下来就开始看自定义的SuperGridLayout。其实就是计算好尺寸，然后对每一张图片设置好尺寸，然后由于我的SuperGridLayout是继承RelativeLayout，也就是继承ViewGoup了，因此通过addView()方法给它添加自己的child,每一个child就是new ImageView()得来。child的位置也就是通过LayoutParams来设置margin值，主要就是top和left两个方位
LayoutParams params1 =newLayoutParams((int) unitWidth *3/2-2* px, (int) (unitWidth *3/2));
params1.topMargin =0;
params1.leftMargin =0;
ImageView imageView1 =newImageView(getContext());
imageView1.setLayoutParams(params1);
imgs.add(imageView1);
imageView1.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(context)
.load(data.get(0))
/*.placeholder(R.drawable.gridview_addpic)*/
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)// 设置本地缓存,缓存源文件和目标图像
.error(R.mipmap.ic_launcher)
.placeholder(R.mipmap.ic_launcher)
.into(imageView1);
imageView1.setOnClickListener(newView.OnClickListener() {
@Override
publicvoidonClick(View v) {
if(onItemClickListener !=null) {
onItemClickListener.onItemClick(data,0);
}
}
});
LayoutParams params2 =newLayoutParams((int) unitWidth *3/2-2* px, (int) (unitWidth *3/2));
params2.topMargin =0;
params2.leftMargin = (int) unitWidth *3/2;
ImageView imageView2 =newImageView(getContext());
imageView2.setLayoutParams(params2);
imgs.add(imageView2);
imageView2.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(context)
.load(data.get(1))
/*.placeholder(R.drawable.gridview_addpic)*/
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)// 设置本地缓存,缓存源文件和目标图像
.error(R.mipmap.ic_launcher)
.placeholder(R.mipmap.ic_launcher)
.into(imageView2);
imageView2.setOnClickListener(newView.OnClickListener() {
@Override
publicvoidonClick(View v) {
if(onItemClickListener !=null) {
onItemClickListener.onItemClick(data,1);
}
}
});
LayoutParams params3 =newLayoutParams((int) unitWidth *3/2-2* px, (int) (unitWidth *3/2));
params3.topMargin = (int) unitWidth *3/2+2* px;
params3.leftMargin =0;
ImageView imageView3 =newImageView(getContext());
imageView3.setLayoutParams(params3);
imgs.add(imageView3);
imageView3.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(context)
.load(data.get(2))
/*.placeholder(R.drawable.gridview_addpic)*/
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)// 设置本地缓存,缓存源文件和目标图像
.error(R.mipmap.ic_launcher)
.placeholder(R.mipmap.ic_launcher)
.into(imageView3);
imageView3.setOnClickListener(newView.OnClickListener() {
@Override
publicvoidonClick(View v) {
if(onItemClickListener !=null) {
onItemClickListener.onItemClick(data,2);
}
}
});
下面是一个接口回调，处理点击事件，点击时候返回listview的item对应的imags，是个集合，另外position是你点击images里面的第几张
privateOnItemClickListener onItemClickListener;
publicvoidsetOnItemClickListener(OnItemClickListener onItemClickListener) {
this.onItemClickListener = onItemClickListener;
}
/**
* 定义接口
*/
publicinterfaceOnItemClickListener {
voidonItemClick(ArrayList images,intposition);
}
最后就来看一下布局，布局就和普通的RelativeLayout一样，
android:id="@+id/superlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#ffffff"
android:visibility="visible"/>
最后看看效果吧，哈哈，
下面是完整demo地址，还不太明白可以下载看看，
http://download.csdn.NET/detail/greatdaocaoren/9916687
csdn项目地址：http://blog.csdn.net/greatdaocaoren/article/details/76476601
