瀑布流算法

一、效果图如下

二、情况分析

由于是多列ListView，所以参考使用了MultiColumnListView来进行，但是显示的是左右并排对齐的效果，要想实现左右不对齐的效果，有两种情况：

1.图片等比例压缩，图片下面有关于图片的文字性描述，这样由于文字的长度不同，自然而然的有了瀑布流的效果

2.图片等比例压缩，图片下面显示的控件大小也是相同的，犹如上面的情况

三、实现第二种情况的算法

经过本人的多次测试，现有以下几种参考方案：

方案1：

LinearLayout.LayoutParams params; if (position == 0) { params = new LinearLayout.LayoutParams(parentWidth, (int) (1.3 * parentWidth)); } else { params = new LinearLayout.LayoutParams(parentWidth, (int) (1.1 * parentWidth)); } holder.image.setLayoutParams(params);

ImageLoader.getInstance().displayImage(bean.getImage(), holder.image, Options.getListOptions(), new ImageLoadingListener() { @Override public void onLoadingStarted(String imageUri, View view) { } @Override public void onLoadingFailed(String imageUri, View view, FailReason failReason) { } @Override public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { ImageView imageView = (ImageView) view; imageView.setImageBitmap(loadedImage);//显示图片 } @Override public void onLoadingCancelled(String imageUri, View view) { } });

缺陷：偶见图片被拉伸的情况，适用于资源图片是正方形的情况

方案2：

 ImageLoader.getInstance().displayImage(bean.getImage(), holder.image, Options.getListOptions(), new ImageLoadingListener() { @Override public void onLoadingStarted(String imageUri, View view) { } @Override public void onLoadingFailed(String imageUri, View view, FailReason failReason) { } @Override public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { ImageView imageView = (ImageView) view; int width = loadedImage.getWidth(); int height = loadedImage.getHeight(); float ratio = width / parentWidth; int scaleHeight = (int) (height / ratio); LinearLayout.LayoutParams params; if(position /2 == 0){ params = new LinearLayout.LayoutParams(parentWidth, (int) (1.1 * scaleHeight)); }else{ params = new LinearLayout.LayoutParams(parentWidth, (int) (1 * scaleHeight)); }

 imageView.setLayoutParams(params); imageView.setImageBitmap(loadedImage);//显示图片 } @Override public void onLoadingCancelled(String imageUri, View view) { } });

缺陷：由于回收重用的问题，图片的位置会变化

方案3：

ImageLoader.getInstance().displayImage(bean.getImage(), holder.image, Options.getListOptions(), new ImageLoadingListener() { @Override public void onLoadingStarted(String imageUri, View view) { } @Override public void onLoadingFailed(String imageUri, View view, FailReason failReason) { } @Override public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { ImageView imageView = (ImageView) view; int width = loadedImage.getWidth(); int height = loadedImage.getHeight(); float ratio = width / parentWidth; int scaleHeight = (int) (height / ratio); LinearLayout.LayoutParams params; if (position == 0) { params = new LinearLayout.LayoutParams(parentWidth, (int) (1.1 * parentWidth)); } else { params = new LinearLayout.LayoutParams(parentWidth, (int) (1 * scaleHeight)); } imageView.setLayoutParams(params); imageView.setImageBitmap(loadedImage);//显示图片 } @Override public void onLoadingCancelled(String imageUri, View view) { } });

比较完美

方案4：

ImageLoader.getInstance().displayImage(bean.getImage(), holder.image, Options.getListOptions(), new ImageLoadingListener() { @Override public void onLoadingStarted(String imageUri, View view) { } @Override public void onLoadingFailed(String imageUri, View view, FailReason failReason) { } @Override public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { ImageView imageView = (ImageView) view; int width = loadedImage.getWidth(); int height = loadedImage.getHeight(); float ratio = width / parentWidth; int scaleHeight = (int) (height / ratio); LinearLayout.LayoutParams params; params = new LinearLayout.LayoutParams(parentWidth, (int) (1 * scaleHeight)); if (position == 0) { params.topMargin = 20; } imageView.setLayoutParams(params); imageView.setImageBitmap(loadedImage);//显示图片 } @Override public void onLoadingCancelled(String imageUri, View view) { } });

比较完美

综上所述，可选方案1、3、4，目前项目中使用的是方案4。