Android (Lollipop/5.0) Material Design (I) Introduction

Android (Lollipop/5.0) Material Design (I) Introduction

 

To use Material Design, api21 is required, that is, Lollipop/5.0 or above.

Material Design provides applications with a new topic, new widgets that combine views, and new APIs for custom shadows and animations.

 

Material topic

 

In manifest. xml, <... android: theme = @ android: style/Theme. Material/> prompts that there are many related topics.

Lists and Cards

5.0 provides two new widgets that use the style and animation of Material Design:

RecyclerView is a more pluggable ListView that supports different layout types and improves performance. Simplified

CardView a card that allows you to display important information in it and maintain consistent vision and feeling

It is located in sdk/extras/android/support/v7/cardview and sdk/extras/android/support/v7/RecyclerView

View shadow

In addition to the x and y attributes, the View also has z, which represents the elevation of an view (elevation, let's translate it like this)

The larger the value of z, the larger the shadow. The larger the value of z, the view will appear at the top of other views.

 

Animation

The new animation Api allows you to create touch feedback in the UI control, change the View status, and switch a series of custom animations of the activity.

Specifically:

Touch feedback animation for touch events in response to View

Hide and display the circular animation of a View

Animation for switching between two activities

More natural animated curve movement

You can use the state change animation of a View to change attributes of one or more views.

Displays the status list animation when the View status changes.

These new animations APIs have been built into standard widgets, such as buttons. You can also use these Apis when customizing a view.

 

Image

Scalable Vector images do not lose definition, and the app-icon in a single color is perfect.

You can define a bitmap as the transparency (alpha) and runtime color.

You can color a bitmap image to retrieve its conspicuous color.

 

Example of RecyclerView:

 

[Java]View plaincopyprint?

1. Import android. app. Activity;
2. Import android. OS. Bundle;
3. Import android. support. v7.widget. GridLayoutManager;
4. Import android. support. v7.widget. RecyclerView;
5. Import android. support. v7.widget. RecyclerView. LayoutParams;
6. Import android. view. LayoutInflater;
7. Import android. view. ViewGroup;
8. Import android. widget. TextView;
9.  
10. Public class RecyclerViewActivity extends Activity {
11. /*
12. * Recyclerview provides these built-in layout managers:
13. * Linearlayoutmanager displays the vertical scrolling list or horizontal items.
14. * Gridlayoutmanager is displayed in a grid project.
15. * Staggeredgridlayoutmanager is displayed in a staggered grid project.
16. * The custom layout manager must inherit the recyclerview. layoutmanager class.
17. *
18. * The animation is enabled by default when you add/remove items.
19. * To customize these animations, you must inherit RecyclerView. ItemAnimator and implement RecyclerView. setItemAnimator ()
20. */
21. Private RecyclerView mRecyclerView;
22. Private RecyclerView. Adapter mAdapter;
23. Private RecyclerView. LayoutManager mLayoutManager;
24. Private String [] myDataset;
25.  
26. @ Override
27. Protected void onCreate (Bundle savedInstanceState ){
28. Super. onCreate (savedInstanceState );
29.  
30. SetContentView (R. layout. recycler_view );
31. MRecyclerView = (RecyclerView) findViewById (R. id. my_recycler_view );
32.  
33. // Use this setting to improve performance if you know that changes
34. // In content do not change the layout size of the RecyclerView
35. MRecyclerView. setHasFixedSize (true );
36.  
37. // Use a linear layout manager
38. // MLayoutManager = new LinearLayoutManager (this );
39.  
40. // MLayoutManager = new GridLayoutManager (this, 3, GridLayoutManager. VERTICAL, true );
41. // True indicates that layout content is reversed.
42. MLayoutManager = new GridLayoutManager (this, 3, GridLayoutManager. VERTICAL, false );
43. // HORIZONTAL scrolling display VERTICAL
44. // MLayoutManager = new GridLayoutManager (this, 3, GridLayoutManager. HORIZONTAL, false );
45.  
46. // The direction also indicates the scroll direction. In this example, the data starting from the horizontal direction is a little staggered and the vertical direction is not staggered.
47. // MLayoutManager = new StaggeredGridLayoutManager (3, StaggeredGridLayoutManager. HORIZONTAL );
48. // MLayoutManager = new StaggeredGridLayoutManager (4, StaggeredGridLayoutManager. VERTICAL );
49.  
50. MRecyclerView. setLayoutManager (mLayoutManager );
51. // MRecyclerView. setLayoutManager (new MyLayoutMnager (); // The data is not displayed and you may need to rewrite something ..
52.  
53. // Specify an adapter (see also next example)
54.  
55. SetDatas ();
56. MAdapter = new MyAdapter (myDataset );
57. MRecyclerView. setAdapter (mAdapter );
58. }
59.  
60. Private void setDatas (){
61. Int len = 200;
62. MyDataset = new String [len];
63. For (int I = 0; I <len; I ++ ){
64. Switch (I % 3 ){
65. Case 0:
66. MyDataset [I] = China + I;
67. Break;
68. Case 1:
69. MyDataset [I] = US + I;
70. Break;
71. Case 2:
72. MyDataset [I] = Australia + I;
73. Break;
74. }
75. }
76. }
77.  
78. Class MyLayoutMnager extends RecyclerView. LayoutManager {
79.  
80. @ Override
81. Public LayoutParams generateDefaultLayoutParams (){
82. LayoutParams params = new LayoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT );
83. Params. topMargin = 5;
84. Return params;
85. }
86. }
87.  
88. Class MyAdapter extends RecyclerView. Adapter {
89. Private String [] mDataset;
90.  
91. // Provide a reference to the views for each data item
92. // Complex data items may need more than one view per item, and
93. // You provide access to all the views for a data item in a view holder
94.  
95. // Provide a suitable constructor (depends on the kind of dataset)
96. Public MyAdapter (String [] myDataset ){
97. MDataset = myDataset;
98. }
99.  
100. // Create new views (invoked by the layout manager)
101. @ Override
102. Public ViewHolder onCreateViewHolder (ViewGroup parent, int viewType ){
103. // Create a new view
104. TextView TV = (TextView) LayoutInflater. from (parent. getContext ())
105. . Inflate (R. layout. my_text_view, parent, false );
106. // Set the view's size, margins, paddings and layout parameters
107. //...
108. ViewHolder h_= new ViewHolder (TV); // construct a ViewHolder
109. Return VL;
110. }
111.  
112. // Replace the contents of a view (invoked by the layout manager)
113. @ Override
114. Public void onBindViewHolder (ViewHolder holder, int position ){
115. //-Get element from your dataset at this position
116. //-Replace the contents of the view with that element
117. Holder. mTextView. setText (mDataset [position]);
118.  
119. }
120.  
121. // Return the size of your dataset (invoked by the layout manager)
122. @ Override
123. Public int getItemCount (){
124. Return mDataset. length;
125. }
126. }
127.  
128. Static class ViewHolder extends RecyclerView. ViewHolder {
129. // Each data item is just a string in this case
130. Public TextView mTextView;
131. Public ViewHolder (TextView v ){
132. Super (v );
133. MTextView = v;
134. }
135. }
136. }