安卓仿蘑菇街瀑布流demo

83 阅读 0 评论 55 点赞

我是靠谱客的博主傻傻芹菜，最近开发中收集的这篇文章主要介绍安卓仿蘑菇街瀑布流demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

这是蘑菇街的页面，看上去像gridview，但是每个图片item高度都有不同，这样的风格显得有点儿洋气是吧。其实这并不是用gridview实现，用linearlayout实现布局即可。

首先自定义一个scrollview，然后往这个scrollview里添加一个linearlayout布局，再往linearlayout里面动态添加列布局，本例添加3列。

布局xml：

异步图片下载类：

public class ImageDownLoadAsyncTask extends AsyncTask<Void, Void, Bitmap> {
private String imagePath;
private ImageView imageView;
private static final String ALBUM_PATH = "/sdcard/pb";
private Context context;
private AssetManager assetManager;
private int Image_width;// 显示图片的宽度
private final String file = "images/";
private ProgressBar progressbar;
private TextView loadtext;

/**
* 构造方法
*
* @param context
* @param imagePath
* @param imageView
*/
public ImageDownLoadAsyncTask(Context context, String imagePath,
ImageView imageView, int Image_width) {
this.imagePath = imagePath;
this.imageView = imageView;
this.context = context;
assetManager = this.context.getAssets();
this.Image_width = Image_width;
}

public void setLoadtext(TextView loadtext) {
this.loadtext = loadtext;
}

public void setProgressbar(ProgressBar progressbar) {
this.progressbar = progressbar;
}

@Override
protected Bitmap doInBackground(Void... params) {

try {
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = false;// 这里只返回bitmap的大小
InputStream inputStream = assetManager.open(file + imagePath);
Bitmap bitmap = BitmapFactory.decodeStream(inputStream, null,
options);
return bitmap;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

/*
* (non-Javadoc)
*
* @see android.os.AsyncTask#onPostExecute(java.lang.Object)
*/
@Override
protected void onPostExecute(Bitmap drawable) {
// TODO Auto-generated method stub
super.onPostExecute(drawable);
if (drawable != null) {
LayoutParams layoutParams = imageView.getLayoutParams();
int height = drawable.getHeight();// 获取图片的高度.
int width = drawable.getWidth();// 获取图片的宽度
layoutParams.height = (height * Image_width) / width;

imageView.setLayoutParams(layoutParams);
imageView.setImageBitmap(drawable);
}
if (progressbar.isShown() || loadtext.isShown()) {
progressbar.setVisibility(View.GONE);
loadtext.setVisibility(View.GONE);
}

}

@Override
protected void onPreExecute() {
super.onPreExecute();
if (!loadtext.isShown()) {
loadtext.setVisibility(View.VISIBLE);
}

}
}

主Activity：获取asset文件夹下图片总数，布局分为3列，类似数组方式将图片逐个添加至imageview布局里面。本例每页显示图片数量和列数都可动态修改。页面上滑至底部获取更多图片展示下一页布局

public class MainActivity extends Activity implements OnScrollListener {

private int colum = 3; // 图片总共4列显示

private int count = 20; // 每页显示的图片个数

private int curPage = 0; // 当前页码

private int itemWidth = 0; // 图片宽度
private List<LinearLayout> linearLayouts; // 列布局

private LazyScrollView lazyscrollview;

private ProgressBar loading_bar; // 加载进度条
private TextView loading_tv; // 加载图片提示语
private LinearLayout img_ll; // 图片显示布局

private AssetManager assetManager;
private List<String> image_filenames; // 图片集合
private final String file = "images";
private ImageDownLoadAsyncTask asyncTask;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
assetManager = this.getAssets();
try {
image_filenames = Arrays.asList(assetManager.list(file));
} catch (IOException e) {
e.printStackTrace();
}

addImage(curPage, count);
}

private void initView() {
// TODO Auto-generated method stub
lazyscrollview = (LazyScrollView) findViewById(R.id.scroll_container);
lazyscrollview.getView();
lazyscrollview.setOnScrollListener(this);
loading_bar = (ProgressBar) findViewById(R.id.progressbar);
loading_tv = (TextView) findViewById(R.id.loading_mesg_tv);
img_ll = (LinearLayout) findViewById(R.id.image_ll);
linearLayouts = new ArrayList<LinearLayout>();
itemWidth = getWindowManager().getDefaultDisplay().getWidth() / colum; // 获取每列图片的宽度
for (int i = 0; i < colum; i++) {
LinearLayout ll = new LinearLayout(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
itemWidth, LayoutParams.WRAP_CONTENT);
ll.setOrientation(LinearLayout.VERTICAL);
ll.setLayoutParams(params);
linearLayouts.add(ll);
img_ll.addView(ll);
}
}

// 获取相应的BitmapFactory.Options
private BitmapFactory.Options getBitmapBounds(String filename) {
BitmapFactory.Options option = new BitmapFactory.Options();
option.inJustDecodeBounds = true; // 只返回bitmap的大小等信息，防止oom
InputStream ins = null;
try {
ins = assetManager.open((file) + "/" + filename);
} catch (IOException e) {
e.printStackTrace();
}

BitmapFactory.decodeStream(ins, null, option);// 解码图片
return option;
}

// 获取显示图片的对象
private ImageView getImageView(String imgName) {
ImageView imageview = new ImageView(this);
BitmapFactory.Options option = getBitmapBounds(imgName);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.FILL_PARENT);
imageview.setLayoutParams(params);
imageview.setMinimumHeight(option.outHeight);
imageview.setMinimumWidth(option.outWidth);
imageview.setPadding(2, 0, 2, 2);
imageview.setBackgroundResource(R.drawable.image_border);
if (option != null)
option = null;
return imageview;
}

/*
* 添加相应的图片imageview imageName: 图片名称 j：列 i：行
*/
private void addBitMapToImage(String imageName, int j, int i) {

ImageView imageview = getImageView(imageName);
asyncTask = new ImageDownLoadAsyncTask(this, imageName, imageview,
itemWidth);
asyncTask.setLoadtext(loading_tv);
asyncTask.setProgressbar(loading_bar);
asyncTask.execute();
imageview.setTag(i);
linearLayouts.get(j).addView(imageview);
imageview.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "您点击了弟" + v.getTag() + "个图片",
Toast.LENGTH_SHORT).show();
}
});
}

// 加载更多
private void addImage(int current_page, int count) {
int j = 0;
int imageCount = image_filenames.size();
for (int i = curPage * count; i < imageCount
&& i < (curPage + 1) * count; i++) {
addBitMapToImage(image_filenames.get(i), j, i);
j++;
if (j >= colum)
j = 0;
}
}

@Override
public void onBottom() {
// TODO Auto-generated method stub
addImage(++curPage, count);
}

@Override
public void onTop() {
// TODO Auto-generated method stub

}

@Override
public void onScroll() {
// TODO Auto-generated method stub

}