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="#Elevation">Установка высоты представления</a></li>
10  <li><a href="#Shadows">Настройка теней и контуров представления</a></li>
11  <li><a href="#Clip">Обрезка представления</a></li>
12</ol>
13<h2>См. также</h2>
14<ul>
15  <li><a href="http://www.google.com/design/spec">Спецификация Material Design</a></li>
16  <li><a href="{@docRoot}design/material/index.html">Material Design в Android</a></li>
17</ul>
18</div>
19</div>
20
21<p>В Material Design появилась возможность настройки высоты элементов интерфейса. Высота позволяет пользователю понять относительную важность каждого элемента и сосредоточиться на выполнении поставленной задачи.
22</p>
23
24<p>Высота представления, выраженная с помощью свойства Z, определяет внешний вид его тени: представления с более высоким значением Z отбрасывают более мягкие тени большего размера.
25 Представления с более высокими значениями Z перекрывают представления с более низкими значениями Z, однако значение Z не влияет на размер самого представления.
26</p>
27
28<p>Прорисовка теней выполняется родительским представлением, поэтому к приподнятому представлению можно применять стандартную операцию обрезки представления (по умолчанию представление обрезается своим родительским представлением).
29</p>
30
31<p>Установка высоты также полезна для создания анимации, когда виджеты временно поднимаются выше плоскости представления при выполнении какого-либо действия.
32</p>
33
34<p>Дополнительные сведения об установке высоты в Material Design представлены на странице
35<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Объекты в трехмерном пространстве</a>.
36</p>
37
38
39<h2 id="Elevation">Установка высоты представления</h2>
40
41<p>Значение Z для представления включает два компонента:
42
43<ul>
44<li>высота: статический компонент;</li>
45<li>смещение: динамический компонент, используемый для анимации.</li>
46</ul>
47
48<p><code>Z = elevation + translationZ</code></p>
49
50<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
51<p class="img-caption"><strong>Рисунок 1</strong>. Тени для различной высоты представления.</p>
52
53<p>Чтобы установить высоту представления в определении макета, используйте атрибут <code>android:elevation</code>
54. Чтобы установить высоту представления в программном коде операции, используйте метод
55{@link android.view.View#setElevation View.setElevation()}.</p>
56
57<p>Чтобы установить смещение представления, используйте метод {@link android.view.View#setTranslationZ
58View.setTranslationZ()}.</p>
59
60<p>Новые методы {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} и {@link
61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} позволяют с легкостью анимировать изменение высоты представлений.
62 Дополнительные сведения см. в справке по API для
63{@link android.view.ViewPropertyAnimator}, а также в руководстве по <a href="{@docRoot}guide/topics/graphics/prop-animation.html">анимации свойств</a> для разработчиков.
64</p>
65
66<p>Также можно использовать класс {@link android.animation.StateListAnimator} для декларирования этих анимаций.
67 Это особенно полезно в тех случаях, когда анимация запускается при изменении состояния, например, когда пользователь нажимает на кнопку.
68 Дополнительные сведения см. в разделе
69<a href="{@docRoot}training/material/animations.html#ViewState">Анимация изменений состояния представления</a>.</p>
70
71<p>Значения Z измеряются в dp (пиксели, не зависящие от плотности).</p>
72
73
74<h2 id="Shadows">Настройка теней и контуров представления</h2>
75
76<p>Границы фонового элемента представления определяют форму его тени по умолчанию.
77<strong>Контуры</strong> — это внешние границы графического объекта, они также определяют область ряби для отклика на касание.
78</p>
79
80<p>В примере ниже рассматривается это представление, определенное с помощью фонового элемента дизайна:</p>
81
82<pre>
83&lt;TextView
84    android:id="@+id/myview"
85    ...
86    android:elevation="2dp"
87    android:background="@drawable/myrect" />
88</pre>
89
90<p>Фоновый элемент дизайна определен как прямоугольник со скругленными углами:</p>
91
92<pre>
93&lt;!-- res/drawable/myrect.xml -->
94&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
95       android:shape="rectangle">
96    &lt;solid android:color="#42000000" />
97    &lt;corners android:radius="5dp" />
98&lt;/shape>
99</pre>
100
101<p>Представление отбрасывает тень с закругленными углами, поскольку контур представления определяется фоновым элементом дизайна.
102 Если указать настраиваемый контур, он будет переопределять стандартную форму тени для представления.</p>
103
104<p>Порядок определения настраиваемого контура представления в программном коде<p>
105
106<ol>
107<li>Сначала наследуйте класс {@link android.view.ViewOutlineProvider}.</li>
108<li>Затем переопределите метод {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
109<li>Наконец, назначьте источник контуров для своего представления с помощью метода {@link
110android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
111</ol>
112
113<p>Можно создавать овальные и прямоугольные контуры со скругленными углами, используя для этого методы класса
114{@link android.graphics.Outline}. Стандартный источник контуров получает контуры из фона представления.
115 Чтобы представление не отбрасывало тень, задайте для источника контуров значение <code>null</code>.
116</p>
117
118
119<h2 id="Clip">Обрезка представления</h2>
120
121<p>С помощью обрезки представлений можно с легкостью изменять их форму. Представление можно обрезать для обеспечения единообразия элементов дизайна.
122Также можно изменить форму представления в ответ на действия пользователя.
123С помощью метода {@link android.view.View#setClipToOutline
124View.setClipToOutline()} или атрибута <code>android:clipToOutline</code> представление можно обрезать по его контуру. Обрезать
125можно только прямоугольники, круги и скругленные прямоугольники, как определено в методе
126{@link android.graphics.Outline#canClip Outline.canClip()}.</p>
127
128<p>Чтобы обрезать представление по форме элемента дизайна, установите этот элемент в качестве фона представления
129(как показано выше) и вызовите метод {@link android.view.View#setClipToOutline View.setClipToOutline()}
130.</p>
131
132<p>Обрезка представления — довольно ресурсоемкая операция, поэтому не анимируйте форму, которую вы используете для обрезки представления.
133 Для достижения требуемого эффекта используйте анимацию <a href="{@docRoot}training/material/animations.html#Reveal">эффекта появления</a>.</p>
134