自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现，现在我来实现一个带文字标题的。效果如下：

每个item都是由图片和文字标题两部分组成。

布局方式为ScrollView里面嵌套一个水平方向的LinearLayout，里面再嵌套两个竖直方向的LinearLayout，然后判断竖直方向的两个LinearLayout的高度，向比较低的那个Linearlayout里面添加item.

下面是代码

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.waterfall.MainActivity" >  <LinearLayout      android:id="@+id/llCcasecade"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:background="@android:color/white"      android:orientation="horizontal" >        <LinearLayout            android:id="@+id/casecade1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:orientation="vertical"            android:padding="2dp" >        </LinearLayout>        <LinearLayout            android:id="@+id/casecade2"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1"            android:orientation="vertical"            android:padding="2dp" >        </LinearLayout>    </LinearLayout></ScrollView>

自定义FlowView

public class FlowView extends ImageView implements View.OnClickListener,View.OnLongClickListener {private Context mContext;public Bitmap bitmap;private int columnIndex;private int rowIndex;private Handler viewHandler;private String tag;@Overridepublic void setTag(Object tag) {// TODO Auto-generated method stubsuper.setTag(tag);this.tag =  (String) tag;}public FlowView(Context c, AttributeSet attrs, int defStyle) {super(c, attrs, defStyle);this.mContext = c;Init();}public FlowView(Context c, AttributeSet attrs) {super(c, attrs);this.mContext = c;Init();}public FlowView(Context c) {super(c);this.mContext = c;Init();}private void Init() {setOnClickListener(this);this.setOnLongClickListener(this);setAdjustViewBounds(true);}@Overridepublic boolean onLongClick(View v) {return true;}private Handler mHandler;public void setHandler(Handler handler){mHandler=handler;}@Overridepublic void onClick(View v) {Message msg=new Message();Bundle bun=new Bundle();bun.putString("tag", tag);msg.what=1;msg.setData(bun);mHandler.sendMessage(msg);}public int getColumnIndex() {return columnIndex;}public void setColumnIndex(int columnIndex) {this.columnIndex = columnIndex;}public int getRowIndex() {return rowIndex;}public void setRowIndex(int rowIndex) {this.rowIndex = rowIndex;}public Handler getViewHandler() {return viewHandler;}public FlowView setViewHandler(Handler viewHandler) {this.viewHandler = viewHandler;return this;}}

然后是

public class MainActivity extends Activity {private LinearLayout lvCasecade1;private LinearLayout lvCasecade2;private Display display;private int casecadeWidth;private ArrayList<BaoBei> mBaoBeiList = new ArrayList<BaoBei>();private LinearLayout[] mRelativeLayout;private BitmapUtils mBitmapUtils;private int mJ, mPosition;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);display = this.getWindowManager().getDefaultDisplay();casecadeWidth = display.getWidth() / 2;initData();initView();}private void initData() {if (Environment.getExternalStorageState() == Environment.MEDIA_MOUNTED) {File file = new File(Environment.getExternalStorageDirectory()+ "/imageCache");if (!file.exists()) {file.mkdirs();}mBitmapUtils = new BitmapUtils(this, file.getAbsolutePath());} else {mBitmapUtils = new BitmapUtils(this, null);}for (int i = 0; i < BaseData.imageUris.length; i++) {mBaoBeiList.add(new BaoBei(BaseData.titles[i], BaseData.imageUris[i]));};}private void initView() {lvCasecade1 = (LinearLayout) findViewById(R.id.casecade1);lvCasecade2 = (LinearLayout) findViewById(R.id.casecade2);LayoutParams lp1 = lvCasecade1.getLayoutParams();lp1.width = casecadeWidth;lvCasecade1.setLayoutParams(lp1);LayoutParams lp2 = lvCasecade2.getLayoutParams();lp2.width = casecadeWidth;lvCasecade2.setLayoutParams(lp2);if (mBaoBeiList.size() > mPosition) {addImgToCasecade(mBaoBeiList.get(mPosition), mJ, mPosition);}}private void addImgToCasecade(final BaoBei bb, int j, final int i) {// TODO Auto-generated method stubLinearLayout lv = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.item, null);if (j == 0) {lvCasecade1.addView(lv);} else if (j == 1) {lvCasecade2.addView(lv);} final FlowView im = (FlowView) lv.findViewById(R.id.item_iv);im.setHandler(mHandler);final TextView item_title = (TextView) lv.findViewById(R.id.item_title);mBitmapUtils.display(im, bb.getImage(), new BitmapLoadCallBack<View>() {@Overridepublic void onLoadCompleted(View container, String uri,Bitmap bitmap, BitmapDisplayConfig config,BitmapLoadFrom from) {// TODO Auto-generated method stubif (im != null && bb.getImage() != null) {im.setImageBitmap(bitmap);item_title.setText(bb.getName());}try {int height1 = lvCasecade1.getHeight();int height2 = lvCasecade2.getHeight();LogUtils.e("height1:" + height1);LogUtils.e("height2:" + height2);if (height1 <= height2) {mJ = 0;} else {mJ = 1;}mPosition++;if(mBaoBeiList.size()>mPosition){addImgToCasecade(mBaoBeiList.get(mPosition), mJ, mPosition);}// Thread.sleep(2000);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}@Overridepublic void onLoadFailed(View container, String uri,Drawable drawable) {// TODO Auto-generated method stub}});}private Handler mHandler = new Handler() {@Overridepublic void handleMessage(Message msg) {// TODO Auto-generated method stubsuper.handleMessage(msg);switch (msg.what) {case 1:Bundle ggItemBundle = msg.getData();if (ggItemBundle != null) {String address = ggItemBundle.getString("tag");Intent intent = new Intent(MainActivity.this,TaoBaoActivity.class);intent.putExtra("address", address);startActivity(intent);}break;default:break;}}};}

顺便提一下，关于图片的加载内存处理什么的就交给xUtils了。

如果是需要实现纯图片的瀑布流效果可以参考郭霖大神的博客：http://blog.csdn.net/guolin_blog/article/details/10470797

其实还有一个一种方法，就是通过RecyclerView来实现瀑布流效果，有时间再更新。