带描述文字的瀑布流

现在UI设计瀑布流很火啊，貌似国内Android界，蘑菇街上是第一个尝试的。后来我又发现了一些地方也用到了，比如爱画报（http://aihuabao.cn）,世纪佳缘。

其中后面两个是图文结合的，我觉得比较好。下面就是我在《爱画报》官网上截的图。

不多说，先上图，描述下我想做个什么样的效果。下面是网页上的效果，就是不单纯的是图片的堆积，而是在图片下面还带文字说明。

下面是截图，特意截了个美女，哈哈

貌似android业界蘑菇街最早用瀑布流效果，但感觉蘑菇街的瀑布流效果界面只有纯粹的图片效果，不好看。

于是我想在Android下也做出上面那样的效果。

我的思路是这样的：

1.自定义一个FallwView.

FallView布局：

最外层一个ScrollView

里层一个大LinearLayout, ll_main 里面的元素水平摆放

ll_main里面放三个LinearLayout，每个LinearLayout里面的元素又是水平摆放。

对于这个FlowView其实是想通过代码的方式动态设置里面的内容的 比如主LinearLayout里面有多少列子LinearLayout，不是固定写在xml里面的，

而是在代码里面动态addView进去。但还不知道怎么去实现。

2.自定义一个上面是图片下面是说明文字的MyImage的控件

准备好一些MyImage，然后循环addView进到每个LinearLayou中去。

能力有限，东拼西凑做出了下面这么个效果。

。

这实现的效果还很粗糙，大家一起来完善吧！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

下面贴出代码：

package com.tomyzhou.pull;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.ScrollView;
import android.widget.TextView;

public class FallDemoActivity extends Activity {
	private ScrollView sv_main;  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        	
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         sv_main = new ScrollView(this);
         
         List<View> viewList = new ArrayList<View>();
         for(int i = 0;i<60;i++){
        	 if(i%2 == 0){
        		 View view = View.inflate(this,R.layout.myimage,null);
        		 ImageView iv_image = (ImageView) view.findViewById(R.id.iv_image);
        		 iv_image.setImageResource(R.drawable.a1);
        		 TextView tv_image = (TextView) view.findViewById(R.id.tv_image);
        		 tv_image.setText("第"+i+"个图的描述");
        		 viewList.add(view);
        	 }if(i%2 == 1){
        		 View view = View.inflate(this,R.layout.myimage,null);
        		 ImageView iv_image = (ImageView) view.findViewById(R.id.iv_image);
        		 iv_image.setImageResource(R.drawable.a14);
        		 TextView tv_image = (TextView) view.findViewById(R.id.tv_image);
        		 tv_image.setText("第"+i+"个图的描述");
        		 viewList.add(view);
        	 }
         }
         
         FallView fv = new FallView(this, viewList);
         sv_main.addView(fv);
         setContentView(sv_main);
         
    }
}

package com.tomyzhou.pull;

import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

import android.content.Context;
import android.graphics.Canvas;
import android.view.View;
import android.widget.LinearLayout;

//自定义瀑布流控件
public class FallView extends LinearLayout {

	private List<LinearLayout> list;
	private LinearLayout ll_list1;
	private LinearLayout ll_list2;
	private LinearLayout ll_list3; // 三列

	/**
	 * 
	 * @param context
	 * @param viewList
	 *            需要显示的图片列表
	 */
	public FallView(Context context, List<View> viewList) {
		super(context);
		list = new ArrayList<LinearLayout>();
		View view = View.inflate(context, R.layout.layout_fall, this);

		ll_list1 = (LinearLayout) view.findViewById(R.id.ll_list1);
		ll_list2 = (LinearLayout) view.findViewById(R.id.ll_list2);
		ll_list3 = (LinearLayout) view.findViewById(R.id.ll_list3);

		initView(viewList);
	}

	// 添加每个LinearLayout里面的图片
	/**
	 * @param number
	 *            每个LinearLayout里面Image的个数
	 */
	private void initView(List<View> viewList) {
		System.out.println(viewList.size());
		for (int i = 0; i < viewList.size(); i++) {
			View view = viewList.get(i);
			if (i % 3 == 0) {
				ll_list1.addView(view);
			}
			if (i % 3 == 1) {
				ll_list2.addView(view);
			}
			if (i % 3 == 2) {
				ll_list3.addView(view);
			}
		}
	}

}

package com.tomyzhou.pull;

import android.content.Context;
import android.view.View;

public class MyImage extends View{

	public MyImage(Context context) {
		super(context);
	}

	
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/ll_list1"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#aaaaaa"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_list2"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#aaaaaa"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_list3"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="#aaaaaa"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

myimage

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/a12" />


    <TextView
        android:id="@+id/tv_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textSize="14sp"
        android:text="描述文字" />

</LinearLayout>

本来想把代码文件上传下来，却发现传不了附件。有需要的加Q吧：893434467，欢迎一起交流！