在網上能找到的大部分資料中的瀑布流效果都是單純的照片實現，現在我來實現一個帶文字標題的。效果如下：
每個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;
@Override
public void setTag(Object tag) {
// TODO Auto-generated method stub
super.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);
}
@Override
public boolean onLongClick(View v) {
return true;
}
private Handler mHandler;
public void setHandler(Handler handler){
mHandler=handler;
}
@Override
public 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;
@Override
protected 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 stub
LinearLayout 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>() {
@Override
public void onLoadCompleted(View container, String uri,
Bitmap bitmap, BitmapDisplayConfig config,
BitmapLoadFrom from) {
// TODO Auto-generated method stub
if (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 block
e.printStackTrace();
}
}
@Override
public void onLoadFailed(View container, String uri,
Drawable drawable) {
// TODO Auto-generated method stub
}
});
}
private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
// TODO Auto-generated method stub
super.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來實現瀑布流效果，有時間再更新。