summaryrefslogtreecommitdiffstats
path: root/docs/html-intl/intl/zh-cn/design/material/index.jd
diff options
context:
space:
mode:
Diffstat (limited to 'docs/html-intl/intl/zh-cn/design/material/index.jd')
-rw-r--r--docs/html-intl/intl/zh-cn/design/material/index.jd186
1 files changed, 186 insertions, 0 deletions
diff --git a/docs/html-intl/intl/zh-cn/design/material/index.jd b/docs/html-intl/intl/zh-cn/design/material/index.jd
new file mode 100644
index 0000000..78e6d38
--- /dev/null
+++ b/docs/html-intl/intl/zh-cn/design/material/index.jd
@@ -0,0 +1,186 @@
+page.title=材料设计
+page.tags=Material, design
+page.type=设计
+page.image=design/material/images/MaterialLight.png
+
+@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 提供了两个全新的小工具,用于显示采用材料设计样式和动画的卡片和列表:
+</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>除了 X 和 Y 属性之外,Android 中的视图现在还提供了 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>动画以动画形式呈现一个或多个视图属性的更改。
+</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>可让您将位图定义为 alpha 蒙板,并在运行时为其着色。
+</li>
+<li><strong>颜色提取</strong>可让您从位图图像自动提取突出色彩。
+</li>
+</ul>
+
+<p>如需了解详细信息,请参阅<a href="{@docRoot}training/material/drawables.html">使用可绘制内容</a>。
+</p>