Android中使用RecyclerView和CardView实现瀑布流效果(StaggeredGrid)

来源：互联网发布：下载商城软件编辑：程序博客网时间：2024/06/04 19:41

在Android 5.0 中引入了Material Design的设计理念，并加入了RecyclerView和CardView两个控件。本文就讲解如何使用者两个控件来实现瀑布流效果(StaggeredGrid)。

先上效果图

效果图

RecyclerView

RecyclerView 是一个更加高级和灵活的ListView。它简化了显示和处理数据的过程，比如，为positioning item提供了layout 的管理，为item删除和添加提供了默认的动画。当然，你也可以自定义这些动画。

RecyclerView

LayoutManger决定RecyclerView中元素的位置和何时重用那些不再显示的item。LayoutManager通过避免创建不必要的view和不调用费时的findViewById() 来提高效率。
RecyclerView提供了三种内建的LayoutManger：

LinearLayoutManager 垂直或者水平的可以滑动的list
GridLayoutManager 以grid的方式显示
StaggeredGridLayoutManager 以瀑布流的形式显示（本文重点 (⊙v⊙)嗯）

动画

RecyclerView是有默认的添加删除item的动画的，如果想要自定义这些动画，继承RecyclerView.ItemAnimator 这个类，并使用RecyclerView.setItemAnimator() 这个方法。

例子

activity_recycler_view.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" android:layout_width="match_parent"    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    tools:context="com.example.daniel.test.activities.RecyclerViewActivity">    <android.support.v7.widget.RecyclerView        android:id="@+id/my_recycler_view"        android:scrollbars="vertical"        android:layout_width="match_parent"        android:layout_height="match_parent"/></RelativeLayout>

view_holder.xml

<?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:orientation="horizontal">    <TextView        android:id="@+id/tv_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <ImageView        android:id="@+id/iv_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></LinearLayout>

Activity

public class RecyclerViewActivity extends AppCompatActivity {    private RecyclerView mRecyclerView;    private RecyclerView.Adapter mAdapter;    private RecyclerView.LayoutManager mLayoutManager;    private String[] myDataset = {"1", "2", "3", "4", "5", "6", "7"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_recycler_view);        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);        // use this setting to improve performance if you know that changes        // in content do not change the layout size of the RecyclerView        mRecyclerView.setHasFixedSize(true);        // use a linear layout manager        mLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);        mRecyclerView.setLayoutManager(mLayoutManager);        // specify an adapter (see also next example)        mAdapter = new MyAdapter(myDataset);        mRecyclerView.setAdapter(mAdapter);    }}

这里的Adaper是一个数据和UI之间的桥梁，把数据显示在UI上。
下面一个例子是一个简单的Adapter实现。

