我们在QQ发表说说图片的时候,发现所发图片张数不同,布局也是不同的。今天在做类似的功能时候,研究了一下;
一张图片的时候:按图片比例显示;
二张图片的时候:每张图片宽带占屏宽1/2,高度为宽度大小;
三张图片的时候:每张图片宽带占屏宽1/3,高度为宽度大小;
四张图片的时候:每张图片宽带占屏宽1/2,高度为宽度大小,两行;
五张图片的时候:每张图片宽带占屏宽1/3,高度为宽度大小,两行;
六张图片的时候:每张图片宽带占屏宽1/3,高度为宽度大小,两行;
七张图片的时候:每张图片宽带占屏宽1/3,高度为宽度大小,三行;
如此类推,九张为上限。
根据以上分析,选用gridview完成;
以下是gridview的自定义adpater:
//自定义适配器
public class Adapter_GridView extends BaseAdapter {
// 上下文对象
private Context context;
// 图片数组
private List<String> url;
private LayoutParams layoutParams;
private int mImageWidth2;
private int mImageWidth3;
public Adapter_GridView(Context context, List<String> url) {
this.context = context;
this.url = url;
WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mImageWidth3 = (int) ((outMetrics.widthPixels -12* outMetrics.density)/3);
mImageWidth2 = (int) ((outMetrics.widthPixels -12* outMetrics.density)/2);
// layoutParams = new GridView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// layoutParams.setMargins(1,1,1,1);//4个参数按顺序分别是左上右下
}
public int getCount() {
return url == null ? 0 : url.size();
}
public Object getItem(int item) {
return item;
}
public long getItemId(int id) {
return id;
}
// 创建View方法
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
switch (url.size()) {
case 1:
imageView.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.WRAP_CONTENT,GridView.LayoutParams.WRAP_CONTENT));// 设置ImageView对象布局
break;
case 2:
imageView.setLayoutParams(new GridView.LayoutParams(mImageWidth2,mImageWidth2));
break;
case 4:
imageView.setLayoutParams(new GridView.LayoutParams(mImageWidth2,mImageWidth2));
break;
default:
imageView.setLayoutParams(new GridView.LayoutParams(mImageWidth3,mImageWidth3));// 设置ImageView对象布局
break;
}
imageView.setAdjustViewBounds(false);// 设置边界对齐
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);// 设置刻度的类型
// imageView.setPadding(4, 4, 4, 4);// 设置间距
} else {
imageView = (ImageView) convertView;
}
ImageLoader.getInstance().displayImage(url.get(position), imageView, SoftApplication.imageOptions);
return imageView;
}
}
上效果图:
注意事项:
1.由于gridview控件是放在listview上的,所以gridview要重写
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { }
2.listview的adpater中,先要根据图片的张数,提前设置好gridview的行数;
if (xiaowo.getUrl() != null) {
switch (xiaowo.getUrl().size()) {
case 1:
holder.gridView1.setNumColumns(1);
break;
case 2:
holder.gridView1.setNumColumns(2);
break;
case 4:
holder.gridView1.setNumColumns(2);
break;
default:
holder.gridView1.setNumColumns(3);
break;
}
holder.gridView1.setVisibility(View.VISIBLE);
holder.gridView1.setAdapter(new Adapter_GridView(ctx, xiaowo
.getUrl()));
}else{
holder.gridView1.setVisibility(View.GONE);
}