• 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">Применение темы Material Design</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">Спецификация Material Design</a></li>
18  <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
19</ul>
20</div>
21</div>
22
23
24<p>Порядок создания приложения с элементами Material Design</p>
25
26<ol>
27  <li style="margin-bottom:10px">
28    Ознакомьтесь со <a href="http://www.google.com/design/spec">спецификацией Material Design</a>.</li>
29  <li style="margin-bottom:10px">
30    Примените <strong>тему Material Design</strong> к своему приложению.</li>
31  <li style="margin-bottom:10px">
32    Создайте <strong>макеты</strong> в соответствии с рекомендациями Material Design.</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>В приложении можно реализовать множество функций Material Design и одновременно сохранить его совместимость с версиями Android, предшествующими версии 5.0.
44 Дополнительные сведения представлены на странице
45<a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
46
47<h3>Обновление приложения с добавлением элементов Material Design</h3>
48
49<p>Чтобы дополнить существующее приложение функциями и элементами Material Design, обновите макеты в соответствии с рекомендациями Material Design.
50 Также не забудьте добавить в приложение функции глубины, реакции на касание и анимации.
51</p>
52
53<h3>Создание новых приложений с элементами Material Design</h3>
54
55<p>При создании приложений с "материальными" функциями следуйте <a href="http://www.google.com/design/spec">рекомендациям Material Design</a>, которые позволят вам получить целостное представление о новых принципах дизайна.
56 При проектировании и разработке своего приложения следуйте инструкциям и используйте новые функциональные возможности платформы Android.
57</p>
58
59
60<h2 id="ApplyTheme">Применение темы Material Design</h2>
61
62<p>Чтобы применить тему Material Design в своем приложении, укажите стиль, который наследует от
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>В теме Material Design содержатся обновленные системные виджеты, для которых можно настраивать цветовую палитру, а также стандартные анимации для реакции на касания и переходы.
76 Дополнительные сведения представлены в разделе
77<a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a>.</p>
78
79
80<h2 id="Layouts">Разработка макетов</h2>
81
82<p>Помимо применения и настройки темы Material Design, необходимо соответствие
83<a href="http://www.google.com/design/spec">рекомендациям Material Design</a> используемых макетов. При разработке макетов необходимо контролировать следующие элементы:
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 Изменения высоты могут быть полезны при
113<a href="{@docRoot}training/material/animations.html#ViewState">реагировании на сенсорные
114жесты</a>.</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