Create material Design-style Android apps-create lists and cards

Last time I talked about using the theme, applying the material design style, and the card layout is also an important part of material design, write today.

Introduction

Creating complex material Design-style lists and card in your program, you can use the Recyclerview and CardView components, which are provided in the latest support V7 package (version 21). Therefore, a dependency package needs to be introduced:

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

Create List

The Recylerview component is a more efficient and flexible listview. This component is a container that displays a large data set and can scroll effectively to keep a certain number of views displayed. Use the Recyclerview component when you have a dataset, and the elements of the dataset are changed at run time based on the user's actions or network events.

The Recylerview class simplifies the display and processing of large data sets by providing:
Layout manager controls element positioning.
Displays default animations on operations on common elements, such as removing and adding elements.

Using the Recyclerview component, you need to specify a adapter and layout manager, create a adapter inheritance Recyclerview.adapter class, specific implementation details to be based on the data collection view type changes, specific information, see the following example.

A layout manager locates the item view in Recyclerview, deciding when to reclaim it when he is no longer visible. When reusing (or reclaiming) a view, the layout Manager may request the adapter (Adapter) to replace the content in the child view with a different content. Recycling reuse views in this way can reduce the creation of view and avoid more Findviewbyid (), which improves performance.

Recyclerview provides the following built-in Layout manager:

Linearlayoutmanager displays item in a horizontal or vertical scrolling list.
Gridlayoutmanager displays item as a grid layout.
Staggeredgridlayoutmanager displays item in a staggered grid layout.

You can also create your own custom layout manager by inheriting the Recyclerview.layoutmanager class.

Recylerview components

Animation:

Recyclerview is animated by default, when you delete or add an ite. If you need to customize the animation, inherit the Recyclerview.itemanimator class and use the Recyclerview.setitemanimator () method to set the defined animation to our view.

Let's look at the example below:
1. First add a recyclerview to the XML layout file

<!--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"/>

2. Then use in our Java code, additional adapter and data can be displayed.

3.Adapter provides access to the item in the dataset, creates a view that maps to the data, and replaces the layout's content data with the new item. The following code shows a simple implementation that uses TextView to display a simple string array.

public class Myadapter extends recyclerview.adapter<myadapter.viewholder> {private string[] mdataset;    Provide a reference to the "view for each data item//COMPLEX data items * need more than one views per item, and You provide access to all of the views for a data item in a view holder public static class Viewholder extends Recyc        Lerview.viewholder {//each of the data item is just a string "in the" case "public TextView Mtextview;            Public Viewholder (TextView v) {super (V);        Mtextview = v;        }}//provide a suitable constructor (depends on the kind in dataset) public Myadapter (string[] mydataset) {    Mdataset = myDataSet; }//Create new Views (invoked by the layout manager) @Override public Myadapter.viewholder Oncreateviewholder (Vi Ewgroup 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 (viewho Lder holder, int position) {//-get element from your dataset at this position//-Replace the contents O    f 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 Card

CardView inherits the Framelayout class, through which it can display information inside the card and have a uniform style on different platforms. CardView components can have shadows and rounded corners.

Create a shadow card, using the card_view:cardelevation property. CardView uses real height and dynamic shading in Android5.0 (API 21) and later versions, while older versions use traditional shading.

Use these properties to customize the appearance of the CardView:

Use the Card_view:cardcornerradius property to set the radius of the fillet in the layout file.
Use the Cardview.setradius method to set the radius of the fillet in Java code.
Sets the background color of the card, using the card_view:cardbackgroundcolor property.

The following is an example that contains a cardview in an XML layout file:

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

Card example Diagram

Strum

Recyclerview can be seen through the above. It's a lot like the ListView we used to use, but its parent is not abslistview, so it can't be used in a mix. But in many places you can replace the ListView and reuse it with Viewholder,view, and you can see that this is a more efficient view component that is recommended for use.

CardView, in essence, is a more material design component, using card layout, the effect is better. Many people may also use some cardui before, Google official out of this, strongly recommended to use.

Above Recyclerview and CardView, is separate write, but we can use together of Oh, don't be confused.

Reference: http://developer.android.com/training/material/lists-cards.html

Original address: http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/, reproduced please indicate the source.

Create material Design-style Android apps-create lists and cards