1page.title=Android 材料设计
2page.tags=Material,design,设计
3page.image=images/cards/design-material-for-android_2x.jpg
4
5@jd:body
6
7<!-- developer docs box -->
8<a class="notice-developers right" href="{@docRoot}training/material/index.html">
9  <div>
10    <h3>开发者文档</h3>
11    <p>使用材料设计创建应用</p>
12  </div>
13</a>
14
15<!-- video box -->
16<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
17<div>
18    <h3>视频</h3>
19    <p>材料设计简介</p>
20</div>
21</a>
22
23<!-- video box -->
24<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
25<div>
26    <h3>视频</h3>
27    <p>纸张和墨水：相关材料</p>
28</div>
29</a>
30
31<!-- video box -->
32<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
33<div>
34    <h3>视频</h3>
35    <p>Google I/O 应用中的材料设计</p>
36</div>
37</a>
38
39
40
41<p itemprop="description">材料设计是专为设计适用于多个平台和设备的视觉、运动与互动效果而制定的综合指南。
42Android 现在已支持材料设计应用。
43如果要在您的 Android 应用中使用材料设计，请遵循<a href="http://www.google.com/design/spec">材料设计规范</a>内定义的指导方针，并使用 Android 5.0（API 级别 21）及以上版本所提供的新组件和功能。
44
45</p>
46
47<p>Android 为您提供了以下元素来构建材料设计应用：</p>
48
49<ul>
50  <li>全新的风格主题</li>
51  <li>用于设计复杂视图的全新小工具</li>
52  <li>用于自定义阴影和动画的全新 API</li>
53</ul>
54
55<p>有关在 Android 上实现材料设计的详细信息，请参阅<a href="{@docRoot}training/material/index.html">使用材料设计创建应用</a>。
56</p>
57
58
59<h3>材料主题</h3>
60
61<p>材料主题提供了新的应用样式和系统小工具，让您能够为触摸反馈以及 Activity 转换设置配色工具以及默认动画。
62</p>
63
64<!-- two columns -->
65<div style="width:700px;margin-top:25px;margin-bottom:20px">
66<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
67  <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
68  <div style="width:140px;margin:0 auto">
69  <p style="margin-top:8px">深色材料主题</p>
70  </div>
71</div>
72<div style="float:left;width:250px;margin-right:0px;">
73  <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
74  <div style="width:140px;margin:0 auto">
75  <p style="margin-top:8px">浅色材料主题</p>
76  </div>
77</div>
78<br style="clear:left"/>
79</div>
80
81<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/theme.html">使用材料主题
82</a>。</p>
83
84
85<h3>列表和卡片</h3>
86
87<p>Android 提供了两个全新的小工具，用于显示采用材料设计样式和动画的卡片和列表：
88</p>
89
90<!-- two columns -->
91<div style="width:700px;margin-top:25px;margin-bottom:20px">
92<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
93  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
94  <p>全新的 <code>RecyclerView</code> 小工具是 <code>ListView</code>
95 的可插入版本，支持不同的布局类型，并且具有更高性能。</p>
96</div>
97<div style="float:left;width:250px;margin-right:0px;">
98  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
99  <p>全新的 <code>CardView</code> 小工具可让您展示卡片内的重要信息，并且有统一的观感。
100</p>
101</div>
102<br style="clear:left"/>
103</div>
104
105<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/lists-cards.html">创建列表和卡片</a>。
106</p>
107
108
109<h3>视图阴影</h3>
110
111<p>除了 X 和 Y 属性之外，Android 中的视图现在还提供了 Z
112属性。这一新属性用于展现视图的高度，从而确定：</p>
113
114<ul>
115<li>阴影的大小：Z 值越高的视图投射的阴影越长。</li>
116<li>绘制顺序：Z 值较高的视图会显示在其他视图的上方。</li>
117</ul>
118
119<div style="width:290px;margin-left:35px;float:right">
120  <div class="framed-nexus5-port-span-5">
121  <video class="play-on-hover" autoplay>
122    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
123    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>
124    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
125  </video>
126  </div>
127  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
128    <em>如果要重新播放影片，请点击设备屏幕</em>
129  </div>
130</div>
131
132<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a>。
133</p>
134
135
136<h3>动画</h3>
137
138<p>动画 API 让您可为 UI 控件中的触摸反馈、视图状态更改以及 Activity 转换创建自定义动画。
139</p>
140
141<p>这些 API 的作用是：</p>
142
143<ul>
144<li style="margin-bottom:15px">
145使用<strong>触摸反馈</strong>动画响应视图中的触摸事件。
146</li>
147<li style="margin-bottom:15px">
148使用<strong>循环显示</strong>动画隐藏和显示视图。
149</li>
150<li style="margin-bottom:15px">
151使用自定义 <strong>Activity 转换</strong>动画切换 Activity。
152</li>
153<li style="margin-bottom:15px">
154使用<strong>曲线运动</strong>创建更自然的动画。
155</li>
156<li style="margin-bottom:15px">
157使用<strong>视图状态更改</strong>动画以动画形式呈现一个或多个视图属性的更改。
158</li>
159<li style="margin-bottom:15px">
160在视图状态更改期间以<strong>可绘制状态列表</strong>显示动画。
161</li>
162</ul>
163
164<p>触摸反馈动画内建于数个标准视图（例如按钮）中。全新的 API让您可以自定义这些动画并将其添加至自己的自定义视图中。
165</p>
166
167<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/animations.html">定义自定义动画</a>。
168</p>
169
170
171<h3>可绘制对象</h3>
172
173<p>下列可绘制对象的新功能将帮助您实现材料设计应用：</p>
174
175<ul>
176<li><strong>可绘制矢量</strong>可在不影响清晰度的情况下进行缩放，非常适合单色应用内图标。
177</li>
178<li><strong>可绘制底色</strong>可让您将位图定义为 alpha 蒙板，并在运行时为其着色。
179</li>
180<li><strong>颜色提取</strong>可让您从位图图像自动提取突出色彩。
181</li>
182</ul>
183
184<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/drawables.html">使用可绘制内容</a>。
185</p>
186