Android瀑布流StaggeredGridView学习研究

       关于Android瀑布流控件，已经在江湖上，流传已久，超过两年时间了。网上也有很多相关学习资源，可以拿来研究学习。github上，就有两个资源，可以供学习者膜拜。

1.https://github.com/maurycyw/StaggeredGridView    此链接有图片加载功能，但功能相对简单些。

2.https://github.com/etsy/AndroidStaggeredGrid  提供的瀑布流功能强大，可以自定义瀑布流列数。

      本篇博客，就讲解etsy的源码为主了。首先看效果图：

首先明确StaggeredGridView中几个变量的定义:

    private int mColumnCount;  /*程序默认瀑布流的列数，默认情况，通过资源文件中的integers.xml 中grid_column_count定义*/
    private int mItemMargin;   /*程序默认瀑布流的的margin，通过layout文件activity_sgv.xml中的app:item_margin="8dp"定义*/
    private int mColumnWidth;   /*程序瀑布流的列宽变量*/
    private boolean mNeedSync;
    private int mColumnCountPortrait = DEFAULT_COLUMNS_PORTRAIT; /*程序瀑布流竖屏列数*/
    private int mColumnCountLandscape = DEFAULT_COLUMNS_LANDSCAPE;/*程序瀑布流横屏列数*/

一.瀑布流的列数定义好了后，如何计算每列的宽度？

     进入StaggeredGridActivity界面，瀑布流的UI效果已经出来了，主要看com.etsy.android.grid.StaggeredGridView的onMeasure方法，确定每一个view的尺度.

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mColumnCount <= 0) { 
            boolean isLandscape = isLandscape();
            mColumnCount = isLandscape ? mColumnCountLandscape : mColumnCountPortrait;
        }
        // our column width is the width of the listview 
        // minus it's padding
        // minus the total items margin
        // divided by the number of columns
        mColumnWidth = calculateColumnWidth(getMeasuredWidth());
       ... .... ... .... ... ....

    private int calculateColumnWidth(final int gridWidth) {
        final int listPadding = getRowPaddingLeft() + getRowPaddingRight();
        return (gridWidth - listPadding - mItemMargin * (mColumnCount + 1)) / mColumnCount;
    }

资源文件list_item_sample.xml其定义如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:id="@+id/panel_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:descendantFocusability="blocksDescendants"
    android:background="@drawable/recommend_app_bg">

    <com.etsy.android.grid.util.DynamicHeightTextView
        android:id="@+id/txt_line1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"/>

    <Button
        android:id="@+id/btn_go"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:text="Go" />

</FrameLayout>

    @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);
        }
    }

    private double getRandomHeightRatio() {
        return (mRandom.nextDouble() / 2.0) + 1.0; // height will be 1.0 - 1.5 the width
    }

    首先看效果图：

       从StaggeredGridActivity来看，就只有简单的一行代码，mGridView.addHeaderView(header)，便可以给list增加head了。瀑布流的SampleAdapter如何跟headview结合在一起呢？

     在mGridView.setAdapter(mAdapter)时，调用ExtendableListView的setAdapter方法，ExtendableListView继承于AbsListView。ExtendableListView.java 的setAdapter方法如下：  

    @Override
    public void setAdapter(final ListAdapter adapter) {
        if (mAdapter != null) {
            mAdapter.unregisterDataSetObserver(mObserver);
        }
        // use a wrapper list adapter if we have a header or footer
        if (mHeaderViewInfos.size() > 0 || mFooterViewInfos.size() > 0) {
            mAdapter = new HeaderViewListAdapter(mHeaderViewInfos, mFooterViewInfos, adapter);
        }
        else {
            mAdapter = adapter;
        }
     ... ...  ... ... ... ...

public class HeaderViewListAdapter implements WrapperListAdapter, Filterable

    public int getCount() {
        if (mAdapter != null) {
            return getFootersCount() + getHeadersCount() + mAdapter.getCount();
        } else {
            return getFootersCount() + getHeadersCount();
        }
    }

    public int getItemViewType(int position) {
        int numHeaders = getHeadersCount();
        if (mAdapter != null && position >= numHeaders) {
            int adjPosition = position - numHeaders;
            int adapterCount = mAdapter.getCount();
            if (adjPosition < adapterCount) {
                return mAdapter.getItemViewType(adjPosition);
            }
        }
        return AdapterView.ITEM_VIEW_TYPE_HEADER_OR_FOOTER;
    }

该函数的意思是：head和footer的位置，返回AdapterView.ITEM_VIEW_TYPE_HEADER_OR_FOOTER，普通的瀑布流item，将返回mAdapter.getItemViewType(adjPosition)。

     接着就分析getView函数了。任何一个Adapter，都要重写getView函数了，这是常识。

    public View getView(int position, View convertView, ViewGroup parent) {
        // Header (negative positions will throw an ArrayIndexOutOfBoundsException)
        int numHeaders = getHeadersCount();
        if (position < numHeaders) {
            return mHeaderViewInfos.get(position).view;
        }
        // Adapter
        final int adjPosition = position - numHeaders;
        int adapterCount = 0;
        if (mAdapter != null) {
            adapterCount = mAdapter.getCount();
            if (adjPosition < adapterCount) {
                return mAdapter.getView(adjPosition, convertView, parent);
            }
        }
        // Footer (off-limits positions will throw an ArrayIndexOutOfBoundsException)
        return mFooterViewInfos.get(adjPosition - adapterCount).view;
    }

     至此，就明白了Header和footer是如何被添加到瀑布流界面了。接下来，就来确定head和footer的高度宽度问题了。瀑布流中，从UI效果来看，有三种类型的type view，一个是head，一个是StaggeredGridView，另外一个是footer了。计算子view的尺寸，当然要关注onMeasureChild函数了。StaggeredGridView.java中的onMeasureChild函数定义如下：

    @Override
    protected void onMeasureChild(final View child, final LayoutParams layoutParams) {
        final int viewType = layoutParams.viewType;
        final int position = layoutParams.position;

        if (viewType == ITEM_VIEW_TYPE_HEADER_OR_FOOTER ||
                viewType == ITEM_VIEW_TYPE_IGNORE) {
            // for headers and weird ignored views
            super.onMeasureChild(child, layoutParams);
        }
        else {
 ... ...  ... ...  ... ...