Use Material Design to create an App translation series-create a list and a card set,

Use Material Design to create an App translation series-create a list and a card set,

The previous article used Material Design to create an App translation series-Using Material Theme:

You can use the RecyclerView and CardView controls to create complex lists and cards of the Material Design style in the application.

Create list

The RecyclerView control is a better and more flexible control than the ListView control. This control is a container that displays large datasets in a limited number of views and can scroll efficiently. You can use the RecyclerView control when you change data elements at runtime based on user actions or network events.

The RecyclerView class simplifies the display and processing of large datasets by providing the following:
1. LayoutManager)
2. Default animation for each item's common operations (for example, the deletion and addition of item items)

You can also flexibly declare LayoutManager layout management and Animation for the RecyclerView control.

For RecyclerView usage, you can specify an Adapter and a LayoutManager layout manager. Then, the Adapter is created by inheriting the RecyclerView. Adapter class. The specific implementation depends on the data set and view type you specified.

LayoutManager in RecyclerView is used to locate items and decide when to reuse the item view when the item view is invisible. For the reuse view, the layout manager notifies the adapter to replace the data content in the reused view with different data elements in the dataset. Improve the performance by recycling views to avoid creating unnecessary views or performing a high-cost findViewById () query method.

RecyclerView provides several default layoutmanagers ):
1. LinearLayoutManager: Linear layout manager, which is displayed in a horizontal or vertical scrolling list.
2. GridLayoutManager: displays the grid layout manager in the form of a grid.
3. StaggeredGridLayoutManager: the waterfall stream layout manager is displayed in a staggered waterfall stream grid.

You can also inherit Recycl. LayoutManager to create a custom LayoutManager layout manager class.

Animation

The animation for adding or deleting items in RecyclerView is enabled by default. To customize these animations, You can inherit the RecyclerView. ItemAnimator class and use the RecyclerView. setItemAnimator () method to use the animations.

Example

The following code demonstrates how to add a RecyclerView to a layout:

<!-- A RecyclerView with some commonly used attributes --><android.support.v7.widget.RecyclerView    android:id="@+id/my_recycler_view"    android:scrollbars="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent"/>

Once the RecyclerView control is added to the layout, an object is obtained, the layout manager is connected, and an adapter is added for the display data:

Public class MyActivity extends Activity {private RecyclerView mRecyclerView; private RecyclerView. adapter mAdapter; private RecyclerView. layoutManager mLayoutManager; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. my_activity); mRecyclerView = (RecyclerView) findViewById (R. id. my_recycler_view); // If the layout size of the RecyclerView does not change but the data content, you can use this setting to Improve the Performance of mRecyclerView. setHasFixedSize (true); // use a linear layout manager mLayoutManager = new LinearLayoutManager (this); mRecyclerView. setLayoutManager (mLayoutManager); // specify an adapter (see also next example) mAdapter = new MyAdapter (myDataset); mRecyclerView. setAdapter (mAdapter );}...}

This adapter allows you to access the Item in your dataset and create a View for the Item. When some View content that is invisible to the original Item is replaced with the new Item data. The following code example shows a simple implementation of using a TextView to form a dataset composed of some string Arrays:

Public class MyAdapter extends RecyclerView. adapter <MyAdapter. viewHolder> {private String [] mDataset; // provides a reference public static class ViewHolder extends RecyclerView for each item with complex data. viewHolder {// each data item is just a string in this case public TextView mTextView; public ViewHolder (TextView v) {super (v); mTextView = v ;}} // 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 v = LayoutInflater. from (parent. getContext ()). inflate (R. layout. my_text_view, parent, false); // set the view's size, margins, paddings and layout parameters... viewHolder h_= new ViewHolder (v); return h_;}// 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. mTextView. setText (mDataset [position]);} // Return the size of your dataset (invoked by the layout manager) @ Override public int getItemCount () {return mDataset. length ;}}

Create a card

CardView inherits from the FrameLayout class and allows display of information in cards with consistent appearances on this platform. The CardView control allows shadow and rounded corners.

Use the card_view: cardElevation attribute to create a shadow card. In Android (API Level 21) and later versions, CardView uses real depth and dynamic shadows, and is compatible with the implementation of symbolic shadows in earlier versions. For details, see Maintaining Compatibility.
Use the following attributes to customize the appearance of the CardView control:
1. In the layout, use the card_view: cardCornerRadius attribute to set the radius of the rounded corner.
2. In the code, use CardView. setRadius to set the radius of the rounded corner.
3. Use the card_view: cardBackgroundColor attribute to set the background color of the card.

The following code shows how to use the CardView control in the layout:

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

For details, see the API reference of CardView.

Add related dependency packages

The RecyclerView and CardView controls are part of the v7 Support Libraries library. To use these controls in a project, add the following dependency packages to the module of the app:

dependencies {    ...    compile 'com.android.support:cardview-v7:21.0.+'    compile 'com.android.support:recyclerview-v7:21.0.+'}

The external links in the above translation content will be gradually translated later. Currently, the link is an official website. If you need to view friends, please go over the wall first.