Android(Lollipop/5.0) Material Design(一) 簡介

官網位址：https://developer.android.com/intl/zh-tw/design/material/index.html

使用Material Design 需要api21，即Lollipop/5.0以上

Material Design 為應用提供了：一個新的主題，一些組合View的新Widget，一些自定義陰影和動畫的新Api

Material 主題

在manifest.xml 中<... android:theme="@android:style/Theme.Material" /> 提示一下有很多相關的主題

Lists和Cards

5.0提供了兩個新的Widget，它們使用了Material Design 的style和animation：

清單式：RecyclerView 一個更可插拔式的ListView，它支援不同的布局類型，并且性能有了改進。

卡片式：CardView 一個能讓你在其内顯示重要資訊，并保持連貫的視覺和感覺的卡片。

它兩位于 sdk/extras/android/support/v7/cardview 和 sdk/extras/android/support/v7/RecyclerView

View的陰影

View現在除了x、y屬性外還有z，z代表一個view的仰角(elevation, 姑且這麼翻譯吧)

z越大，陰影越大；z越大，view會出現在其他view的頂部

動畫

新的動畫Api，讓你在UI控件裡能建立觸摸回報，改變View的狀态，切換activity的一系列自定義動畫

具體有：

響應View的touch事件的觸摸回報動畫

隐藏和顯示View的循環展示動畫

兩個Activity間的切換動畫

更自然的曲線運動的動畫

使用View的狀态更改動畫，能改變一個或多個View的屬性

在View的狀态更改時顯示狀态清單動畫

這些new animations Api，已内置在标準Widget中，如Button。在自定義view時也可使用這些api

圖檔

可伸縮的矢量圖檔不會丢失清晰度，并且單一顔色的app-icon是完美的

可定義一個bitmap作為透明度(alpha)和運作時的顔色

可對一個bitmap image取色，會取出它比較顯眼的顔色

附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. public class RecyclerViewActivity extends Activity {  
10.      private RecyclerView mRecyclerView;  
11.      private RecyclerView.Adapter mAdapter;  
12.      private RecyclerView.LayoutManager mLayoutManager;  
13.      private String[] myDataset;  
14.     @Override  
15.     protected void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.recycler_view);  
18.         mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);  
19.         // use this setting to improve performance if you know that changes  
20.         // in content do not change the layout size of the RecyclerView  
21.         mRecyclerView.setHasFixedSize(true);  
22.         // use a linear layout manager  
23. //        mLayoutManager = new LinearLayoutManager(this);  
24. //        mLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, true);  
25.         //true 表示，将layout内容反轉  
26.         mLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.VERTICAL, false);  
27.         //HORIZONTAL 橫向滾動顯示内容   VERTICAL縱向  
28. //        mLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.HORIZONTAL, false);  
29.         //方向也是訓示滾動方向，例子中橫向開頭的資料交錯了一點， 縱向的無交錯  
30. //        mLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.HORIZONTAL);  
31. //        mLayoutManager = new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL);  
32.         mRecyclerView.setLayoutManager(mLayoutManager);  
33. //        mRecyclerView.setLayoutManager(new MyLayoutMnager()); //資料不顯示，可能還需要重寫什麼東西。。  
34.         // specify an adapter (see also next example)  
35.         setDatas();  
36.         mAdapter = new MyAdapter(myDataset);  
37.         mRecyclerView.setAdapter(mAdapter);  
38.     }  
39.     private void setDatas() {  
40.         int len = 200;  
41.         myDataset = new String[len];  
42.         for (int i = 0; i < len; i++) {  
43.             switch (i%3) {  
44.             case 0:  
45.                 myDataset[i] = "中國" + i;  
46.                 break;  
47.             case 1:  
48.                 myDataset[i] = "美國" + i;  
49.                 break;  
50.             case 2:  
51.                 myDataset[i] = "澳洲" + i;  
52.                 break;  
53.             }  
54.         }  
55.     }  
56.     class MyLayoutMnager extends RecyclerView.LayoutManager {  
57.         @Override  
58.         public LayoutParams generateDefaultLayoutParams() {  
59.             LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
60.             params.topMargin = 5;  
61.             return params;  
62.         }  
63.     }  
64.     class MyAdapter extends RecyclerView.Adapter<ViewHolder> {  
65.         private String[] mDataset;  
66.         // Provide a reference to the views for each data item  
67.         // Complex data items may need more than one view per item, and  
68.         // you provide access to all the views for a data item in a view holder  
69.         // Provide a suitable constructor (depends on the kind of dataset)  
70.         public MyAdapter(String[] myDataset) {  
71.             mDataset = myDataset;  
72.         }  
73.         // Create new views (invoked by the layout manager)  
74.         @Override  
75.         public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
76.             // create a new view  
77.             TextView tv = (TextView) LayoutInflater.from(parent.getContext())  
78.                     .inflate(R.layout.my_text_view, parent, false);  
79.             // set the view's size, margins, paddings and layout parameters  
80.             //...  
81.             ViewHolder vh = new ViewHolder(tv); //建構一個ViewHolder  
82.             return vh;  
83.         }  
84.         // Replace the contents of a view (invoked by the layout manager)  
85.         @Override  
86.         public void onBindViewHolder(ViewHolder holder, int position) {  
87.             // - get element from your dataset at this position  
88.             // - replace the contents of the view with that element  
89.             holder.mTextView.setText(mDataset[position]);  
90.         }  
91.         // Return the size of your dataset (invoked by the layout manager)  
92.         @Override  
93.         public int getItemCount() {  
94.             return mDataset.length;  
95.         }  
96.     }  
97.     static class ViewHolder extends RecyclerView.ViewHolder {  
98.         // each data item is just a string in this case  
99.         public TextView mTextView;  
100.         public ViewHolder(TextView v) {  
101.             super(v);  
102.             mTextView = v;  
103.         }  
104.     }  
105. }