android 瀑布流效果(仿蘑菇街)

时间:2024-04-20 14:33:27

我们还是来看一款示例:(蘑菇街)

android 瀑布流效果(仿蘑菇街)         android 瀑布流效果(仿蘑菇街)

看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此.就如我们的方角图形,斯通见惯后也就出现了圆角.下面我简单介绍下实现方法.

第一种:

我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout,然后把获取到的图片add里面就ok了.

main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:background="@android:color/background_light"
  6. android:orientation="vertical" >
  7. <include
  8. android:id="@+id/progressbar"
  9. layout="@layout/loading" />
  10. <com.jj.waterfall.LazyScrollView
  11. android:id="@+id/lazyscrollview"
  12. android:layout_width="fill_parent"
  13. android:layout_height="fill_parent"
  14. android:layout_weight="1"
  15. android:scrollbars="@null" >
  16. <LinearLayout
  17. android:layout_width="fill_parent"
  18. android:layout_height="fill_parent"
  19. android:background="@android:color/background_light"
  20. android:orientation="horizontal"
  21. android:padding="2dp" >
  22. <LinearLayout
  23. android:id="@+id/layout01"
  24. android:layout_width="fill_parent"
  25. android:layout_height="fill_parent"
  26. android:layout_weight="1"
  27. android:orientation="vertical" >
  28. </LinearLayout>
  29. <LinearLayout
  30. android:id="@+id/layout02"
  31. android:layout_width="fill_parent"
  32. android:layout_height="fill_parent"
  33. android:layout_weight="1"
  34. android:orientation="vertical" >
  35. </LinearLayout>
  36. <LinearLayout
  37. android:id="@+id/layout03"
  38. android:layout_width="fill_parent"
  39. android:layout_height="fill_parent"
  40. android:layout_weight="1"
  41. android:orientation="vertical" >
  42. </LinearLayout>
  43. </LinearLayout>
  44. </com.jj.waterfall.LazyScrollView>
  45. <TextView
  46. android:id="@+id/loadtext"
  47. android:layout_width="fill_parent"
  48. android:layout_height="wrap_content"
  49. android:background="@drawable/loading_bg"
  50. android:gravity="center"
  51. android:padding="10dp"
  52. android:text="Loading..."
  53. android:textColor="@android:color/background_dark" />
  54. </LinearLayout>

在这里因为图片很多就把图片放在assets文件中,如果想从网上拉取数据,自己写额外部分.

  1. @Override
  2. public void onCreate(Bundle savedInstanceState) {
  3. super.onCreate(savedInstanceState);
  4. InitView();
  5. assetManager = this.getAssets();
  6. // 获取显示图片宽度
  7. Image_width = (getWindowManager().getDefaultDisplay().getWidth() - 4) / 3;
  8. try {
  9. image_filenames = Arrays.asList(assetManager.list("images"));// 获取图片名称
  10. } catch (IOException e) {
  11. e.printStackTrace();
  12. }
  13. addImage(current_page, count);
  14. }
  1. /***
  2. * 加载更多
  3. *
  4. * @param current_page
  5. *            当前页数
  6. * @param count
  7. *            每页显示个数
  8. */
  9. private void addImage(int current_page, int count) {
  10. for (int x = current_page * count; x < (current_page + 1) * count
  11. && x < image_filenames.size(); x++) {
  12. addBitMapToImage(image_filenames.get(x), y, x);
  13. y++;
  14. if (y >= 3)
  15. y = 0;
  16. }
  17. }
  1. /***
  2. * 添加imageview 到layout
  3. *
  4. * @param imagePath 图片name
  5. * @param j 列
  6. * @param i 行
  7. */
  8. public void addBitMapToImage(String imagePath, int j, int i) {
  9. ImageView imageView = getImageview();
  10. asyncTask = new ImageDownLoadAsyncTask(this, imagePath, imageView,
  11. Image_width);
  12. asyncTask.setProgressbar(progressbar);
  13. asyncTask.setLoadtext(loadtext);
  14. asyncTask.execute();
  15. imageView.setTag(i);
  16. if (j == 0) {
  17. layout01.addView(imageView);
  18. } else if (j == 1) {
  19. layout02.addView(imageView);
  20. } else if (j == 2) {
  21. layout03.addView(imageView);
  22. }
  23. imageView.setOnClickListener(new OnClickListener() {
  24. @Override
  25. public void onClick(View v) {
  26. Toast.makeText(MainActivity.this,
  27. "您点击了" + v.getTag() + "个Item", Toast.LENGTH_SHORT)
  28. .show();
  29. }
  30. });
  31. }

