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