瀑布流算法
一、效果图如下
二、情况分析
由于是多列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。