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

csuhanshuai

2013-05-11

关注关注

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

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

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

第一种：

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

main.xml

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/background_light"
android:orientation="vertical">


<include
android:id="@+id/progressbar"
layout="@layout/loading"/>


<com.jj.waterfall.LazyScrollView
android:id="@+id/lazyscrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scrollbars="@null">


<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/background_light"
android:orientation="horizontal"
android:padding="2dp">


<LinearLayout
android:id="@+id/layout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>


<LinearLayout
android:id="@+id/layout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>


<LinearLayout
android:id="@+id/layout03"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</com.jj.waterfall.LazyScrollView>


<TextView
android:id="@+id/loadtext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/loading_bg"
android:gravity="center"
android:padding="10dp"
android:text="Loading..."
android:textColor="@android:color/background_dark"/>


</LinearLayout>

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

@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
InitView();


assetManager=this.getAssets();
//获取显示图片宽度
Image_width=(getWindowManager().getDefaultDisplay().getWidth()-4)/3;
try{
image_filenames=Arrays.asList(assetManager.list("images"));//获取图片名称
}catch(IOExceptione){
e.printStackTrace();
}


addImage(current_page,count);


}

/***
*加载更多
*
*@paramcurrent_page
*当前页数
*@paramcount
*每页显示个数
*/
privatevoidaddImage(intcurrent_page,intcount){
for(intx=current_page*count;x<(current_page+1)*count
&&x<image_filenames.size();x++){
addBitMapToImage(image_filenames.get(x),y,x);
y++;
if(y>=3)
y=0;
}


}

/***
*添加imageview到layout
*
*@paramimagePath图片name
*@paramj列
*@parami行
*/
publicvoidaddBitMapToImage(StringimagePath,intj,inti){
ImageViewimageView=getImageview();
asyncTask=newImageDownLoadAsyncTask(this,imagePath,imageView,
Image_width);
asyncTask.setProgressbar(progressbar);
asyncTask.setLoadtext(loadtext);
asyncTask.execute();


imageView.setTag(i);
if(j==0){
layout01.addView(imageView);
}elseif(j==1){
layout02.addView(imageView);
}elseif(j==2){
layout03.addView(imageView);
}


imageView.setOnClickListener(newOnClickListener(){


@Override
publicvoidonClick(Viewv){
Toast.makeText(MainActivity.this,
"您点击了"+v.getTag()+"个Item",Toast.LENGTH_SHORT)
.show();


}
});
}

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

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

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

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

/***
*自定义ScrollView
*
*@authorzhangjia
*
*/
publicclassLazyScrollViewextendsScrollView{
privatestaticfinalStringtag="LazyScrollView";
privateHandlerhandler;
privateViewview;


publicLazyScrollView(Contextcontext){
super(context);
}


publicLazyScrollView(Contextcontext,AttributeSetattrs){
super(context,attrs);
}


publicLazyScrollView(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);
}


//这个获得总的高度
publicintcomputeVerticalScrollRange(){
returnsuper.computeHorizontalScrollRange();
}


publicintcomputeVerticalScrollOffset(){
returnsuper.computeVerticalScrollOffset();
}


/***
*初始化
*/
privatevoidinit(){


this.setOnTouchListener(onTouchListener);
handler=newHandler(){
@Override
publicvoidhandleMessage(Messagemsg){
//processincomingmessageshere
super.handleMessage(msg);
switch(msg.what){
case1:
if(view.getMeasuredHeight()<=getScrollY()+getHeight()){
if(onScrollListener!=null){
onScrollListener.onBottom();
}


}elseif(getScrollY()==0){
if(onScrollListener!=null){
onScrollListener.onTop();
}
}else{
if(onScrollListener!=null){
onScrollListener.onScroll();
}
}
break;
default:
break;
}
}
};


}


OnTouchListeneronTouchListener=newOnTouchListener(){


@Override
publicbooleanonTouch(Viewv,MotionEventevent){
//TODOAuto-generatedmethodstub
switch(event.getAction()){
caseMotionEvent.ACTION_DOWN:
break;
caseMotionEvent.ACTION_UP:
if(view!=null&&onScrollListener!=null){
handler.sendMessageDelayed(handler.obtainMessage(1),200);
}
break;


default:
break;
}
returnfalse;
}


};


/**
*获得参考的View，主要是为了获得它的MeasuredHeight，然后和滚动条的ScrollY+getHeight作比较。
*/
publicvoidgetView(){
this.view=getChildAt(0);
if(view!=null){
init();
}
}


/**
*定义接口
*
*@authoradmin
*
*/
publicinterfaceOnScrollListener{
voidonBottom();


voidonTop();


voidonScroll();
}


privateOnScrollListeneronScrollListener;


publicvoidsetOnScrollListener(OnScrollListeneronScrollListener){
this.onScrollListener=onScrollListener;
}

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

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

效果图：

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

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

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

我们动态添加列.

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

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

/***
*initview
*/
publicvoidinitView(){
setContentView(R.layout.main);
lazyScrollView=(LazyScrollView)findViewById(R.id.waterfall_scroll);
lazyScrollView.getView();
lazyScrollView.setOnScrollListener(this);
waterfall_container=(LinearLayout)findViewById(R.id.waterfall_container);
progressbar=(LinearLayout)findViewById(R.id.progressbar);
loadtext=(TextView)findViewById(R.id.loadtext);


item_width=getWindowManager().getDefaultDisplay().getWidth()/column;
linearLayouts=newArrayList<LinearLayout>();


//添加列到waterfall_container
for(inti=0;i<column;i++){
LinearLayoutlayout=newLinearLayout(this);
LinearLayout.LayoutParamsitemParam=newLinearLayout.LayoutParams(
item_width,LayoutParams.WRAP_CONTENT);
layout.setOrientation(LinearLayout.VERTICAL);
layout.setLayoutParams(itemParam);
linearLayouts.add(layout);
waterfall_container.addView(layout);
}


}

/***
*获取imageview
*
*@paramimageName
*@return
*/
publicImageViewgetImageview(StringimageName){
BitmapFactory.Optionsoptions=getBitmapBounds(imageName);
//创建显示图片的对象
ImageViewimageView=newImageView(this);
LayoutParamslayoutParams=newLayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.FILL_PARENT);
imageView.setLayoutParams(layoutParams);
//
imageView.setMinimumHeight(options.outHeight);
imageView.setMinimumWidth(options.outWidth);
imageView.setPadding(2,0,2,2);
imageView.setBackgroundResource(R.drawable.image_border);
if(options!=null)
options=null;
returnimageView;
}


/***
*
*获取相应图片的BitmapFactory.Options
*/
publicBitmapFactory.OptionsgetBitmapBounds(StringimageName){
inth,w;
BitmapFactory.Optionsoptions=newBitmapFactory.Options();
options.inJustDecodeBounds=true;//只返回bitmap的大小，可以减少内存使用，防止OOM.
InputStreamis=null;
try{
is=assetManager.open(file+"/"+imageName);
}catch(IOExceptione){
e.printStackTrace();
}
BitmapFactory.decodeStream(is,null,options);
returnoptions;


}

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

效果图：

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