• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=入门指南
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>本课程将向您展示如何</h2>
8<ol>
9  <li><a href="#ApplyTheme">使用材料主题</a></li>
10  <li><a href="#Layouts">设计布局</a></li>
11  <li><a href="#Depth">指定您视图内的高度</a></li>
12  <li><a href="#ListsCards">创建列表与卡片</a></li>
13  <li><a href="#Animations">定制您的动画</a></li>
14</ol>
15<h2>您也应该阅读</h2>
16<ul>
17  <li><a href="http://www.google.com/design/spec">材料设计规范</a></li>
18  <li><a href="{@docRoot}design/material/index.html">Android 材料设计</a></li>
19</ul>
20</div>
21</div>
22
23
24<p>如果要使用材料设计创建应用：</p>
25
26<ol>
27  <li style="margin-bottom:10px">
28    请查阅<a href="http://www.google.com/design/spec">材料设计规范</a>。</li>
29  <li style="margin-bottom:10px">
30    在您的应用中使用材料<strong>主题</strong>。</li>
31  <li style="margin-bottom:10px">
32    遵循材料设计指导方针创建您的<strong>布局</strong>。</li>
33  <li style="margin-bottom:10px">
34    指定您视图要投射阴影的<strong>高度</strong>。</li>
35  <li style="margin-bottom:10px">
36    使用系统<strong>小组件</strong>呈现列表与卡片。</li>
37  <li style="margin-bottom:10px">
38    定制您的应用中的<strong>动画</strong>。</li>
39</ol>
40
41<h3>保持后向兼容性</h3>
42
43<p>您可将多个材料设计功能添加至您的应用，同时保持与 Android 5.0 之前的 Android 版本的兼容性。
44如果要了解更多信息，请参阅
45<a href="{@docRoot}training/material/compatibility.html">保持兼容性</a>。</p>
46
47<h3>使用材料设计更新您的应用</h3>
48
49<p>如果要更新现有应用以纳入材料设计，请遵循材料设计指导方针更新您的布局。
50同时也须确保纳入深度、触摸反馈和动画。
51</p>
52
53<h3>使用材料设计创建新应用</h3>
54
55<p>如果您要使用材料设计功能创建新应用，<a href="http://www.google.com/design/spec">材料设计指导方针</a>将为您提供一个紧密结合的设计框架。
56请遵循这些指导方针并使用 Android
57框架中的新功能来设计与开发您的应用。</p>
58
59
60<h2 id="ApplyTheme">使用材料主题</h2>
61
62<p>如果要在您的应用中使用材料主题，请指定一个从
63<code>android:Theme.Material</code> 继承的风格：</p>
64
65<pre>
66&lt;!-- res/values/styles.xml -->
67&lt;resources>
68  &lt;!-- your theme inherits from the material theme -->
69  &lt;style name="AppTheme" parent="android:Theme.Material">
70    &lt;!-- theme customizations -->
71  &lt;/style>
72&lt;/resources>
73</pre>
74
75<p>材料主题提供更新的系统小组件，让您能够为触摸反馈以及操作行为转换设置配色工具以及默认动画。
76有关更多详情，请参阅<a href="{@docRoot}training/material/theme.html">使用材料主题</a>。
77</p>
78
79
80<h2 id="Layouts">设计布局</h2>
81
82<p>除了应用及定制材料主题，您的布局同时也应符合<a href="http://www.google.com/design/spec">材料设计指导方针</a>。
83设计布局时，请特别注意下列几点：
84</p>
85
86<ul>
87<li>基线格点</li>
88<li>关键线</li>
89<li>间距</li>
90<li>触摸目标大小</li>
91<li>布局结构</li>
92</ul>
93
94
95<h2 id="Depth">指定您视图内的高度</h2>
96
97<p>视图可透射阴影，而视图的高度值将决定其阴影的大小以及其显示顺序。
98如果要设置视图的高度，请使用您的布局中的
99<code>android:elevation</code> 属性：</p>
100
101<pre>
102&lt;TextView
103    android:id="&#64;+id/my_textview"
104    android:layout_width="wrap_content"
105    android:layout_height="wrap_content"
106    android:text="&#64;string/next"
107    android:background="&#64;color/white"
108    android:elevation="5dp" />
109</pre>
110
111<p>新的 <code>translationZ</code> 属性可让您创建反映出视图高度临时变化的动画。
112高度变化可在<a href="{@docRoot}training/material/animations.html#ViewState">响应触摸手势</a>时发挥作用。
113
114</p>
115
116<p>有关更多详情，请参阅<a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a>。
117</p>
118
119
120<h2 id="ListsCards">创建列表与卡片</h2>
121
122<p>{@link android.support.v7.widget.RecyclerView} 是 {@link
123android.widget.ListView} 的可插入版本，支持不同布局类型，具有更高性能。
124{@link android.support.v7.widget.CardView} 让您能够展示卡片内的各种信息并且在各种应用中实现一致的呈现方式。
125下列代码示例将展示如何将
126{@link android.support.v7.widget.CardView} 包括在您的布局中：</p>
127
128<pre>
129&lt;android.support.v7.widget.CardView
130    android:id="&#64;+id/card_view"
131    android:layout_width="200dp"
132    android:layout_height="200dp"
133    card_view:cardCornerRadius="3dp">
134    ...
135&lt;/android.support.v7.widget.CardView>
136</pre>
137
138<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/lists-cards.html">创建列表和卡片</a>。
139</p>
140
141
142<h2 id="Animations">定制您的动画</h2>
143
144<p>Android 5.0（API 级别 21）包括新 API，可用于在您的应用中创建定制动画。例如，您可启用操作行为转换并定义操作行为内的退出转换：
145
146</p>
147
148<pre>
149public class MyActivity extends Activity {
150
151    &#64;Override
152    protected void onCreate(Bundle savedInstanceState) {
153        super.onCreate(savedInstanceState);
154        // enable transitions
155        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
156        setContentView(R.layout.activity_my);
157    }
158
159    public void onSomeButtonClicked(View view) {
160        getWindow().setExitTransition(new Explode());
161        Intent intent = new Intent(this, MyOtherActivity.class);
162        startActivity(intent,
163                      ActivityOptions
164                          .makeSceneTransitionAnimation(this).toBundle());
165    }
166}
167</pre>
168
169<p>当您从此操作行为启动另一个操作行为时，退出转换将被激活。</p>
170
171<p>如果要了解有关新动画 API 的更多详情，请参阅<a href="{@docRoot}training/material/animations.html">定义定制动画</a>。</p>
172