android瀑布流效果（仿蘑菇街）

Android 转载分享（10） 

我们还是来看一款示例：（蘑菇街）

         

看起来很像我们的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接口，对滑动到底部进行监听.

效果图：

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

下面我介绍另外一种做法：（相对上面更灵活）

我们动态添加列.

配置文件就不贴了，和上面那例子一样，只不过里面值包含一个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添加一个边框，这样看起来效果不错，我们动态滑动的同时， 然后图片陆续的填充边框.蘑菇街就是这种效果哦.

效果图：

               

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

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

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

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

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

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

图片下载

示例二源码（第一种方式）

示例一源码（第二种方式）

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

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

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

 

• 上一篇Eclipse背景设置
• 下一篇Android 个人学习笔记之---SAX解析XML文件（有一个坑爹的问题）