在Android 5.0 中引入了Material Design的设计理念,并加入了RecyclerView和CardView两个控件。本文就讲解如何使用者两个控件来实现瀑布流效果(StaggeredGrid)。
先上效果图
RecyclerView
RecyclerView 是一个更加高级和灵活的ListView。它简化了显示和处理数据的过程,比如,为positioning item提供了layout 的管理,为item删除和添加提供了默认的动画。当然,你也可以自定义这些动画。
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>
版权声明:本文为博主原创文章,转载请联系博主。