1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
page.title=Material Design
page.tags=Material Design
page.type=design
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>Создание приложений с помощью Material Design</p>
</div>
</a>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
<div>
<h3>Видеоролик</h3>
<p>Введение в Material Design</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>Material Design в приложениях для конференции Google I/O</p>
</div>
</a>
<p itemprop="description">Material Design представляет собой комплексную концепцию создания визуальных, движущихся и
интерактивных элементов для различных платформ и устройств. Теперь Android включает в себя поддержку
приложений с элементами Material Design. Чтобы использовать элементы Material Design в своих приложениях под Android, руководствуйтесь инструкциями
в <a href="http://www.google.com/design/spec">спецификации Material Design</a>, а также воспользуйтесь
новыми компонентами и функциями, доступными в Android 5.0 (уровень API 21) и выше.</p>
<p>Android предоставляет следующие элементы для построения приложений в соответствии с концепцией Material Design:</p>
<ul>
<li>новую тему;</li>
<li>новые виджеты для сложных представлений;</li>
<li>новые API-интерфейсы для нестандартных теней и анимаций.</li>
</ul>
<p>Дополнительные сведения о реализации Material Design в Android см. в разделе
<a href="{@docRoot}training/material/index.html">Создание приложений с помощью Material Design</a>.</p>
<h3>Тема Material Design</h3>
<p>Тема Material Design предоставляет новый стиль для ваших приложений, системные виджеты, для которых можно настраивать
цветовую палитру, и анимации, выполняемые по умолчанию в качестве реакции на касание и при переходах между действиями.</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">Тема Material Design в темных тонах</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">Тема Material Design в светлых тонах</p>
</div>
</div>
<br style="clear:left"/>
</div>
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/theme.html">Использование темы
Material Design</a>.</p>
<h3>Списки и подсказки</h3>
<p>Android предоставляет два новых виджета для отображения подсказок и списков с использованием стилей
и анимаций Material Design:</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-интерфейсы анимации позволяют создавать нестандартную анимацию для реакции на касание в элементах пользовательского интерфейса,
изменения состояниия представления и переходов между действиями.</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>Следующие возможности по работе с графическими объектами облегчают реализацию приложений с элементами Material Design:</p>
<ul>
<li><strong>векторные объекты</strong> можно масштабировать без ущерба для четкости, и они отлично подходят
в качестве одноцветных значков приложения;</li>
<li><strong>тонирование графических объектов</strong> позволяет определять растровые изображения как альфа-маску и тонировать их
нужным цветом во время выполнения;</li>
<li><strong>извлечение цвета</strong> позволяет автоматически извлекать главные цвета из
растровых изображений.</li>
</ul>
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/drawables.html">Работа с
элементами дизайна</a>.</p>
|
