| page.title=Определение теней и обрезка представлений |
| |
| @jd:body |
| |
| <div id="tb-wrapper"> |
| <div id="tb"> |
| <h2>Содержание этого урока</h2> |
| <ol> |
| <li><a href="#Elevation">Установка высоты представления</a></li> |
| <li><a href="#Shadows">Настройка теней и контуров представления</a></li> |
| <li><a href="#Clip">Обрезка представления</a></li> |
| </ol> |
| <h2>См. также</h2> |
| <ul> |
| <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li> |
| <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <p>В Material Design появилась возможность настройки высоты элементов интерфейса. Высота позволяет пользователю понять относительную важность каждого элемента и сосредоточиться на выполнении поставленной задачи. |
| </p> |
| |
| <p>Высота представления, выраженная с помощью свойства Z, определяет внешний вид его тени: представления с более высоким значением Z отбрасывают более мягкие тени большего размера. |
| Представления с более высокими значениями Z перекрывают представления с более низкими значениями Z, однако значение Z не влияет на размер самого представления. |
| </p> |
| |
| <p>Прорисовка теней выполняется родительским представлением, поэтому к приподнятому представлению можно применять стандартную операцию обрезки представления (по умолчанию представление обрезается своим родительским представлением). |
| </p> |
| |
| <p>Установка высоты также полезна для создания анимации, когда виджеты временно поднимаются выше плоскости представления при выполнении какого-либо действия. |
| </p> |
| |
| <p>Дополнительные сведения об установке высоты в Material Design представлены на странице |
| <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Объекты в трехмерном пространстве</a>. |
| </p> |
| |
| |
| <h2 id="Elevation">Установка высоты представления</h2> |
| |
| <p>Значение Z для представления включает два компонента: |
| |
| <ul> |
| <li>высота: статический компонент;</li> |
| <li>смещение: динамический компонент, используемый для анимации.</li> |
| </ul> |
| |
| <p><code>Z = elevation + translationZ</code></p> |
| |
| <img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" /> |
| <p class="img-caption"><strong>Рисунок 1</strong>. Тени для различной высоты представления.</p> |
| |
| <p>Чтобы установить высоту представления в определении макета, используйте атрибут <code>android:elevation</code> |
| . Чтобы установить высоту представления в программном коде операции, используйте метод |
| {@link android.view.View#setElevation View.setElevation()}.</p> |
| |
| <p>Чтобы установить смещение представления, используйте метод {@link android.view.View#setTranslationZ |
| View.setTranslationZ()}.</p> |
| |
| <p>Новые методы {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} и {@link |
| android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} позволяют с легкостью анимировать изменение высоты представлений. |
| Дополнительные сведения см. в справке по API для |
| {@link android.view.ViewPropertyAnimator}, а также в руководстве по <a href="{@docRoot}guide/topics/graphics/prop-animation.html">анимации свойств</a> для разработчиков. |
| </p> |
| |
| <p>Также можно использовать класс {@link android.animation.StateListAnimator} для декларирования этих анимаций. |
| Это особенно полезно в тех случаях, когда анимация запускается при изменении состояния, например, когда пользователь нажимает на кнопку. |
| Дополнительные сведения см. в разделе |
| <a href="{@docRoot}training/material/animations.html#ViewState">Анимация изменений состояния представления</a>.</p> |
| |
| <p>Значения Z измеряются в dp (пиксели, не зависящие от плотности).</p> |
| |
| |
| <h2 id="Shadows">Настройка теней и контуров представления</h2> |
| |
| <p>Границы фонового элемента представления определяют форму его тени по умолчанию. |
| <strong>Контуры</strong> — это внешние границы графического объекта, они также определяют область ряби для отклика на касание. |
| </p> |
| |
| <p>В примере ниже рассматривается это представление, определенное с помощью фонового элемента дизайна:</p> |
| |
| <pre> |
| <TextView |
| android:id="@+id/myview" |
| ... |
| android:elevation="2dp" |
| android:background="@drawable/myrect" /> |
| </pre> |
| |
| <p>Фоновый элемент дизайна определен как прямоугольник со скругленными углами:</p> |
| |
| <pre> |
| <!-- res/drawable/myrect.xml --> |
| <shape xmlns:android="http://schemas.android.com/apk/res/android" |
| android:shape="rectangle"> |
| <solid android:color="#42000000" /> |
| <corners android:radius="5dp" /> |
| </shape> |
| </pre> |
| |
| <p>Представление отбрасывает тень с закругленными углами, поскольку контур представления определяется фоновым элементом дизайна. |
| Если указать настраиваемый контур, он будет переопределять стандартную форму тени для представления.</p> |
| |
| <p>Порядок определения настраиваемого контура представления в программном коде<p> |
| |
| <ol> |
| <li>Сначала наследуйте класс {@link android.view.ViewOutlineProvider}.</li> |
| <li>Затем переопределите метод {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> |
| <li>Наконец, назначьте источник контуров для своего представления с помощью метода {@link |
| android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> |
| </ol> |
| |
| <p>Можно создавать овальные и прямоугольные контуры со скругленными углами, используя для этого методы класса |
| {@link android.graphics.Outline}. Стандартный источник контуров получает контуры из фона представления. |
| Чтобы представление не отбрасывало тень, задайте для источника контуров значение <code>null</code>. |
| </p> |
| |
| |
| <h2 id="Clip">Обрезка представления</h2> |
| |
| <p>С помощью обрезки представлений можно с легкостью изменять их форму. Представление можно обрезать для обеспечения единообразия элементов дизайна. |
| Также можно изменить форму представления в ответ на действия пользователя. |
| С помощью метода {@link android.view.View#setClipToOutline |
| View.setClipToOutline()} или атрибута <code>android:clipToOutline</code> представление можно обрезать по его контуру. Обрезать |
| можно только прямоугольники, круги и скругленные прямоугольники, как определено в методе |
| {@link android.graphics.Outline#canClip Outline.canClip()}.</p> |
| |
| <p>Чтобы обрезать представление по форме элемента дизайна, установите этот элемент в качестве фона представления |
| (как показано выше) и вызовите метод {@link android.view.View#setClipToOutline View.setClipToOutline()} |
| .</p> |
| |
| <p>Обрезка представления — довольно ресурсоемкая операция, поэтому не анимируйте форму, которую вы используете для обрезки представления. |
| Для достижения требуемого эффекта используйте анимацию <a href="{@docRoot}training/material/animations.html#Reveal">эффекта появления</a>.</p> |