瀑布流的实现

Xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >
<company.com.StaggeredGridView.StaggeredGridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:column_count_landscape="2"
    app:column_count_portrait="3"
    app:item_margin="8dp"/>
</RelativeLayout>

MainActivity中的代码：

package company.com.staggeredgrid;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.SparseArray;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.TextView;
import android.widget.Toast;

import java.util.Random;

import company.com.StaggeredGridView.ExtendableListView;
import company.com.StaggeredGridView.StaggeredGridView;
public class MainActivity extends Activity implements AdapterView.OnItemClickListener{
    private StaggeredGridView staggeredGridView;
    private final Random mRandom=new Random();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);
        initView();
        setAdapter();
        AddListener();

    }

    private void AddListener() {
   staggeredGridView.setOnItemClickListener(this);
    }

    private void setAdapter() {
        staggeredGridView.setAdapter(new MyAdapter());
    }

    private void initView() {
       staggeredGridView= (StaggeredGridView)findViewById(R.id.grid_view);

    }
   //添加瀑布流的点击事件
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Toast.makeText(MainActivity.this,"点击了"+position,Toast.LENGTH_SHORT).show();


    }
//自定义适配器，为瀑布上添加文本
    private class MyAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return DATA.length;
        }

        @Override
        public Object getItem(int position) {
            return DATA[position];
        }
        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = new TextView(MainActivity.this);
                //设置view的长宽属性
                ExtendableListView.LayoutParams lp=new ExtendableListView.LayoutParams(ExtendableListView.LayoutParams.WRAP_CONTENT, ExtendableListView.LayoutParams.WRAP_CONTENT);
                convertView.setLayoutParams(lp);
            }
            TextView view = (TextView) convertView;
            view.setText(DATA[position]);
            view.setBackgroundColor(COLOR[position % 5]);
            view.setTextSize(TypedValue.COMPLEX_UNIT_SP, 15);
            view.setGravity(Gravity.BOTTOM);
            view.setTextColor(Color.WHITE);
            ExtendableListView.LayoutParams lp= (ExtendableListView.LayoutParams) view.getLayoutParams();
            lp.height= (int) (getPositionRatio(position)*200);
            view.setLayoutParams(lp);
            return view;
        }

    }
    //瀑布流的背景颜色
    private static final int[] COLOR = new int[] {
            0xff33b5e5, 0xffaa66cc, 0xff99cc00, 0xffffbb33, 0xffff4444
    };
    //瀑布流上显示的文本
    private static final String[] DATA = new String[] {
            "Love", "Love", "Love", "Love", "Love",
            "Love", "Love", "Love", "Love", "Love", "ALove",
            "Love", "Love", "Love", "Love", "Love",
            "Love", "name", "love", "Anthoriro", "love",
            "name", "name", "you", "Armenian String", "name",
            "Asadero", "Asiago", "Love", "Autun", "Love", "Baby Swiss",
            "Love", "you", "Love", "you", "for", "much", "Banon",
            "love", "Basing", "Love", "Love", "love",
            "love", "much", "for"
    };
    //此方法用在计算项高，根据位置得到一个随机的比例
    private static final SparseArray<Double> sPositionHeightRatios = new SparseArray<Double>();
    private double getPositionRatio(final int position) {
        double ratio = sPositionHeightRatios.get(position, 0.0);
        if (ratio == 0) {
            ratio = getRandomHeightRatio();
            sPositionHeightRatios.append(position, ratio);
        }
        return ratio;
    }
    private double getRandomHeightRatio() {
        return (mRandom.nextDouble() / 2.0) + 1.0; // height will be 1.0 - 1.5 the width
    }
}

因为StaggeredGridView也继承自AbsListView，所以和ListView、GridView的用法完全一样。

完整项目中的util中提供了两个DynamicHeightImageview和DynamicHeightTextView，这两个视图就是如果指定了宽高比，会在绘制的时候保持该比例，具体代码如下：

@Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        if (mHeightRatio > 0.0) {  
            // set the image views size  
            int width = MeasureSpec.getSize(widthMeasureSpec);  
            int height = (int) (width * mHeightRatio);  
            setMeasuredDimension(width, height);  
        }  
        else {  
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
        }  
    } 

点击此处下载完整Demo;