很多項目都會有一個功能，就是仿朋友圈一樣的動態顯示，但這個里面有個問題就是圖片的擺放是怎樣的呢？用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
