1page.title=Definir vistas de recorte y sombras 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>Esta lección te enseña a realizar lo siguiente:</h2> 8<ol> 9 <li><a href="#Elevation">Asignar elevación a tus vistas</a></li> 10 <li><a href="#Shadows">Personalizar vistas de sombras y contornos</a></li> 11 <li><a href="#Clip">Recortar vistas</a></li> 12</ol> 13<h2>También deberías leer</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li> 17</ul> 18</div> 19</div> 20 21<p>Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los usuarios a comprender la 22importancia relativa de cada elemento y a centrar su atención en la tarea para realizar.</p> 23 24<p>La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su 25sombra: las vistas con valores Z superiores, proyectan sombras más grandes y suaves. Las vistas con valores Z superiores ocluyen 26las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta el tamaño de la vista.</p> 27 28<p>El padre de la vista elevada se encarga de dibujar las sombras y así, sujetas al recorte de vista estándar, son 29recortadas por el padre de manera predeterminada.</p> 30 31<p>La elevación también es útil para crear animaciones donde los widgets suben temporalmente sobre el 32plano visual cuando realizan alguna acción.</p> 33 34<p>Para más información sobre la elevación en Material Design, consulta 35<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos 36en el espacio 3D</a>.</p> 37 38 39<h2 id="Elevation">Asignar elevación a tus vistas</h2> 40 41<p>El valor Z de una vista cualquiera tiene dos componentes: 42 43<ul> 44<li>Elevación: El componente estático.</li> 45<li>Traducción: El componente dinámico usado para las animaciones.</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 elevaciones de vistas.</p> 52 53<p>Para establecer la elevación de una vista al definir un diseño, usa el atributo <code>android:elevation</code>. 54 Para establecer la elevación de una vista en el código de una actividad, usa el método 55{@link android.view.View#setElevation View.setElevation()}.</p> 56 57<p>Para establecer la traducción de una vista, usa el método {@link android.view.View#setTranslationZ 58View.setTranslationZ()}.</p> 59 60<p>Los nuevos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} y {@link 61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} te permiten 62animar fácilmente la elevación de las vistas. Para más información, consulta la referencia de la API para 63{@link android.view.ViewPropertyAnimator} y la guía del desarrollador <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animación de propiedades</a>. 64</p> 65 66<p>También puedes usar un {@link android.animation.StateListAnimator} para 67especificar estas animaciones de manera declarativa. Esto es especialmente útil para casos en donde los cambios de 68estados desencadenan animaciones, como cuando un usuario pulsa un botón. Para más información, consulta 69<a href="{@docRoot}training/material/animations.html#ViewState">Animar cambios de estados de las vistas</a>.</p> 70 71<p>Los valores Z se miden en dp (píxeles independientes de la densidad).</p> 72 73 74<h2 id="Shadows">Personalizar visualización de sombras y contornos</h2> 75 76<p>Los límites de la interfaz dibujable en segundo plano de una vista determinan la forma predeterminada de su sombra. 77Los <strong>contornos</strong> representan la forma externa de un objeto gráfico y definen el área del efecto de ondas 78para la respuesta táctil.</p> 79 80<p>Examina esta vista, definida con una interfaz dibujable en 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>La interfaz dibujable en segundo plano está definida como un rectángulo con esquinas redondeadas:</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>La vista proyecta una sombra con esquinas redondeadas, ya que la interfaz dibujable en segundo plano 102define el contorno de la vista. Un contorno personalizado reemplazaría la forma predeterminada de la sombra de una vista.</p> 103 104<p>Para definir un contorno personalizado para una vista en tu código:<p> 105 106<ol> 107<li>Extiende la clase {@link android.view.ViewOutlineProvider}.</li> 108<li>Reemplaza el método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> 109<li>Asigna el nuevo proveedor de contornos a tu vista con el método {@link 110android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> 111</ol> 112 113<p>Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante el uso de métodos en la clase 114{@link android.graphics.Outline}. El proveedor de contornos predeterminado para las 115vistas obtiene el contorno a partir del plano de fondo de la vista. Para evitar que una vista proyecte una sombra, establece su proveedor de contornos 116en <code>null</code>.</p> 117 118 119<h2 id="Clip">Recortar vistas</h2> 120 121<p>Recortar vistas te permite cambiar fácilmente la forma de una vista. Puedes recortar vistas para 122mantener la uniformidad con otros elementos del diseño o para cambiar la forma de una vista en respuesta a una señal de entrada del usuario. 123Puedes recortar una vista a partir de su área de contorno mediante el método {@link android.view.View#setClipToOutline 124View.setClipToOutline()} o el atributo <code>android:clipToOutline</code>. Solo 125los contornos rectangulares, circulares y redondeados admiten el recorte, según lo determinado por el método 126{@link android.graphics.Outline#canClip Outline.canClip()}.</p> 127 128<p>Para recortar una vista a partir de una interfaz dibujable, establece la interfaz dibujable como el plano de fondo de la vista 129(como se muestra más arriba) y llama al método {@link android.view.View#setClipToOutline View.setClipToOutline()}. 130</p> 131 132<p>Recortar vistas es una operación costosa, así que no animes la forma que usas para 133recortar una vista. Para lograr este efecto, usa la animación <a href="{@docRoot}training/material/animations.html#Reveal">Efecto revelar</a>.</p> 134
