1 page.title=Como definir sombras e recortar visualizaes 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Esta lio ensina a</h2> 8 <ol> 9 <li><a href="#Elevation">Atribuir elevao a visualizaes</a></li> 10 <li><a href="#Shadows">Personalizar sombras e contornos de visualizaes</a></li> 11 <li><a href="#Clip">Recortar visualizaes</a></li> 12 </ol> 13 <h2>Voc tambm deve ler</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Especificaes 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 elevao em elementos da interface do usurio. A elevao ajuda os usurios a entender 22 a importncia relativa de cada elemento e concentrar a ateno deles nas tarefas mo.</p> 23 24 <p>A elevao de uma visualizao, representada pela propriedade Z, determina a aparncia visual das 25 sombras: visualizaes com valores de Z mais altos lanam sombras maiores e mais suaves. Visualizaes com valores de Z mais altos ocultam 26 visualizaes com valores de Z mais baixos, mas o valor de Z de uma visualizao no afeta o tamanho dela.</p> 27 28 <p>As sombras so desenhadas pelo pai da visualizao elevada e, por isso, esto sujeitas a recortes padro de 29 visualizao, recortadas pelo pai por padro.</p> 30 31 <p>A elevao tambm til para criar animaes em que os widgets se elevam temporariamente 32 sobre o plano de visualizao ao realizar alguma ao.</p> 33 34 <p>Para obter mais informaes sobre elevao no Material Design, consulte 35 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos 36 no espao 3D</a>.</p> 37 38 39 <h2 id="Elevation">Atribuir elevao a visualizaes</h2> 40 41 <p>O valor de Z para uma visualizao tem dois componentes: 42 43 <ul> 44 <li>Elevao: o componente esttico.</li> 45 <li>Movimentao: o componente dinmico usado para animaes.</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 elevaes de visualizao.</p> 52 53 <p>Para definir a elevao de uma visualizao em uma definio de layout, use o atributo <code>android:elevation</code> 54 . Para definir a elevao de uma visualizao no cdigo de uma atividade, use o mtodo 55 {@link android.view.View#setElevation View.setElevation()}.</p> 56 57 <p>Para definir a converso de uma visualizao, use o mtodo {@link android.view.View#setTranslationZ 58 View.setTranslationZ()}.</p> 59 60 <p>Os novos mtodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} e {@link 61 android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} permitem 62 animar facilmente a elevao de visualizaes. Para obter mais informaes, consulte a referncia de API para 63 {@link android.view.ViewPropertyAnimator} e o guia do desenvolvedor <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animao de 64 propriedade</a>.</p> 65 66 <p>Voc tambm pode usar um {@link android.animation.StateListAnimator} para 67 especificar essas animaes de um modo declarativo, o que especialmente til para casos em que o estado muda 68 as animaes de acionamento, como quando um usurio pressiona um boto. Para obter mais informaes, consulte 69 <a href="{@docRoot}training/material/animations.html#ViewState">Mudanas de estado de visualizao da animao</a>.</p> 70 71 <p>Os valores de Z so medidos em dp (pixels independentes de densidade).</p> 72 73 74 <h2 id="Shadows">Personalizar sombras e contornos de visualizaes</h2> 75 76 <p>Os limites de um desenhvel do segundo plano da visualizao determinam a forma padro da sombra. 77 <strong>Contornos</strong> representam a forma externa de um objeto grfico e definem a rea 78 de ondulao para o feedback de toque.</p> 79 80 <p>Analise esta visualizao, definida com um desenhvel de segundo plano:</p> 81 82 <pre> 83 <TextView 84 android:id="@+id/myview" 85 ... 86 android:elevation="2dp" 87 android:background="@drawable/myrect" /> 88 </pre> 89 90 <p>O desenhvel do segundo plano definido como um retngulo com bordas arredondadas:</p> 91 92 <pre> 93 <!-- res/drawable/myrect.xml --> 94 <shape xmlns:android="http://schemas.android.com/apk/res/android" 95 android:shape="rectangle"> 96 <solid android:color="#42000000" /> 97 <corners android:radius="5dp" /> 98 </shape> 99 </pre> 100 101 <p>A visualizao lana uma sombra com bordas arredondadas, uma vez que o desenhvel de segundo plano 102 define o contorno da visualizao. Fornecer um contorno personalizado neutraliza a forma padro de uma sombra da visualizao.</p> 103 104 <p>Para definir um contorno personalizado para uma visualizao no seu cdigo:<p> 105 106 <ol> 107 <li>Amplie a classe {@link android.view.ViewOutlineProvider}.</li> 108 <li>Neutralize o mtodo {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> 109 <li>Atribua o novo fornecedor de contorno visualizao com o mtodo {@link 110 android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> 111 </ol> 112 113 <p>Voc pode criar contornos ovais e retangulares com bordas arredondadas usando os mtodos na classe 114 {@link android.graphics.Outline}. O fornecedor de contorno padro para visualizaes obtm o contorno 115 do segundo plano da visualizao. Para evitar que uma visualizao lance uma sombra, defina o fornecedor de contorno 116 dela como <code>null</code>.</p> 117 118 119 <h2 id="Clip">Recortar visualizaes</h2> 120 121 <p>Recortar visualizaes permite mudar facilmente a forma de uma visualizao. Voc pode recortar visualizaes 122 para obter consistncia com outros elementos de design ou para mudar a forma de uma visualizao em resposta interao do usurio. 123 possvel recortar uma visualizao na rea do contorno usando o mtodo {@link android.view.View#setClipToOutline 124 View.setClipToOutline()} ou o atributo <code>android:clipToOutline</code>. Somente 125 contornos retangulares, circulares e retangulares redondos so compatveis com recorte, conforme determinado pelo mtodo 126 {@link android.graphics.Outline#canClip Outline.canClip()}.</p> 127 128 <p>Para recortar uma visualizao na forma de um desenhvel, defina o desenhvel como o segundo plano da visualizao 129 (conforme exibido acima) e chame o mtodo {@link android.view.View#setClipToOutline View.setClipToOutline()} 130 .</p> 131 132 <p>O recorte de visualizaes uma operao cara, por isso, no anime a forma que voc 133 usa para recortar uma visualizao. Para atingir esse efeito, use a animao <a href="{@docRoot}training/material/animations.html#Reveal">Efeito de Revelao</a>.</p> 134
