blob: 3330b0cbe6a4d5a9611b2758336ce710c9707082 (
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
page.title=Android のマテリアル デザイン
page.tags=Material,design
page.image=images/cards/design-material-for-android_2x.jpg
@jd:body
<!-- developer docs box -->
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
<div>
<h3>デベロッパー ドキュメント</h3>
<p>マテリアル デザインを使用したアプリの作成</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
<div>
<h3>ビデオ</h3>
<p>マテリアル デザインについて</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
<div>
<h3>ビデオ</h3>
<p>紙とインク: 重要なマテリアル</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
<div>
<h3>ビデオ</h3>
<p>Google I/O アプリのマテリアル デザイン</p>
</div>
</a>
<p itemprop="description">マテリアル デザインは、複数のプラットフォームや端末の視覚、モーション、インタラクション デザインの包括的な指針です。
Android はマテリアル デザイン アプリに対応するようになりました。
Android アプリでマテリアル デザインを使うには、<a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a>で定義されているガイドラインに従い、Android 5.0（API レベル 21）以降の新しいコンポーネントや機能を使用します。
</p>
<p>Android にはマテリアル デザインのアプリのビルドに使用できる次の要素が用意されています。</p>
<ul>
<li>新しいテーマ</li>
<li>複雑なビューに対応した新しいウィジェット</li>
<li>カスタムのシャドウとアニメーション用の新しい API</li>
</ul>
<p>Android でのマテリアル デザインの実装については、<a href="{@docRoot}training/material/index.html">マテリアル デザインを使用したアプリの作成</a>をご覧ください。
</p>
<h3>マテリアル テーマ</h3>
<p>マテリアル テーマには、アプリの新しいスタイルであるシステム ウィジェットがあります。このシステム ウィジェットを使うと、システム ウィジェットのカラーパレットを設定したり、タッチ フィードバックやアクティビティ遷移のためのデフォルトのアニメーションを設定したりできます。
</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">暗い色のマテリアル テーマ</p>
</div>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
<div style="width:140px;margin:0 auto">
<p style="margin-top:8px">明るい色のマテリアル テーマ</p>
</div>
</div>
<br style="clear:left"/>
</div>
<p>詳細については、<a href="{@docRoot}training/material/theme.html">マテリアル テーマの使用</a>をご覧ください。
</p>
<h3>リストとカード</h3>
<p>Android はマテリアル デザインのスタイルとアニメーションを含むカードとリストを表示する、次のような新しい 2 つのウィジェットを提供しています。
</p>
<!-- two columns -->
<div style="width:700px;margin-top:25px;margin-bottom:20px">
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
<p>新しい <code>RecyclerView</code> ウィジェットは <code>ListView</code>
に比べてさらに柔軟に機能を追加できるようになっており、さまざまなレイアウト タイプをサポートしてパフォーマンスを向上させます。</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
<p>新しい <code>CardView</code> ウィジェットではカードの外観や操作性が統一され、カード内の重要な情報を表示できるようになりました。
</p>
</div>
<br style="clear:left"/>
</div>
<p>詳細については、<a href="{@docRoot}training/material/lists-cards.html">リストとカードの作成</a>をご覧ください。
</p>
<h3>シャドウの表示</h3>
<p>Android のビューに、X と Y のプロパティに加えて Z プロパティが追加されました。
この新しいプロパティはビューのエレベーションを表し、次の要素を指定します。</p>
<ul>
<li>シャドウのサイズ: ビューの Z 値が高いほどシャドウのサイズが大きくなります。</li>
<li>描画順序: ビューの Z 値が高いほど他のビューの前面に表示されます。</li>
</ul>
<div style="width:290px;margin-left:35px;float:right">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay>
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<em>端末の画像をクリックすると動画を再生できます</em>
</div>
</div>
<p>詳細については、<a href="{@docRoot}training/material/shadows-clipping.html">シャドウとクリッピング ビューの定義</a>をご覧ください。
</p>
<h3>アニメーション</h3>
<p>新しいアニメーション API を使って、UI コントロールのタッチ フィードバック、ビューの状態変化、アクティビティ間の遷移時のカスタム アニメーションを作成できます。
</p>
<p>この API で次のようなことができます。</p>
<ul>
<li style="margin-bottom:15px">
<strong>タッチ フィードバック</strong> アニメーションでビューのタップ イベントに応答する。
</li>
<li style="margin-bottom:15px">
<strong>円形状の出現</strong>アニメーションを使ってビューを表示したり、非表示にしたりする。
</li>
<li style="margin-bottom:15px">
カスタムの<strong>アクティビティ遷移</strong>アニメーションを使ってアクティビティを切り替える。
</li>
<li style="margin-bottom:15px">
<strong>曲線モーション</strong>を使ってより自然なアニメーションを作成する。
</li>
<li style="margin-bottom:15px">
<strong>ビューの状態変化</strong>アニメーションを使って 1 つ以上のビュー プロパティを変化させるアニメーションを作成する。
</li>
<li style="margin-bottom:15px">
ビューの状態を変化させるアニメーションを<strong>状態リスト ドローアブル</strong>で表示します。
</li>
</ul>
<p>タッチ フィードバック アニメーションはボタンなどの複数の標準ビューに組み込まれています。新しい API を使うと、これらのアニメーションをカスタマイズして、カスタム ビューに追加できます。
</p>
<p>詳細については、<a href="{@docRoot}training/material/animations.html">カスタム アニメーションの定義</a>をご覧ください。
</p>
<h3>ドローアブル</h3>
<p>次の新しいドローアブル機能を使用してマテリアル デザイン アプリを実装できます。</p>
<ul>
<li><strong>ベクター型ドローアブル</strong>は定義を失わずにスケールできるので、単色のアプリ アイコンに最適です。
</li>
<li><strong>ドローアブルによる着色</strong>を使ってビットマップをアルファ マスクとして定義し、実行時にそのビットマップに色付けできます。
</li>
<li><strong>色の抽出</strong>を使ってビットマップ画像から代表色を自動的に抽出できます。
</li>
</ul>
<p>詳細については、<a href="{@docRoot}training/material/drawables.html">ドローアブルの使用</a>をご覧ください。
</p>
|