class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {    private String[] mDataset;    // Provide a reference to the views for each data item    // Complex data items may need more than one view per item, and    // you provide access to all the views for a data item in a view holder    public static class ViewHolder extends RecyclerView.ViewHolder {        // each data item is just a string in this case        public ImageView mImageView;        public TextView mTextView;        public ViewHolder(View v) {            super(v);            mTextView = (TextView) v.findViewById(R.id.tv_title);            mImageView = (ImageView) v.findViewById(R.id.iv_title);        }    }    // Provide a suitable constructor (depends on the kind of dataset)    public MyAdapter(String[] myDataset) {        mDataset = myDataset;    }    // Create new views (invoked by the layout manager)    @Override    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,                                                   int viewType) {        // create a new view        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_holder, parent, false);        // set the view's size, margins, paddings and layout parameters        //TO-DO        ViewHolder vh = new ViewHolder(v);        return vh;    }    // Replace the contents of a view (invoked by the layout manager)    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        // - get element from your dataset at this position        // - replace the contents of the view with that element        holder.mImageView.setImageResource(R.mipmap.ic_launcher);        holder.mTextView.setText(mDataset[position]);    }    // Return the size of your dataset (invoked by the layout manager)    @Override    public int getItemCount() {        return mDataset.length;    }}

关于RecyclerView.Adapter 的说明:

以下三个方法是必须要实现的。
- onCreateViewHolder 返回每一个Item的ViewHolder
- onBindViewHolder 给Item中的控件赋值
- getItemCount 返回Item的个数

效果

效果图

CardView

CardView继承自FrameLayout，利用它可以使你的信息在卡片中显示，并且在不同的平台中具有一致性。
利用以下的属性可以自定义CardView的外观：
card_view:cardCornerRadius 设置圆角的半径
CardView.setRadius 在代码中设置圆角的半径
card_view:cardBackgroundColor 设置卡片的背景

例子

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:card_view="http://schemas.android.com/apk/res-auto"    ... >    <!-- A CardView that contains a TextView -->    <android.support.v7.widget.CardView        xmlns:card_view="http://schemas.android.com/apk/res-auto"        android:id="@+id/card_view"        android:layout_gravity="center"        android:layout_width="200dp"        android:layout_height="200dp"        card_view:cardCornerRadius="4dp">        <TextView            android:id="@+id/info_text"            android:layout_width="match_parent"            android:layout_height="match_parent" />    </android.support.v7.widget.CardView></LinearLayout>

依赖的包

RecyclerView 和 CardView是v7 Support Libraries的一部分，所以需要在你app的Gradle dependencies 里加入以下内容：

dependencies {
…
compile ‘com.android.support:cardview-v7:21.0.+’
compile ‘com.android.support:recyclerview-v7:21.0.+’
}

实现瀑布流效果(StaggeredGrid)

效果

效果图

activity_recycler_view.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" android:layout_width="match_parent"    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    tools:context="com.example.daniel.test.activities.RecyclerViewActivity">    <android.support.v7.widget.RecyclerView        android:id="@+id/my_recycler_view"        android:scrollbars="vertical"        android:layout_width="match_parent"        android:layout_height="match_parent"/></RelativeLayout>

Activity

public class RecyclerViewActivity extends AppCompatActivity {    private RecyclerView mRecyclerView;    private RecyclerView.Adapter mAdapter;    private RecyclerView.LayoutManager mLayoutManager;    private String[] myDataset = {"1", "2", "3", "4", "5", "6", "7","1", "2", "3", "4", "5", "6", "7"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_recycler_view);        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);        // use this setting to improve performance if you know that changes        // in content do not change the layout size of the RecyclerView        mRecyclerView.setHasFixedSize(true);        // use a linear layout manager        mLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);        mRecyclerView.setLayoutManager(mLayoutManager);        // specify an adapter (see also next example)        mAdapter = new MyAdapter(myDataset);        mRecyclerView.setAdapter(mAdapter);    }}class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {    private String[] mDataset;    // Provide a reference to the views for each data item    // Complex data items may need more than one view per item, and    // you provide access to all the views for a data item in a view holder    public static class ViewHolder extends RecyclerView.ViewHolder {        // each data item is just a string in this case        public ImageView mImageView;        public TextView mTextView;        public ViewHolder(View v) {            super(v);            mTextView = (TextView) v.findViewById(R.id.tv_title);            mImageView = (ImageView) v.findViewById(R.id.iv_title);        }    }    // Provide a suitable constructor (depends on the kind of dataset)    public MyAdapter(String[] myDataset) {        mDataset = myDataset;    }    // Create new views (invoked by the layout manager)    @Override    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,                                                   int viewType) {        // create a new view        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_holder, parent, false);        // set the view's size, margins, paddings and layout parameters        //TO-DO        ViewHolder vh = new ViewHolder(v);        return vh;    }    // Replace the contents of a view (invoked by the layout manager)    @Override    public void onBindViewHolder(ViewHolder holder, int position) {        // - get element from your dataset at this position        // - replace the contents of the view with that element        if(position %2 == 0) {            holder.mImageView.setImageResource(R.drawable.icon);        }        else {            holder.mImageView.setImageResource(R.mipmap.ic_launcher);        }        holder.mTextView.setText(mDataset[position]);    }    // Return the size of your dataset (invoked by the layout manager)    @Override    public int getItemCount() {        return mDataset.length;    }}class TestAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder>{    @Override    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        return null;    }    @Override    public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {    }    @Override    public int getItemCount() {        return 0;    }}

ViewHolder

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    xmlns:app="http://schemas.android.com/tools"    android:orientation="horizontal"    android:padding="4dp"    >    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"        android:id="@+id/card_view"        android:layout_width="140dp"        android:layout_height="match_parent"        android:layout_gravity="center_vertical"        app:cardUseCompatPadding="true"        card_view:cardCornerRadius="10dp">        <TextView            android:id="@+id/tv_title"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:textSize="25sp"            android:layout_gravity="center_vertical"            android:gravity="center_vertical"            android:textColor="#ffffff"            android:background="#1976D2"            />        <ImageView            android:id="@+id/iv_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"/>    </android.support.v7.widget.CardView></LinearLayout>

1 2