`
ydbc
  • 浏览: 715873 次
  • 性别: Icon_minigender_1
  • 来自: 大连
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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


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

第一种：

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

main.xml

[java]view plaincopy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <LinearLayoutxmlns: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">
  8. <include
  9. android:id="@+id/progressbar"
  10. layout="@layout/loading"/>
  12. <com.jj.waterfall.LazyScrollView
  13. android:id="@+id/lazyscrollview"
  14. android:layout_width="fill_parent"
  15. android:layout_height="fill_parent"
  16. android:layout_weight="1"
  17. android:scrollbars="@null">
  19. <LinearLayout
  20. android:layout_width="fill_parent"
  21. android:layout_height="fill_parent"
  22. android:background="@android:color/background_light"
  23. android:orientation="horizontal"
  24. android:padding="2dp">
  26. <LinearLayout
  27. android:id="@+id/layout01"
  28. android:layout_width="fill_parent"
  29. android:layout_height="fill_parent"
  30. android:layout_weight="1"
  31. android:orientation="vertical">
  32. </LinearLayout>
  34. <LinearLayout
  35. android:id="@+id/layout02"
  36. android:layout_width="fill_parent"
  37. android:layout_height="fill_parent"
  38. android:layout_weight="1"
  39. android:orientation="vertical">
  40. </LinearLayout>
  42. <LinearLayout
  43. android:id="@+id/layout03"
  44. android:layout_width="fill_parent"
  45. android:layout_height="fill_parent"
  46. android:layout_weight="1"
  47. android:orientation="vertical">
  48. </LinearLayout>
  49. </LinearLayout>
  50. </com.jj.waterfall.LazyScrollView>
  52. <TextView
  53. android:id="@+id/loadtext"
  54. android:layout_width="fill_parent"
  55. android:layout_height="wrap_content"
  56. android:background="@drawable/loading_bg"
  57. android:gravity="center"
  58. android:padding="10dp"
  59. android:text="Loading..."
  60. android:textColor="@android:color/background_dark"/>
  62. </LinearLayout>

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

[java]view plaincopy
  1. @Override
  2. publicvoidonCreate(BundlesavedInstanceState){
  3. super.onCreate(savedInstanceState);
  4. InitView();
  6. assetManager=this.getAssets();
  7. //获取显示图片宽度
  8. Image_width=(getWindowManager().getDefaultDisplay().getWidth()-4)/3;
  9. try{
  10. image_filenames=Arrays.asList(assetManager.list("images"));//获取图片名称
  11. }catch(IOExceptione){
  12. e.printStackTrace();
  13. }
  15. addImage(current_page,count);
  17. }

[java]view plaincopy
  1. /***
  2. *加载更多
  3. *
  4. *@paramcurrent_page
  5. *当前页数
  6. *@paramcount
  7. *每页显示个数
  8. */
  9. privatevoidaddImage(intcurrent_page,intcount){
  10. for(intx=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. }
  18. }



[java]view plaincopy
  1. /***
  2. *添加imageview到layout
  3. *
  4. *@paramimagePath图片name
  5. *@paramj列
  6. *@parami行
  7. */
  8. publicvoidaddBitMapToImage(StringimagePath,intj,inti){
  9. ImageViewimageView=getImageview();
  10. asyncTask=newImageDownLoadAsyncTask(this,imagePath,imageView,
  11. Image_width);
  12. asyncTask.setProgressbar(progressbar);
  13. asyncTask.setLoadtext(loadtext);
  14. asyncTask.execute();
  16. imageView.setTag(i);
  17. if(j==0){
  18. layout01.addView(imageView);
  19. }elseif(j==1){
  20. layout02.addView(imageView);
  21. }elseif(j==2){
  22. layout03.addView(imageView);
  23. }
  25. imageView.setOnClickListener(newOnClickListener(){
  27. @Override
  28. publicvoidonClick(Viewv){
  29. Toast.makeText(MainActivity.this,
  30. "您点击了"+v.getTag()+"个Item",Toast.LENGTH_SHORT)
  31. .show();
  33. }
  34. });
  35. }

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

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

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

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

[java]view plaincopy
  1. /***
  2. *自定义ScrollView
  3. *
  4. *@authorzhangjia
  5. *
  6. */
  7. publicclassLazyScrollViewextendsScrollView{
  8. privatestaticfinalStringtag="LazyScrollView";
  9. privateHandlerhandler;
  10. privateViewview;
  12. publicLazyScrollView(Contextcontext){
  13. super(context);
  14. }
  16. publicLazyScrollView(Contextcontext,AttributeSetattrs){
  17. super(context,attrs);
  18. }
  20. publicLazyScrollView(Contextcontext,AttributeSetattrs,intdefStyle){
  21. super(context,attrs,defStyle);
  22. }
  24. //这个获得总的高度
  25. publicintcomputeVerticalScrollRange(){
  26. returnsuper.computeHorizontalScrollRange();
  27. }
  29. publicintcomputeVerticalScrollOffset(){
  30. returnsuper.computeVerticalScrollOffset();
  31. }
  33. /***
  34. *初始化
  35. */
  36. privatevoidinit(){
  38. this.setOnTouchListener(onTouchListener);
  39. handler=newHandler(){
  40. @Override
  41. publicvoidhandleMessage(Messagemsg){
  42. //processincomingmessageshere
  43. super.handleMessage(msg);
  44. switch(msg.what){
  45. case1:
  46. if(view.getMeasuredHeight()<=getScrollY()+getHeight()){
  47. if(onScrollListener!=null){
  48. onScrollListener.onBottom();
  49. }
  51. }elseif(getScrollY()==0){
  52. if(onScrollListener!=null){
  53. onScrollListener.onTop();
  54. }
  55. }else{
  56. if(onScrollListener!=null){
  57. onScrollListener.onScroll();
  58. }
  59. }
  60. break;
  61. default:
  62. break;
  63. }
  64. }
  65. };
  67. }
  69. OnTouchListeneronTouchListener=newOnTouchListener(){
  71. @Override
  72. publicbooleanonTouch(Viewv,MotionEventevent){
  73. //TODOAuto-generatedmethodstub
  74. switch(event.getAction()){
  75. caseMotionEvent.ACTION_DOWN:
  76. break;
  77. caseMotionEvent.ACTION_UP:
  78. if(view!=null&&onScrollListener!=null){
  79. handler.sendMessageDelayed(handler.obtainMessage(1),200);
  80. }
  81. break;
  83. default:
  84. break;
  85. }
  86. returnfalse;
  87. }
  89. };
  91. /**
  92. *获得参考的View，主要是为了获得它的MeasuredHeight，然后和滚动条的ScrollY+getHeight作比较。
  93. */
  94. publicvoidgetView(){
  95. this.view=getChildAt(0);
  96. if(view!=null){
  97. init();
  98. }
  99. }
  101. /**
  102. *定义接口
  103. *
  104. *@authoradmin
  105. *
  106. */
  107. publicinterfaceOnScrollListener{
  108. voidonBottom();
  110. voidonTop();
  112. voidonScroll();
  113. }
  115. privateOnScrollListeneronScrollListener;
  117. publicvoidsetOnScrollListener(OnScrollListeneronScrollListener){
  118. this.onScrollListener=onScrollListener;
  119. }
我们还需要一个类，异步加载实现，我想有开发经验的朋友一定用过好多次了，这里就不展示代码了，想看的朋友，可以点击下载（如果认为还不错的话，请您一定要表示一下哦.）

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

效果图：


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

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

我们动态添加列.

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

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

[java]view plaincopy
  1. /***
  2. *initview
  3. */
  4. publicvoidinitView(){
  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);
  13. item_width=getWindowManager().getDefaultDisplay().getWidth()/column;
  14. linearLayouts=newArrayList<LinearLayout>();
  16. //添加列到waterfall_container
  17. for(inti=0;i<column;i++){
  18. LinearLayoutlayout=newLinearLayout(this);
  19. LinearLayout.LayoutParamsitemParam=newLinearLayout.LayoutParams(
  20. item_width,LayoutParams.WRAP_CONTENT);
  21. layout.setOrientation(LinearLayout.VERTICAL);
  22. layout.setLayoutParams(itemParam);
  23. linearLayouts.add(layout);
  24. waterfall_container.addView(layout);
  25. }
  27. }
[java]view plaincopy
  1. /***
  2. *获取imageview
  3. *
  4. *@paramimageName
  5. *@return
  6. */
  7. publicImageViewgetImageview(StringimageName){
  8. BitmapFactory.Optionsoptions=getBitmapBounds(imageName);
  9. //创建显示图片的对象
  10. ImageViewimageView=newImageView(this);
  11. LayoutParamslayoutParams=newLayoutParams(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. returnimageView;
  22. }
  24. /***
  25. *
  26. *获取相应图片的BitmapFactory.Options
  27. */
  28. publicBitmapFactory.OptionsgetBitmapBounds(StringimageName){
  29. inth,w;
  30. BitmapFactory.Optionsoptions=newBitmapFactory.Options();
  31. options.inJustDecodeBounds=true;//只返回bitmap的大小，可以减少内存使用，防止OOM.
  32. InputStreamis=null;
  33. try{
  34. is=assetManager.open(file+"/"+imageName);
  35. }catch(IOExceptione){
  36. e.printStackTrace();
  37. }
  38. BitmapFactory.decodeStream(is,null,options);
  39. returnoptions;
  41. }

在这里我稍微修改了下，为要显示的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

分享到：
| 我的Java开发学习之旅------>Java字符编码 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics