1page.title=Como definir sombras e recortar visualizações
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>Esta lição ensina a</h2>
8<ol>
9  <li><a href="#Elevation">Atribuir elevação a visualizações</a></li>
10  <li><a href="#Shadows">Personalizar sombras e contornos de visualizações</a></li>
11  <li><a href="#Clip">Recortar visualizações</a></li>
12</ol>
13<h2>Você também deve ler</h2>
14<ul>
15  <li><a href="http://www.google.com/design/spec">Especificações do Material Design</a></li>
16  <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li>
17</ul>
18</div>
19</div>
20
21<p>O Material Design introduz a elevação em elementos da interface do usuário. A elevação ajuda os usuários a entender
22a importância relativa de cada elemento e concentrar a atenção deles nas tarefas à mão.</p>
23
24<p>A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual das
25sombras: visualizações com valores de Z mais altos lançam sombras maiores e mais suaves. Visualizações com valores de Z mais altos ocultam
26visualizações com valores de Z mais baixos, mas o valor de Z de uma visualização não afeta o tamanho dela.</p>
27
28<p>As sombras são desenhadas pelo pai da visualização elevada e, por isso, estão sujeitas a recortes padrão de
29visualização, recortadas pelo pai por padrão.</p>
30
31<p>A elevação também é útil para criar animações em que os widgets se elevam temporariamente
32sobre o plano de visualização ao realizar alguma ação.</p>
33
34<p>Para obter mais informações sobre elevação no Material Design, consulte
35<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos
36no espaço 3D</a>.</p>
37
38
39<h2 id="Elevation">Atribuir elevação a visualizações</h2>
40
41<p>O valor de Z para uma visualização tem dois componentes:
42
43<ul>
44<li>Elevação: o componente estático.</li>
45<li>Movimentação: o componente dinâmico usado para animações.</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>Figura 1</strong> - sombras para diferentes elevações de visualização.</p>
52
53<p>Para definir a elevação de uma visualização em uma definição de layout, use o atributo <code>android:elevation</code>
54. Para definir a elevação de uma visualização no código de uma atividade, use o método
55{@link android.view.View#setElevation View.setElevation()}.</p>
56
57<p>Para definir a conversão de uma visualização, use o método {@link android.view.View#setTranslationZ
58View.setTranslationZ()}.</p>
59
60<p>Os novos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} e {@link
61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} permitem
62animar facilmente a elevação de visualizações. Para obter mais informações, consulte a referência de API para
63{@link android.view.ViewPropertyAnimator} e o guia do desenvolvedor <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animação de
64propriedade</a>.</p>
65
66<p>Você também pode usar um {@link android.animation.StateListAnimator} para
67especificar essas animações de um modo declarativo, o que é especialmente útil para casos em que o estado muda
68as animações de acionamento, como quando um usuário pressiona um botão. Para obter mais informações, consulte
69<a href="{@docRoot}training/material/animations.html#ViewState">Mudanças de estado de visualização da animação</a>.</p>
70
71<p>Os valores de Z são medidos em dp (pixels independentes de densidade).</p>
72
73
74<h2 id="Shadows">Personalizar sombras e contornos de visualizações</h2>
75
76<p>Os limites de um desenhável do segundo plano da visualização determinam a forma padrão da sombra.
77<strong>Contornos</strong> representam a forma externa de um objeto gráfico e definem a área
78de ondulação para o feedback de toque.</p>
79
80<p>Analise esta visualização, definida com um desenhável de segundo plano:</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>O desenhável do segundo plano é definido como um retângulo com bordas arredondadas:</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>A visualização lança uma sombra com bordas arredondadas, uma vez que o desenhável de segundo plano
102define o contorno da visualização. Fornecer um contorno personalizado neutraliza a forma padrão de uma sombra da visualização.</p>
103
104<p>Para definir um contorno personalizado para uma visualização no seu código:<p>
105
106<ol>
107<li>Amplie a classe {@link android.view.ViewOutlineProvider}.</li>
108<li>Neutralize o método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
109<li>Atribua o novo fornecedor de contorno à visualização com o método {@link
110android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
111</ol>
112
113<p>Você pode criar contornos ovais e retangulares com bordas arredondadas usando os métodos na classe
114{@link android.graphics.Outline}. O fornecedor de contorno padrão para visualizações obtém o contorno
115do segundo plano da visualização. Para evitar que uma visualização lance uma sombra, defina o fornecedor de contorno
116dela como <code>null</code>.</p>
117
118
119<h2 id="Clip">Recortar visualizações</h2>
120
121<p>Recortar visualizações permite mudar facilmente a forma de uma visualização. Você pode recortar visualizações
122para obter consistência com outros elementos de design ou para mudar a forma de uma visualização em resposta à interação do usuário.
123É possível recortar uma visualização na área do contorno usando o método {@link android.view.View#setClipToOutline
124View.setClipToOutline()} ou o atributo <code>android:clipToOutline</code>. Somente
125contornos retangulares, circulares e retangulares redondos são compatíveis com recorte, conforme determinado pelo método
126{@link android.graphics.Outline#canClip Outline.canClip()}.</p>
127
128<p>Para recortar uma visualização na forma de um desenhável, defina o desenhável como o segundo plano da visualização
129(conforme exibido acima) e chame o método {@link android.view.View#setClipToOutline View.setClipToOutline()}
130.</p>
131
132<p>O recorte de visualizações é uma operação cara, por isso, não anime a forma que você
133usa para recortar uma visualização. Para atingir esse efeito, use a animação <a href="{@docRoot}training/material/animations.html#Reveal">Efeito de Revelação</a>.</p>
134