Android Material Design-Creating Lists and Cards (create list and card)-(3 ),

Android Material Design-Creating Lists and Cards (create list and card)-(3 ),

Reprinted please indicate the source: http://blog.csdn.net/bbld_/article/details/40430319

 

To use the material design style in your app to create complex lists and cards (layout Interface), you can use the RecyclerView and CardView controls.

 

Create list

The RecyclerView control is more advanced and flexible than ListView. This control is a container used to display views with a large amount of data and efficiently scroll under a limited number of views. When you have a dataset and its elements change in user operations or network events, you should use RecyclerView.

The RecyclerView class simplifies the display and processing of large amounts of data through the following:

L layout manager for (Management) Position item

L default animation displayed for general item operations, such as deleting or adding an item

You can also flexibly customize the layout manager of the RecyclerView Control and Its animation effect.

Figure 1: RecyclerView Control

To use the RecyclerView control, you must specify an adapter and a layout manager. To create an Adapter, you must inherit the RecyclerView. Adapter class. The details of the inheritance implementation depend on your data and the type of view on the item.

For more information, see the following example.

OneLayout managerLocate the item view inside RecyclerView and determine when to reuse the item view that is invisible to users ). To reuse (or recycle) views, the layout manager may require the adapter to replace the view content with different data in the dataset. In this way, the view is recycled to avoid unnecessary views or the findViewById () method with a high execution cost, which improves the RecyclerView performance.

RecyclerView provides these built-in layout managers:

L LinearLayoutManager (used) displays list items in vertical or horizontal scrolling mode.

L GridLayoutManager (used to) display items in the grid)

L StaggeredGridLayoutManager (used to display staggered grid items)

You can inherit the RecyclerView. LayoutManager class to customize your layout manager.

 

Animation

By default, the animation for adding and deleting items is enabled in RecyclerView. To customize these animations, inherit the RecyclerView. ItemAnimator class and use the RecyclerView. setItemAnimator () method.

 

Example

Figure 2: List using RecyclerView

The following code example shows 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"/>

After you add the RecyclerView control to the layout, bind it to a layout manager and attach the data adapter to display to it.

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);        // 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 LinearLayoutManager(this);        mRecyclerView.setLayoutManager(mLayoutManager);        // specify an adapter (see also next example)        mAdapter = new MyAdapter(myDataset);        mRecyclerView.setAdapter(mAdapter);    }    ...}

This adapter provides centralized access to items and creates views corresponding to items ), some views are replaced by new data when the original items are not visible ). The following code shows a simple implementation, which is displayed by a string array dataset using the TextView control on item:

public 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 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        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 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.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 the FrameLayout class and gives you a consistent cross-platform display in the card. The CardView control can have shadows and rounded corners (effects ).

To create a card with shadow effect, you can use the card_view: cardElevation attribute. CardView uses real elevation (elevation) and dynamic shadow (and) in systems above Android (API level 21) in a lower version of the system, the program shadow is displayed. For more information, see Maintaining Compatibility (not updated ).

Use these attributes to customize the appearance of the CardView control:

L set the radius of the rounded corner in the layout and use the card_view: cardCornerRadius attribute.

L set the radius of the rounded corner in the Code and use the CardView. setRadius Method

L to set the background color of a card, use the card_view: cardBackgroundColor attribute.

The following code example shows how to add the CardView control to your 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 more information, see the CardView API documentation.

Figure 3: Card example

Add dependency

Both the RecyclerView and CardView controls are part of the v7 support library. To use these controls in the project, add the following Gradle dependency in your program module:

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

------------------------------------------------------------------------ Split line --------------------------------------------------------------------------

 

Add RecyclerView and CardView dependencies to Elcipse

First, make sure that the support library item in Extras in your sdk is up-to-date.

Then, go to the following directory in the sdk folder and import the appcompat and cardview projects to the eclipse workspace, while recyclerview does not, because there is no resource file in the jar file.

After the appcompat and project are imported, copy the jar package in the recyclerview folder to the libs folder of the appcompat project. Then eclipse will automatically help us build the path for the jar package, as shown below:

Cardview is imported as a project because it requires some of its own resource files, as shown below:

We need to use the cardview project as the Library Project to dependencies the appcompat project. In this way, we only need to add the appcompat dependency in our own project, so we do not need to add the dependencies of the cardview project.

In this case, we have completed the process ~ It can be used in our own projects.

Demo:

Demo Source: http://download.csdn.net/detail/bbld_/8078205