Create an app translation series with material Design---list and card set creation

The previous article was to create an app translation series using Material Design-the use of the material theme (using Material Theme) to get to the point:

To create material design-style complex lists and cards in your app, you can use Recyclerview and CardView controls.

Create a list

The Recyclerview control is a more superior and flexible control than a ListView. This control is a container that displays large datasets and scrolls efficiently through a limited number of views. You can use the Recyclerview control when you have data sets that change data elements at run time based on user actions or network events.

The Recyclerview class simplifies displaying and working with large datasets by providing the following:
1. Layout management for each item (LayoutManager)
2. Default animations for each item common action (for example: Delete and Add Item item)

You can also customize LayoutManager layout management and animation animations for the Recyclerview control with a flexible declaration.

With Recyclerview, you can specify a adapter adapter and a LayoutManager layout manager. The adapter adapter is then created by inheriting the Recyclerview.adapter class. The specific implementation is also based on the dataset and view type you specify.

In Recyclerview, the layout Manager (LayoutManager) is used to position the item and determines when the item view is reused when the item view is not visible. For reuse views, the layout manager notifies the adapter to replace the data content in the reused view with the different data elements in the dataset. Improve performance by recycling views to avoid creating unnecessary views or performing high-cost Findviewbyid () query methods.

Recyclerview provides some of the default layout managers (LayoutManager):
1. Linearlayoutmanager Linear layout manager, displayed as a horizontal or vertical scrolling list.
2. Gridlayoutmanager Grid layout Manager, displayed in grid format.
3. Staggeredgridlayoutmanager staggered waterfall Flow layout manager, displayed in the form of staggered waterfall flow grids.

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

Animation

Animations that add and remove item in Recyclerview are turned on by default. To customize these animations, you can inherit the Recyclerview.itemanimator class and use the animation through the Recyclerview.setitemanimator () method.

Example

The following code demonstrates how to add 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 you have added the Recyclerview control to the layout, get an object, connect to the layout manager, and add an adapter for the display data:

 Public  class myactivity extends Activity {    PrivateRecyclerview Mrecyclerview;PrivateRecyclerview.adapter Madapter;PrivateRecyclerview.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 of the Recyclerview is the same as changing the contents of the data inside, you can use this setting to improve performanceMrecyclerview.sethasfixedsize (true);//Use a linear layout managerMlayoutmanager =NewLinearlayoutmanager ( This); Mrecyclerview.setlayoutmanager (Mlayoutmanager);//Specify an adapter (see also next example)Madapter =NewMyadapter (myDataSet);    Mrecyclerview.setadapter (Madapter); }    ...}

This adapter provides access to item in your data set, creates a view for item, and replaces some view content that is not visible on the original item with the new item data. The following code example shows a simple implementation of a data set consisting of some string arrays by a TextView:

 Public  class myadapter extends recyclerview. Adapter<myadapter. Viewholder> {    PrivateString[] Mdataset;//provide a reference to a view for each item with complex data     Public Static  class viewholder extends recyclerview. Viewholder {        //Each data item is just a string         PublicTextView Mtextview; Public Viewholder(TextView v) {Super(v);        Mtextview = v; }    }//provide a suitable constructor (depends on the kind of the dataset)     Public Myadapter(string[] mydataset)    {mdataset = myDataSet; }//Create new Views (invoked by the layout manager)    @Override     PublicMyadapter.viewholderOncreateviewholder(ViewGroup parent,intViewType) {//Create a new viewView 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 =NewViewholder (v);returnVh }//Replace The contents of a view (invoked by the layout manager)    @Override     Public void Onbindviewholder(Viewholder holder,intPosition) {//-get element from your dataset at this position        //-Replace the contents of the view with that elementHolder.mTextView.setText (Mdataset[position]); }//Return the size of your dataset (invoked by the layout manager)    @Override     Public int GetItemCount() {returnMdataset.length; }}

Create a card

CardView inherits to the Framelayout class and allows a consistent appearance on the platform to display information in the card. The CardView control allows you to have shadows and rounded corners.

Use the Card_view:cardelevation property to create a card with a shadow. In Android5.0 (API level 21) and above, CardView uses true depth and dynamic shading, and is compatible with the implementation of iconic shadows on earlier versions. For details, see: Maintaining Compatibility.
Use the following properties to customize the appearance of the CardView control:
1. In the layout, set the radius of the fillet with the Card_view:cardcornerradius property.
2. In the code, use the Cardview.setradius method to set the radius of the fillet.
3. Use the Card_view:cardbackgroundcolor property to set the background color of the card.

The following code shows how the CardView control is used 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 more information, see the CardView API reference.

To add dependent packages

The Recyclerview and CardView controls are part of the V7 Support Libraries Library. To use these controls in your project, you need to add the following dependencies to the app's module:

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

The above translation content in the external link of the part, will be gradually translated, the current link is the official website, if you need to see the friends, please first turn over the wall.

Create an app translation series with material Design---list and card set creation