Use RecyclerView and CardView in Android to implement StaggeredGrid)

Use RecyclerView and CardView in Android to implement StaggeredGrid)

The Design concept of Material Design was introduced in Android 5.0, And the RecyclerView and CardView controls were added. This article explains how to use two controls to implement the waterfall stream effect (StaggeredGrid ).

First

RecyclerView

RecyclerViewIs a more advanced and flexible ListView. It simplifies the process of displaying and processing data. For example, it provides layout management for positioning items and provides default animations for item deletion and addition. You can also customize these animations.

LayoutManger <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> Animated + animated/bHcw + animated/animated + animated/LV38uuxr21xL/J0tS7rLavtcRsaXN0IDxzdHJvbmc + animated = "animated"> Animation

RecyclerView has the default animation for adding or deleting items. If you want to customize these animations, inherit the RecyclerView. ItemAnimator class and use the RecyclerView. setItemAnimator () method.

Example

Activity_recycler_view.xml

View_holder.xml

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

Here, Adaper is a bridge between data and UI, displaying data on the UI.
The following example is a simple Adapter implementation.

class MyAdapter extends RecyclerView.Adapter
   
     {    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;    }}
   

Description of RecyclerView. Adapter:

The following three methods must be implemented.
-OnCreateViewHolderReturns the ViewHolder of each Item.
-OnBindViewHolderAssign values to controls in Item
-GetItemCountReturns the number of items.

Effect

CardView

CardView inherits from FrameLayout, which enables your information to be displayed in the card and consistent across different platforms.
Use the following attributes to customize the appearance of the CardView:
Card_view: cardCornerRadiusSet the radius of the rounded corner
CardView. setRadiusSet the radius of the rounded corner in the code.
Card_view: cardBackgroundColorSet the background of the card

Example

Dependent package

RecyclerView and CardView are part of v7 Support Libraries, so you need to add the following content to your app's Gradle dependencies:

Dependencies {
...
Compile 'com. android. support: cardview-v7: 21.0. +'
Compile 'com. android. support: recyclerview-v7: 21.0. +'
}

Implement the effect of waterfall stream (StaggeredGrid)

Activity_recycler_view.xml

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
   
     {    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
    
     {    @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