1 page.title=Definir vistas de recorte y sombras 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Esta leccin te ensea a realizar lo siguiente:</h2> 8 <ol> 9 <li><a href="#Elevation">Asignar elevacin 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>Tambin deberas leer</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Especificacin 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 elevacin para los elementos de la IU. La elevacin ayuda a los usuarios a comprender la 22 importancia relativa de cada elemento y a centrar su atencin en la tarea para realizar.</p> 23 24 <p>La elevacin de una vista, representada por la propiedad Z, determina la apariencia visual de su 25 sombra: las vistas con valores Z superiores, proyectan sombras ms grandes y suaves. Las vistas con valores Z superiores ocluyen 26 las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta el tamao 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 estndar, son 29 recortadas por el padre de manera predeterminada.</p> 30 31 <p>La elevacin tambin es til para crear animaciones donde los widgets suben temporalmente sobre el 32 plano visual cuando realizan alguna accin.</p> 33 34 <p>Para ms informacin sobre la elevacin en Material Design, consulta 35 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos 36 en el espacio 3D</a>.</p> 37 38 39 <h2 id="Elevation">Asignar elevacin a tus vistas</h2> 40 41 <p>El valor Z de una vista cualquiera tiene dos componentes: 42 43 <ul> 44 <li>Elevacin: El componente esttico.</li> 45 <li>Traduccin: El componente dinmico 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 elevacin de una vista al definir un diseo, usa el atributo <code>android:elevation</code>. 54 Para establecer la elevacin de una vista en el cdigo de una actividad, usa el mtodo 55 {@link android.view.View#setElevation View.setElevation()}.</p> 56 57 <p>Para establecer la traduccin de una vista, usa el mtodo {@link android.view.View#setTranslationZ 58 View.setTranslationZ()}.</p> 59 60 <p>Los nuevos mtodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} y {@link 61 android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} te permiten 62 animar fcilmente la elevacin de las vistas. Para ms informacin, consulta la referencia de la API para 63 {@link android.view.ViewPropertyAnimator} y la gua del desarrollador <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animacin de propiedades</a>. 64 </p> 65 66 <p>Tambin puedes usar un {@link android.animation.StateListAnimator} para 67 especificar estas animaciones de manera declarativa. Esto es especialmente til para casos en donde los cambios de 68 estados desencadenan animaciones, como cuando un usuario pulsa un botn. Para ms informacin, 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 (pxeles independientes de la densidad).</p> 72 73 74 <h2 id="Shadows">Personalizar visualizacin de sombras y contornos</h2> 75 76 <p>Los lmites de la interfaz dibujable en segundo plano de una vista determinan la forma predeterminada de su sombra. 77 Los <strong>contornos</strong> representan la forma externa de un objeto grfico y definen el rea del efecto de ondas 78 para la respuesta tctil.</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 rectngulo 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 102 define el contorno de la vista. Un contorno personalizado reemplazara la forma predeterminada de la sombra de una vista.</p> 103 104 <p>Para definir un contorno personalizado para una vista en tu cdigo:<p> 105 106 <ol> 107 <li>Extiende la clase {@link android.view.ViewOutlineProvider}.</li> 108 <li>Reemplaza el mtodo {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> 109 <li>Asigna el nuevo proveedor de contornos a tu vista con el mtodo {@link 110 android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> 111 </ol> 112 113 <p>Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante el uso de mtodos en la clase 114 {@link android.graphics.Outline}. El proveedor de contornos predeterminado para las 115 vistas 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 116 en <code>null</code>.</p> 117 118 119 <h2 id="Clip">Recortar vistas</h2> 120 121 <p>Recortar vistas te permite cambiar fcilmente la forma de una vista. Puedes recortar vistas para 122 mantener la uniformidad con otros elementos del diseo o para cambiar la forma de una vista en respuesta a una seal de entrada del usuario. 123 Puedes recortar una vista a partir de su rea de contorno mediante el mtodo {@link android.view.View#setClipToOutline 124 View.setClipToOutline()} o el atributo <code>android:clipToOutline</code>. Solo 125 los contornos rectangulares, circulares y redondeados admiten el recorte, segn lo determinado por el mtodo 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 ms arriba) y llama al mtodo {@link android.view.View#setClipToOutline View.setClipToOutline()}. 130 </p> 131 132 <p>Recortar vistas es una operacin costosa, as que no animes la forma que usas para 133 recortar una vista. Para lograr este efecto, usa la animacin <a href="{@docRoot}training/material/animations.html#Reveal">Efecto revelar</a>.</p> 134