注释已经很明确,相信大家都看的明白,我就不过多解释了.

因为瀑布流不是一个规则的试图,所以我们不可能用listview那种“底部加一个按钮试图,点击加载更多,这样看起来很难看”。因此我们最好滑动到低端自动加载.

我们这里用到的自定义ScrollView,因为我们要实现下滑分页,这里要判断是否要进行分页等操作.

LazyScrollView.Java (这个法很实用哦.)

  1. /***
  2. * 自定义ScrollView
  3. *
  4. * @author zhangjia
  5. *
  6. */
  7. public class LazyScrollView extends ScrollView {
  8. private static final String tag = "LazyScrollView";
  9. private Handler handler;
  10. private View view;
  11. public LazyScrollView(Context context) {
  12. super(context);
  13. }
  14. public LazyScrollView(Context context, AttributeSet attrs) {
  15. super(context, attrs);
  16. }
  17. public LazyScrollView(Context context, AttributeSet attrs, int defStyle) {
  18. super(context, attrs, defStyle);
  19. }
  20. // 这个获得总的高度
  21. public int computeVerticalScrollRange() {
  22. return super.computeHorizontalScrollRange();
  23. }
  24. public int computeVerticalScrollOffset() {
  25. return super.computeVerticalScrollOffset();
  26. }
  27. /***
  28. * 初始化
  29. */
  30. private void init() {
  31. this.setOnTouchListener(onTouchListener);
  32. handler = new Handler() {
  33. @Override
  34. public void handleMessage(Message msg) {
  35. // process incoming messages here
  36. super.handleMessage(msg);
  37. switch (msg.what) {
  38. case 1:
  39. if (view.getMeasuredHeight() <= getScrollY() + getHeight()) {
  40. if (onScrollListener != null) {
  41. onScrollListener.onBottom();
  42. }
  43. } else if (getScrollY() == 0) {
  44. if (onScrollListener != null) {
  45. onScrollListener.onTop();
  46. }
  47. } else {
  48. if (onScrollListener != null) {
  49. onScrollListener.onScroll();
  50. }
  51. }
  52. break;
  53. default:
  54. break;
  55. }
  56. }
  57. };
  58. }
  59. OnTouchListener onTouchListener = new OnTouchListener() {
  60. @Override
  61. public boolean onTouch(View v, MotionEvent event) {
  62. // TODO Auto-generated method stub
  63. switch (event.getAction()) {
  64. case MotionEvent.ACTION_DOWN:
  65. break;
  66. case MotionEvent.ACTION_UP:
  67. if (view != null && onScrollListener != null) {
  68. handler.sendMessageDelayed(handler.obtainMessage(1), 200);
  69. }
  70. break;
  71. default:
  72. break;
  73. }
  74. return false;
  75. }
  76. };
  77. /**
  78. * 获得参考的View,主要是为了获得它的MeasuredHeight,然后和滚动条的ScrollY+getHeight作比较。
  79. */
  80. public void getView() {
  81. this.view = getChildAt(0);
  82. if (view != null) {
  83. init();
  84. }
  85. }
  86. /**
  87. * 定义接口
  88. *
  89. * @author admin
  90. *
  91. */
  92. public interface OnScrollListener {
  93. void onBottom();
  94. void onTop();
  95. void onScroll();
  96. }
  97. private OnScrollListener onScrollListener;
  98. public void setOnScrollListener(OnScrollListener onScrollListener) {
  99. this.onScrollListener = onScrollListener;
  100. }

我们还需要一个类,异步加载实现,我想有开发经验的朋友一定用过好多次了,这里就不展示代码了,想看的朋友,可以点击下载(如果认为还不错的话,请您一定要表示一下哦.)

对了,忘记一点,我们还需要对MainActivity 中的lazyScrollView实现OnScrollListener接口,对滑动到底部进行监听.

效果图:

android 瀑布流效果(仿蘑菇街)

/**************************************************************************/

下面我介绍另外一种做法:(相对上面更灵活)

我们动态添加列.

配置文件就不贴了,和上面那例子一样,只不过里面值包含一个LinearLayout布局.

在这里我们动态添加列布局.

  1. /***
  2. * init view
  3. */
  4. public void initView() {
  5. setContentView(R.layout.main);
  6. lazyScrollView = (LazyScrollView) findViewById(R.id.waterfall_scroll);
  7. lazyScrollView.getView();
  8. lazyScrollView.setOnScrollListener(this);
  9. waterfall_container = (LinearLayout) findViewById(R.id.waterfall_container);
  10. progressbar = (LinearLayout) findViewById(R.id.progressbar);
  11. loadtext = (TextView) findViewById(R.id.loadtext);
  12. item_width = getWindowManager().getDefaultDisplay().getWidth() / column;
  13. linearLayouts = new ArrayList<LinearLayout>();
  14. // 添加列到waterfall_container
  15. for (int i = 0; i < column; i++) {
  16. LinearLayout layout = new LinearLayout(this);
  17. LinearLayout.LayoutParams itemParam = new LinearLayout.LayoutParams(
  18. item_width, LayoutParams.WRAP_CONTENT);
  19. layout.setOrientation(LinearLayout.VERTICAL);
  20. layout.setLayoutParams(itemParam);
  21. linearLayouts.add(layout);
  22. waterfall_container.addView(layout);
  23. }
  24. }
  1. /***
  2. * 获取imageview
  3. *
  4. * @param imageName
  5. * @return
  6. */
  7. public ImageView getImageview(String imageName) {
  8. BitmapFactory.Options options = getBitmapBounds(imageName);
  9. // 创建显示图片的对象
  10. ImageView imageView = new ImageView(this);
  11. LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
  12. LayoutParams.FILL_PARENT);
  13. imageView.setLayoutParams(layoutParams);
  14. //
  15. imageView.setMinimumHeight(options.outHeight);
  16. imageView.setMinimumWidth(options.outWidth);
  17. imageView.setPadding(2, 0, 2, 2);
  18. imageView.setBackgroundResource(R.drawable.image_border);
  19. if (options != null)
  20. options = null;
  21. return imageView;
  22. }
  23. /***
  24. *
  25. * 获取相应图片的 BitmapFactory.Options
  26. */
  27. public BitmapFactory.Options getBitmapBounds(String imageName) {
  28. int h, w;
  29. BitmapFactory.Options options = new BitmapFactory.Options();
  30. options.inJustDecodeBounds = true;// 只返回bitmap的大小,可以减少内存使用,防止OOM.
  31. InputStream is = null;
  32. try {
  33. is = assetManager.open(file + "/" + imageName);
  34. } catch (IOException e) {
  35. e.printStackTrace();
  36. }
  37. BitmapFactory.decodeStream(is, null, options);
  38. return options;
  39. }

