1page.title=開始使用
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>本課程示範</h2>
8<ol>
9  <li><a href="#ApplyTheme">套用材料設計風格</a></li>
10  <li><a href="#Layouts">設計版面配置</a></li>
11  <li><a href="#Depth">指定視圖中的高度</a></li>
12  <li><a href="#ListsCards">建立清單和卡片</a></li>
13  <li><a href="#Animations">自訂動畫</a></li>
14</ol>
15<h2>您也應該閱讀</h2>
16<ul>
17  <li><a href="http://www.google.com/design/spec">材料設計規格</a></li>
18  <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li>
19</ul>
20</div>
21</div>
22
23
24<p>如果要使用材料設計建立應用程式：</p>
25
26<ol>
27  <li style="margin-bottom:10px">
28    請閱讀<a href="http://www.google.com/design/spec">材料設計規格</a>。</li>
29  <li style="margin-bottom:10px">
30    對應用程式套用材料<strong>設計風格</strong>。</li>
31  <li style="margin-bottom:10px">
32    依照材料設計指南建立<strong>版面配置</strong>。</li>
33  <li style="margin-bottom:10px">
34    指定視圖的<strong>高度</strong>來投射出陰影。</li>
35  <li style="margin-bottom:10px">
36    使用系統<strong>小工具</strong>製作清單和卡片。</li>
37  <li style="margin-bottom:10px">
38    自訂應用程式中的<strong>動畫</strong>。</li>
39</ol>
40
41<h3>維持向下相容性</h3>
42
43<p>您可在應用程式中加入多種材料設計功能，同時維持與 Android 5.0 之前版本的相容性。
44如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。
45</p>
46
47<h3>更新應用程式以納入材料設計功能</h3>
48
49<p>如要更新現有應用程式以納入材料設計功能，請依照下列材料設計指南更新版面配置。
50同時確保加入深度、輕觸回饋和動畫。
51</p>
52
53<h3>使用材料設計建立新應用程式</h3>
54
55<p>如果您要使用材料設計功能建立新應用程式，<a href="http://www.google.com/design/spec">材料設計指南</a>可以提供一致性的設計架構。
56請依照下列指南，使用 Android 架構中的新功能來設計和開發應用程式。
57</p>
58
59
60<h2 id="ApplyTheme">套用材料設計風格</h2>
61
62<p>如要在應用程式中套用材料設計風格，請指定一個繼承自 <code>android:Theme.Material</code> 的樣式：
63</p>
64
65<pre>
66&lt;!-- res/values/styles.xml -->
67&lt;resources>
68  &lt;!-- your theme inherits from the material theme -->
69  &lt;style name="AppTheme" parent="android:Theme.Material">
70    &lt;!-- theme customizations -->
71  &lt;/style>
72&lt;/resources>
73</pre>
74
75<p>材料設計風格提供已更新的系統小工具，可讓您設定系統小工具的色板和預設動畫，作為輕觸回饋與操作行為轉換。
76如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。
77</p>
78
79
80<h2 id="Layouts">設計版面配置</h2>
81
82<p>除了套用和自訂材料設計風格之外，您的版面配置也必須遵守<a href="http://www.google.com/design/spec">材料設計指南</a>。
83當您設計版面配置時，請注意下列事項：
84</p>
85
86<ul>
87<li>基準線網格</li>
88<li>邊線</li>
89<li>間距</li>
90<li>輕觸目標大小</li>
91<li>版面配置結構</li>
92</ul>
93
94
95<h2 id="Depth">指定視圖中的高度</h2>
96
97<p>檢視可以投射出陰影，因此檢視的高度值會決定陰影的大小及其繪製順序。
98如要設定視圖的高度，請在版面配置中使用 <code>android:elevation</code> 屬性：
99</p>
100
101<pre>
102&lt;TextView
103    android:id="&#64;+id/my_textview"
104    android:layout_width="wrap_content"
105    android:layout_height="wrap_content"
106    android:text="&#64;string/next"
107    android:background="&#64;color/white"
108    android:elevation="5dp" />
109</pre>
110
111<p>您可以使用新的 <code>translationZ</code> 屬性建立動畫，來反映視圖高度的短暫變化。
112高度變化可以用來<a href="{@docRoot}training/material/animations.html#ViewState">回應輕觸手勢</a>。
113
114</p>
115
116<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。
117</p>
118
119
120<h2 id="ListsCards">建立清單和卡片</h2>
121
122<p>{@link android.support.v7.widget.RecyclerView} 是一個更容易插入的 {@link
123android.widget.ListView} 版本，可支援不同的版面配置類型並提供更好的效能。{@link android.support.v7.widget.CardView} 可讓您在不同的應用程式之間以一致的外觀顯示卡片內部的資訊。
124
125下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}：
126</p>
127
128<pre>
129&lt;android.support.v7.widget.CardView
130    android:id="&#64;+id/card_view"
131    android:layout_width="200dp"
132    android:layout_height="200dp"
133    card_view:cardCornerRadius="3dp">
134    ...
135&lt;/android.support.v7.widget.CardView>
136</pre>
137
138<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。
139</p>
140
141
142<h2 id="Animations">自訂動畫</h2>
143
144<p>Android 5.0 (API 級別 21) 包含許多新的 API 以便在應用程式中建立自訂動畫。例如，您可以啟用操作行為轉換，並在操作行為內部定義離開轉換：
145
146</p>
147
148<pre>
149public class MyActivity extends Activity {
150
151    &#64;Override
152    protected void onCreate(Bundle savedInstanceState) {
153        super.onCreate(savedInstanceState);
154        // enable transitions
155        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
156        setContentView(R.layout.activity_my);
157    }
158
159    public void onSomeButtonClicked(View view) {
160        getWindow().setExitTransition(new Explode());
161        Intent intent = new Intent(this, MyOtherActivity.class);
162        startActivity(intent,
163                      ActivityOptions
164                          .makeSceneTransitionAnimation(this).toBundle());
165    }
166}
167</pre>
168
169<p>當您從這個操作行為開始另一個操作行為時，就會啟動離開轉換。</p>
170
171<p>如需深入了解新的動畫 API，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。</p>
172