1 page.title=Trabajar con interfaces dibujables 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="#DrawableTint">Cambiar el matiz de los recursos dibujables</a></li> 10 <li><a href="#ColorExtract">Extraer colores prominentes de una imagen</a></li> 11 <li><a href="#VectorDrawables">Crear interfaces dibujables en vector</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">Diseo material en Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 <p>Las siguientes capacidades para las interfaces dibujables te ayudan a implementar Material Design en tus aplicaciones:</p> 22 23 <ul> 24 <li>Matiz de la interfaz dibujable</li> 25 <li>Extraccin de color prominente</li> 26 <li>Interfaces dibujables en vector</li> 27 </ul> 28 29 <p>Esta leccin te muestra cmo usar estas caractersticas en tu aplicacin.</p> 30 31 32 <h2 id="DrawableTint">Cambiar el matiz de los recursos dibujables</h2> 33 34 <p>Con Android 5.0 (API nivel 21) y superior, puedes cambiar el matiz de los mapas de bits y nueve parches definidos como 35 mscaras alfa. Puedes cambiar el matiz con recursos de colores o atributos de temas que se resuelven a 36 recursos de colores (por ejemplo, <code>?android:attr/colorPrimary</code>). Generalmente, puedes crear estos recursos 37 solo una vez y agregarles color automticamente para que coincidan con tu tema.</p> 38 39 <p>Puedes aplicar un matiz a los objetos {@link android.graphics.drawable.BitmapDrawable} o {@link 40 android.graphics.drawable.NinePatchDrawable} con el mtodo {@code setTint()}. Tambin puedes 41 establecer el color de matiz y el modo en tus diseos con los atributos <code>android:tint</code> y 42 <code>android:tintMode</code>.</p> 43 44 45 <h2 id="ColorExtract">Extraer colores prominentes de una imagen</h2> 46 47 <p>La Biblioteca de soporte de Android r21 y superiores incluye la clase {@link 48 android.support.v7.graphics.Palette}, que te permite extraer colores prominentes de una imagen. 49 Esta clase extrae los siguientes colores prominentes:</p> 50 51 <ul> 52 <li>Brillante</li> 53 <li>Oscuro brillante</li> 54 <li>Claro brillante</li> 55 <li>Apagado</li> 56 <li>Oscuro apagado</li> 57 <li>Claro apagado</li> 58 </ul> 59 60 <p>Para extraer estos colores, pasa un objeto {@link android.graphics.Bitmap} al mtodo esttico 61 {@link android.support.v7.graphics.Palette#generate Palette.generate()} en el subproceso en 62 segundo plano en donde cargas tus imgenes. Si no puedes usar dicho subproceso, llama al mtodo 63 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} y proporciona 64 un gestor de eventos en su lugar.</p> 65 66 <p>Puedes recuperar los colores prominentes de la imagen mediante los mtodos de obtencin en la clase 67 <code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p> 68 69 <p>Para usar la clase {@link android.support.v7.graphics.Palette} en tu proyecto, agrega la siguiente 70 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a> al mdulo de 71 tu aplicacin:</p> 72 73 <pre> 74 dependencies { 75 ... 76 compile 'com.android.support:palette-v7:21.0.0' 77 } 78 </pre> 79 80 <p>Para ms informacin, consulta la referencia de la API para la clase {@link android.support.v7.graphics.Palette}. 81 </p> 82 83 84 <h2 id="VectorDrawables">Crear interfaces dibujables en vector</h2> 85 86 <!-- video box --> 87 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px"> 88 <div> 89 <h3>Video</h3> 90 <p>Grficos en vector de Android</p> 91 </div> 92 </a> 93 94 <p>En Android 5.0 (API nivel 21) y superiores, puedes definir las interfaces dibujables en vector, que escalan sin 95 perder definicin. Solo necesitas un archivo de recurso para una imagen en vector, en oposicin a un archivo de recurso para 96 la densidad de cada pantalla en el caso de imgenes de mapa de bits. Para crear una imagen en vector, defines los detalles 97 de la forma dentro de un elemento XML <code><vector></code>.</p> 98 99 <p>El siguiente ejemplo define una imagen en vector con la forma de un corazn:</p> 100 101 <pre> 102 <!-- res/drawable/heart.xml --> 103 <vector xmlns:android="http://schemas.android.com/apk/res/android" 104 <!-- intrinsic size of the drawable --> 105 android:height="256dp" 106 android:width="256dp" 107 <!-- size of the virtual canvas --> 108 android:viewportWidth="32" 109 android:viewportHeight="32"> 110 111 <!-- draw a path --> 112 <path android:fillColor="#8fff" 113 android:pathData="M20.5,9.5 114 c-1.955,0,-3.83,1.268,-4.5,3 115 c-0.67,-1.732,-2.547,-3,-4.5,-3 116 C8.957,9.5,7,11.432,7,14 117 c0,3.53,3.793,6.257,9,11.5 118 c5.207,-5.242,9,-7.97,9,-11.5 119 C25,11.432,23.043,9.5,20.5,9.5z" /> 120 </vector> 121 </pre> 122 123 <p>Las imgenes en vector estn representadas en Android como objetos {@link android.graphics.drawable.VectorDrawable}. 124 Para ms informacin sobre la sintaxis <code>pathData</code>, consulta la <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">referencia de ruta de acceso SVG</a>. Para ms informacin 125 sobre la animacin de las propiedades de las interfaces dibujables en vector, consulta 126 <a href="{@docRoot}training/material/animations.html#AnimVector">Animacin de interfaces dibujables en vector</a>.</p> 127
