docs/html-intl/intl/ru/training/material/shadows-clipping.jd

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>
&lt;TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />
</pre>

<p>Фоновый элемент дизайна определен как прямоугольник со скругленными углами:</p>

<pre>
&lt;!-- res/drawable/myrect.xml -->
&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    &lt;solid android:color="#42000000" />
    &lt;corners android:radius="5dp" />
&lt;/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>