Android AndroidStaggeredGrid 开源项目

AndroidStaggeredGrid是一个支持多列并且每一行的item大小不一，交错排列的GridView。官网的说明是：An Android staggered grid view which supports multiple columns with rows of varying sizes。也不知道我翻译的正不正确，看看图你就知道它实现的是什么效果了！

AndroidStaggeredGrid 支持Android 2.3及2.3以上版本，如果需要可以修改源码以支持更低Android SDK版本。

AndroidStaggeredGrid 地址：https://github.com/etsy/AndroidStaggeredGrid

AndroidStaggeredGrid 使用

1、首先从官网下载Zip文件，下载地址：https://github.com/etsy/AndroidStaggeredGrid，下载完成解压缩后如下所示：

2、导入library和sample到eclipse中

导入的时候不是很方便，这里我直接把我导入成功后的项目打成Zip文件，以供下载，见文章最后附件部分

3、AndroidStaggeredGrid 用法

在布局文件中引用，如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.etsy.android.grid.StaggeredGridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:item_margin="8dp"
        app:column_count_portrait="2"
        app:column_count_landscape="3" />

</FrameLayout>

AndroidStaggeredGrid 用法跟GridView大体差不多，如下：

mGridView = (StaggeredGridView) findViewById(R.id.grid_view);

        LayoutInflater layoutInflater = getLayoutInflater();

        View header = layoutInflater.inflate(R.layout.list_item_header_footer, null);
        View footer = layoutInflater.inflate(R.layout.list_item_header_footer, null);
        TextView txtHeaderTitle = (TextView) header.findViewById(R.id.txt_title);
        TextView txtFooterTitle =  (TextView) footer.findViewById(R.id.txt_title);
        txtHeaderTitle.setText("THE HEADER!");
        txtFooterTitle.setText("THE FOOTER!");

        mGridView.addHeaderView(header);
        mGridView.addFooterView(footer);
        mAdapter = new SampleAdapter(this, R.id.txt_line1);

        // do we have saved data?
        if (savedInstanceState != null) {
            mData = savedInstanceState.getStringArrayList(SAVED_DATA_KEY);
        }

        if (mData == null) {
            mData = SampleData.generateSampleData();
        }

        for (String data : mData) {
            mAdapter.add(data);
        }

        mGridView.setAdapter(mAdapter);

        mGridView.setOnScrollListener(this);

我们可以通过addHeaderView和addFooterView给它添加头部和尾部，还可以通过 setOnScrollListener 给它注册滚动监听。

通过给它注册OnScrollListener，我们就可以实现滚动翻页的效果了，代码如下：

 @Override
    public void onScrollStateChanged(final AbsListView view, final int scrollState) {
        Log.d(TAG, "onScrollStateChanged:" + scrollState);
    }

    @Override
    public void onScroll(final AbsListView view, final int firstVisibleItem, final int visibleItemCount, final int totalItemCount) {
        Log.d(TAG, "onScroll firstVisibleItem:" + firstVisibleItem +
                            " visibleItemCount:" + visibleItemCount +
                            " totalItemCount:" + totalItemCount);
        // our handling
        if (!mHasRequestedMore) {
            int lastInScreen = firstVisibleItem + visibleItemCount;
            if (lastInScreen >= totalItemCount) {
                Log.e(TAG, "onScroll lastInScreen - so load more");
                mHasRequestedMore = true;
                onLoadMoreItems();
            }
        }
    }

    private void onLoadMoreItems() {
        final ArrayList<String> sampleData = SampleData.generateSampleData();
        for (String data : sampleData) {
            mAdapter.add(data);
        }
        // stash all the data in our backing store
        mData.addAll(sampleData);
        // notify the adapter that we can update now
        mAdapter.notifyDataSetChanged();
        mHasRequestedMore = false;
    }

官方示例Sample下载：http://download.csdn.net/detail/fx_sky/6766057