1page.title=Material Design для Android 2page.tags=Material,design 3page.type=разработка 4page.image=images/cards/design-material-for-android_2x.jpg 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>Создание приложений с помощью Material Design</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>Введение в Material Design</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>Material Design в приложениях для конференции Google I/O</p> 37</div> 38</a> 39 40 41 42<p itemprop="description">Material Design представляет собой комплексную концепцию создания визуальных, движущихся и 43 интерактивных элементов для различных платформ и устройств. Теперь Android включает в себя поддержку 44приложений с элементами Material Design. Чтобы использовать элементы Material Design в своих приложениях под Android, руководствуйтесь инструкциями 45в <a href="http://www.google.com/design/spec">спецификации Material Design</a>, а также воспользуйтесь 46новыми компонентами и функциями, доступными в Android 5.0 (уровень API 21) и выше.</p> 47 48<p>Android предоставляет следующие элементы для построения приложений в соответствии с концепцией Material Design:</p> 49 50<ul> 51 <li>новую тему;</li> 52 <li>новые виджеты для сложных представлений;</li> 53 <li>новые API-интерфейсы для нестандартных теней и анимаций.</li> 54</ul> 55 56<p>Дополнительные сведения о реализации Material Design в Android см. в разделе 57<a href="{@docRoot}training/material/index.html">Создание приложений с помощью Material Design</a>.</p> 58 59 60<h3>Тема Material Design</h3> 61 62<p>Тема Material Design предоставляет новый стиль для ваших приложений, системные виджеты, для которых можно настраивать 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">Тема Material Design в темных тонах</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">Тема Material Design в светлых тонах</p> 77 </div> 78</div> 79<br style="clear:left"/> 80</div> 81 82<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/theme.html">Использование темы 83Material Design</a>.</p> 84 85 86<h3>Списки и подсказки</h3> 87 88<p>Android предоставляет два новых виджета для отображения подсказок и списков с использованием стилей 89и анимаций Material Design:</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">Создание списков 107и подсказок</a>.</p> 108 109 110<h3>Тени представлений</h3> 111 112<p>Теперь, помимо свойств X и Y, представления в Android имеют свойство 113Z. Это новое свойство показывает, насколько представление "приподнято", иными словами, определяет</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">Определение 134теней и обрезка представлений</a>.</p> 135 136 137<h3>Анимация</h3> 138 139<p>Новые API-интерфейсы анимации позволяют создавать нестандартную анимацию для реакции на касание в элементах пользовательского интерфейса, 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">Определение настраиваемой 169анимации</a>.</p> 170 171 172<h3>Графические объекты</h3> 173 174<p>Следующие возможности по работе с графическими объектами облегчают реализацию приложений с элементами Material Design:</p> 175 176<ul> 177<li><strong>векторные объекты</strong> можно масштабировать без ущерба для четкости, и они отлично подходят 178в качестве одноцветных значков приложения;</li> 179<li><strong>тонирование графических объектов</strong> позволяет определять растровые изображения как альфа-маску и тонировать их 180нужным цветом во время выполнения;</li> 181<li><strong>извлечение цвета</strong> позволяет автоматически извлекать главные цвета из 182растровых изображений.</li> 183</ul> 184 185<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/drawables.html">Работа с 186элементами дизайна</a>.</p> 187
