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