在这里我稍微修改了下,为要显示的iamgeview添加一个边框,这样看起来效果不错,我们动态滑动的同时, 然后图片陆续的填充边框.蘑菇街就是这种效果哦.

效果图:

android 瀑布流效果(仿蘑菇街)        android 瀑布流效果(仿蘑菇街)       android 瀑布流效果(仿蘑菇街)

显示成4列,因此图片有点小,仔细看的话,你应该可以看到有好多边框,然后图片陆续的填充边框.这种效果感觉对上面那个用户体验更友好些.

最后简单总结下:针对瀑布流最好使用第二种方法,这种可扩展性比较大,哪天老大说四列太丑了,改成三列,那么我们只需要把column改成3就ok了,简单吧。

注意:由于图片量太多,占用空间太大,因此我将图片上传到网上,获取源码的同学下载该文件放到项目的assets文件夹下,然后运行就ok了.

如果有不足之处,请留言指出,

想要源码请留邮箱.Thanks for you 。

由于比较繁忙,我将源码上传网上,如有需要,自行下载,如有问题,请留言.(记得下载图片导入项目里面)

图片下载

示例二源码(第一种方式)

示例一源码(第二种方式)

哈哈,如果对您又帮助的话,记得赞一个哦.

原帖地址:http://blog.****.net/jj120522/article/details/8022545

另一个开源框架(EOE):http://www.eoeandroid.com/thread-157448-1-1.html