diff options
| author | David Friedman <dmail@google.com> | 2015-11-23 11:33:19 -0800 |
|---|---|---|
| committer | Dirk Dougherty <ddougherty@google.com> | 2015-12-05 01:53:26 +0000 |
| commit | 620ee9ff8882612950bb0a513d824ca8a19a6449 (patch) | |
| tree | 1bdeb3b6552cb787e4ef65c6f8b613e6319ceace /docs/html-intl | |
| parent | 9b616e4d34de2b91a10f80d56cde83c9ab7a2239 (diff) | |
Docs: Updating Spanish translation for material-design docs.
Bug: 23090399
Change-Id: Ibfc64825b581959677da3f536230220e01edf705
Diffstat (limited to 'docs/html-intl')
9 files changed, 474 insertions, 196 deletions
diff --git a/docs/html-intl/intl/es/design/material/index.jd b/docs/html-intl/intl/es/design/material/index.jd index 8cd34281f198..76e04298a77e 100644 --- a/docs/html-intl/intl/es/design/material/index.jd +++ b/docs/html-intl/intl/es/design/material/index.jd @@ -1,7 +1,6 @@ -page.title=Material Design +page.title=Material Design para Android page.tags=Material,design -page.type=design -page.image=design/material/images/MaterialLight.png +page.image=images/cards/design-material-for-android_2x.jpg @jd:body @@ -41,11 +40,11 @@ page.image=design/material/images/MaterialLight.png <p itemprop="description">Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas plataformas y dispositivos. Android ahora es compatible con las aplicaciones de -Material Design. Para usar Material Design en sus aplicaciones de Android, siga las pautas descritas -en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y use los +Material Design. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas +en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y usa los nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21) y versiones posteriores.</p> -<p>En Android, se proporcionan los siguientes elementos que le permitirán crear aplicaciones en Material Design:</p> +<p>En Android, se proporcionan los siguientes elementos que te permitirán crear aplicaciones en Material Design:</p> <ul> <li>un tema nuevo;</li> @@ -53,13 +52,13 @@ nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21 <li>nuevas API (interfaces de programación de aplicaciones) para sombras y animaciones personalizadas.</li> </ul> -<p>Para obtener más información sobre la implementación de Material Design en Android, consulte +<p>Para obtener más información sobre la implementación de Material Design en Android, consulta <a href="{@docRoot}training/material/index.html">Creación de aplicaciones con Material Design</a>.</p> <h3>Tema Material</h3> -<p>El tema Material le ofrece un nuevo estilo para su aplicación, widgets del sistema que le permiten configurar +<p>El tema Material te ofrece un nuevo estilo para tu aplicación, widgets del sistema que te permiten configurar la paleta de colores y animaciones predeterminadas para información táctil y transiciones de actividades.</p> <!-- two columns --> @@ -79,7 +78,7 @@ la paleta de colores y animaciones predeterminadas para información táctil y t <br style="clear:left"/> </div> -<p>Para obtener más información, consulte <a href="{@docRoot}training/material/theme.html">Uso del tema +<p>Para obtener más información, consulta <a href="{@docRoot}training/material/theme.html">Uso del tema Material</a>.</p> @@ -97,13 +96,13 @@ animaciones de Material Design:</p> </div> <div style="float:left;width:250px;margin-right:0px;"> <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> - <p>El nuevo widget <code>CardView</code> le permite mostrar extractos de información importante dentro de + <p>El nuevo widget <code>CardView</code> te permite mostrar extractos de información importante dentro de tarjetas que tienen apariencia y estilo coherentes.</p> </div> <br style="clear:left"/> </div> -<p>Para obtener más información, consulte <a href="{@docRoot}training/material/lists-cards.html">Creación de listas +<p>Para obtener más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Creación de listas y tarjetas</a>.</p> @@ -126,24 +125,24 @@ propiedad Z. Esta propiedad nueva representa la elevación de una vista, que det </video> </div> <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> - <em>Para volver a reproducir la película, haga clic en la pantalla del dispositivo.</em> + <em>Para volver a reproducir la película, haz clic en la pantalla del dispositivo.</em> </div> </div> -<p>Para obtener más información, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Definición +<p>Para obtener más información, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definición de vistas de recorte y sombras</a>.</p> <h3>Animaciones</h3> -<p>Las nuevas API de animaciones le permiten crear animaciones personalizadas para la información táctil en los controles de IU, +<p>Las nuevas API de animaciones te permiten crear animaciones personalizadas para la información táctil en los controles de IU, además de realizar cambios en el estado de las vistas y transiciones entre actividades.</p> -<p>Estas API le permiten hacer lo siguiente:</p> +<p>Estas API te permiten hacer lo siguiente:</p> <ul> <li style="margin-bottom:15px"> -responder a los eventos táctiles de sus vistas mediante animaciones de <strong>información táctil</strong>; +responder a los eventos táctiles de tus vistas mediante animaciones de <strong>información táctil</strong>; </li> <li style="margin-bottom:15px"> ocultar y mostrar vistas con animaciones con <strong>efecto circular</strong>; @@ -163,24 +162,24 @@ mostrar animaciones en los <strong>elementos de diseño de la lista de estados</ </ul> <p>Las animaciones de la información táctil se concentran en diferentes vistas estándar, como los botones. Las nuevas API -le permiten personalizar estas animaciones y agregarlas a sus vistas personalizadas.</p> +te permiten personalizar estas animaciones y agregarlas a tus vistas personalizadas.</p> -<p>Para obtener más información, consulte <a href="{@docRoot}training/material/animations.html">Definición de animaciones +<p>Para obtener más información, consulta <a href="{@docRoot}training/material/animations.html">Definición de animaciones personalizadas</a>.</p> <h3>Elementos de diseño</h3> -<p>Estas nuevas capacidades para los elementos de diseño le permiten implementar aplicaciones de Material Design:</p> +<p>Estas nuevas capacidades para los elementos de diseño te permiten implementar aplicaciones de Material Design:</p> <ul> <li>Los <strong>dibujables en vector</strong> se pueden escalar sin perder definición y son perfectos para los iconos de las aplicaciones de un solo color.</li> -<li>El <strong>teñido de los dibujables</strong> le permite definir mapas de bits como máscaras alfa y pintarlos con +<li>El <strong>teñido de los dibujables</strong> te permite definir mapas de bits como máscaras alfa y pintarlos con un color durante el tiempo de ejecución.</li> -<li>La <strong>extracción de color</strong> le permite extraer automáticamente colores prominentes de una +<li>La <strong>extracción de color</strong> te permite extraer automáticamente colores prominentes de una imagen del mapa de bits.</li> </ul> -<p>Para obtener más información, consulte <a href="{@docRoot}training/material/drawables.html">Trabajo con +<p>Para obtener más información, consulta <a href="{@docRoot}training/material/drawables.html">Trabajo con elementos de diseño</a>.</p> diff --git a/docs/html-intl/intl/es/training/material/animations.jd b/docs/html-intl/intl/es/training/material/animations.jd index 7a1358339301..5bd289eb99de 100644 --- a/docs/html-intl/intl/es/training/material/animations.jd +++ b/docs/html-intl/intl/es/training/material/animations.jd @@ -1,10 +1,10 @@ -page.title=Definir animaciones personalizadas +page.title=Definir animaciones personalizadas @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#Touch">Personalizar la respuesta táctil</a></li> <li><a href="#Reveal">Usar el efecto Revelar</a></li> @@ -15,13 +15,16 @@ page.title=Definir animaciones personalizadas <h2>También deberías leer</h2> <ul> <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li> - <li><a href="{@docRoot}design/material/index.html">Diseño material en Android</a></li> + <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li> </ul> </div> </div> -<p>Las animaciones en Material Design proporcionan a los usuarios comentarios sobre sus acciones y continuidad visual a medida que los usuarios interactúan con su aplicación. El tema material proporciona algunas animaciones predeterminadas para botones y transiciones de actividades; Android 5.0 (nivel de API 21) y superior te permite personalizar estas animaciones y crear unas nuevas:</p> +<p>Las animaciones en Material Design proporcionan a los usuarios comentarios sobre sus acciones y continuidad visual +a medida que los usuarios interactúan con su aplicación. El tema material proporciona algunas animaciones predeterminadas +para botones y transiciones de actividades; Android 5.0 (API nivel 21) y superior te permite personalizar estas +animaciones y crear unas nuevas:</p> <ul> <li>Respuesta táctil</li> @@ -34,28 +37,42 @@ page.title=Definir animaciones personalizadas <h2 id="Touch">Personalizar la respuesta táctil</h2> -<p>La respuesta táctil en Material Design proporciona una confirmación visual instantánea en el punto de contacto cuando los usuarios interactúan con los elementos de la IU (interfaz de usuario, en inglés: UI, User Interface). Las animaciones predeterminadas de la respuesta táctil para botones usan la nueva clase {@link android.graphics.drawable.RippleDrawable}, que realiza una transición entre diferentes estados con un efecto de ondas.</p> +<p>La respuesta táctil en Material Design proporciona una confirmación visual instantánea en el punto +de contacto cuando los usuarios interactúan con los elementos de la IU. Las animaciones predeterminadas de la respuesta táctil para +botones usan la nueva clase {@link android.graphics.drawable.RippleDrawable}, que realiza una transición +entre diferentes estados con un efecto de ondas.</p> -<p>En la mayoría de los casos, debes aplicar esta funcionalidad en tu vista XML al especificar el fondo de la vista como:</p> +<p>En la mayoría de los casos, debes aplicar esta funcionalidad en la vista XML especificando el fondo +de la vista como:</p> <ul> -<li><code>?android:attr/selectableItemBackground</code> para un efecto de ondas con límites</li> -<li><code>?android:attr/selectableItemBackgroundBorderless</code> para un efecto de ondas que se extiende más allá de la vista</li> +<li><code>?android:attr/selectableItemBackground</code> para un efecto de ondas con límites.</li> +<li><code>?android:attr/selectableItemBackgroundBorderless</code> para un efecto de ondas que se extiende más allá de +la vista. Se lo dibujará en la vista primaria más cercana de la vista (que lo limitará) con un fondo de valor no +nulo.</li> </ul> -<p class="note"><strong>Nota:</strong> <code>selectableItemBackgroundBorderless</code> es un nuevo atributo introducido en el nivel de API 21.</p> +<p class="note"><strong>Nota:</strong> <code>selectableItemBackgroundBorderless</code> es un nuevo +atributo introducido en la API de nivel 21.</p> -<p>Alternativamente, puedes definir un {@link android.graphics.drawable.RippleDrawable} como un recurso XML que usa el elemento <code>ripple</code>.</p> +<p>Alternativamente, puedes definir un {@link android.graphics.drawable.RippleDrawable} +como un recurso XML que usa el elemento <code>ripple</code>.</p> -<p>Puedes asignar un color a los objetos {@link android.graphics.drawable.RippleDrawable}. Para cambiar el color predeterminado de la respuesta táctil, usa el atributo <code>android:colorControlHighlight</code> del tema.</p> +<p>Puedes asignar un color a los objetos {@link android.graphics.drawable.RippleDrawable}. Para cambiar +el color predeterminado de la respuesta táctil, usa el atributo <code>android:colorControlHighlight</code> +del tema.</p> -<p>Para más información, consulta la referencia de la API para la clase {@link android.graphics.drawable.RippleDrawable}.</p> +<p>Para más información, consulta la referencia de la API para la clase {@link +android.graphics.drawable.RippleDrawable}.</p> <h2 id="Reveal">Usar el efecto revelar</h2> -<p>Las animaciones del efecto revelar proporcionan a los usuarios una continuidad visual cuando muestras u ocultas un grupo de elementos de la IU. El método {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} te permite animar un círculo de recorte para revelar u ocultar una vista.</p> +<p>Las animaciones del efecto revelar proporcionan a los usuarios una continuidad visual cuando muestras u ocultas un grupo de elementos +de la IU. El método {@link android.view.ViewAnimationUtils#createCircularReveal +ViewAnimationUtils.createCircularReveal()} te permite animar un círculo de recorte para +revelar u ocultar una vista.</p> <p>Para revelar una vista previamente invisible usando este efecto:</p> @@ -122,22 +139,32 @@ anim.start(); </video> </div> <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> - <p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figura 1</strong>: una transición con elementos compartidos.</p> + <p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figura 1</strong>: una +transición con elementos compartidos.</p> <em>Para volver a reproducir la película, haz clic en la pantalla del dispositivo.</em> </div> </div> -<p>Las transiciones de actividades en las aplicaciones de Material Design proporcionan conexiones visuales entre diferentes estados mediante el movimiento y las transformaciones entre elementos comunes. Puedes especificar las animaciones personalizadas para entrar y salir de las transiciones y para las transiciones de elementos compartidos entre actividades.</p> +<p>Las transiciones de actividades en las aplicaciones de Material Design proporcionan conexiones visuales entre diferentes estados +mediante el movimiento y las transformaciones entre elementos comunes. Puedes especificar las animaciones personalizadas para +entrar y salir de las transiciones y para las transiciones de elementos compartidos entre actividades.</p> <ul> -<li>Una transición de <strong>entrada</strong> determina cómo entran en escena las vistas en una actividad. Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas entran en escena desde el exterior y vuelan hacia el centro de la pantalla.</li> - -<li>Una transición de <strong>salida</strong> determina cómo salen de escena las vistas en una actividad. Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas salen de escena lejos del centro.</li> - -<li>Una transición <strong>elementos compartidos</strong> determina cómo las vistas que están compartidas entre dos actividades realizan una transición entre las mismas. Por ejemplo, si dos actividades tienen la misma imagen en diferentes posiciones y tamaños, la transición de elementos compartidos <em>changeImageTransform</em> traduce y escala la imagen suavemente entre estas actividades.</li> +<li>Una transición de <strong>entrada</strong> determina cómo entran en escena las vistas en una actividad. +Por ejemplo, en la transición de entrada <em>expandir</em>, las vistas entran en escena desde el exterior +y vuelan hacia el centro de la pantalla.</li> + +<li>Una transición de <strong>salida</strong> determina cómo salen de escena las vistas en una actividad. Por +ejemplo, en la transición de salida <em>expandir</em>, las vistas salen de escena lejos del +centro.</li> + +<li>Una transición de <strong>elementos compartidos</strong> determina cómo las vistas que están compartidas entre +dos actividades realizan la transición entre estas. Por ejemplo, si dos actividades tienen la misma +imagen en diferentes posiciones y tamaños, la transición de elementos compartidos <em>changeImageTransform</em> +traduce y escala la imagen suavemente entre estas actividades.</li> </ul> -<p>Android 5.0 (nivel de API 21) admite estas transiciones de entrada y salida:</p> +<p>Android 5.0 (API nivel 21) admite estas transiciones de entrada y salida:</p> <ul> <li><em>expandir</em>: desplaza vistas hacia adentro o hacia afuera del centro de la escena.</li> @@ -145,9 +172,11 @@ anim.start(); <li><em>difuminar</em>: agrega o quita una vista de la escena al cambiar su opacidad.</li> </ul> -<p>Toda transición que extiende la clase {@link android.transition.Visibility} está admitida como una transición de entrada o salida. Para más información, consulta la referencia de la API para la clase {@link android.transition.Transition}.</p> +<p>Toda transición que extiende la clase {@link android.transition.Visibility} se admite +como una transición de entrada o salida. Para más información, consulta la referencia de la API para la clase +{@link android.transition.Transition}.</p> -<p>Android 5.0 (nivel de API 21) también admite estas transiciones de elementos compartidos:</p> +<p>Android 5.0 (API nivel 21) también admite estas transiciones de elementos compartidos:</p> <ul> <li><em>changeBounds</em>: anima los cambios en los límites de las vistas de destino.</li> @@ -156,7 +185,8 @@ anim.start(); <li><em>changeImageTransform</em>: anima los cambios de tamaño y escala de imágenes de destino.</li> </ul> -<p>Cuando habilitas las transiciones de actividades en tu aplicación, la transición entre difuminados predeterminada se activa entre las actividades que ingresan y salen.</p> +<p>Cuando habilitas las transiciones de actividades en tu aplicación, la transición entre difuminados predeterminada se +activa entre las actividades que ingresan y salen.</p> <img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" /> <p class="img-caption"> @@ -165,7 +195,9 @@ anim.start(); <h3>Especificar transiciones personalizadas</h3> -<p>Primero, habilita las transiciones de contenido de la ventana con el atributo <code>android:windowContentTransitions</code> cuando definas un estilo que herede del tema material. También puedes especificar transiciones de entrada, salida y elementos compartidos en tu definición de estilo:</p> +<p>Primero, habilita las transiciones de contenido de la ventana con el atributo <code>android:windowContentTransitions</code> +cuando definas un estilo que herede del tema material. También puedes especificar +transiciones de entrada, salida y elementos compartidos en tu definición de estilo:</p> <pre> <style name="BaseAppTheme" parent="android:Theme.Material"> @@ -194,9 +226,12 @@ anim.start(); </transitionSet> </pre> -<p>El elemento <code>changeImageTransform</code> corresponde a la clase {@link android.transition.ChangeImageTransform}. Para más información, consulta la referencia de la API para {@link android.transition.Transition}.</p> +<p>El elemento <code>changeImageTransform</code> corresponde a la clase +{@link android.transition.ChangeImageTransform}. Para más información, consulta la referencia de la +API para {@link android.transition.Transition}.</p> -<p>Para habilitar las transiciones del contenido de las ventanas en tu código haz una llamada al método {@link android.view.Window#requestFeature Window.requestFeature()}:</p> +<p>Para habilitar las transiciones del contenido de las ventanas en tu código, llama al método +{@link android.view.Window#requestFeature Window.requestFeature()}:</p> <pre> // inside your activity (if you did not enable transitions in your theme) @@ -206,31 +241,45 @@ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); getWindow().setExitTransition(new Explode()); </pre> -<p>Para especificar transiciones en tu código, llama estos métodos con un objeto {@link android.transition.Transition}:</p> +<p>Para especificar transiciones en tu código, llama a estos métodos con un objeto {@link +android.transition.Transition}:</p> <ul> <li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li> <li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li> - <li>{@link android.view.Window#setSharedElementEnterTransition Window.setSharedElementEnterTransition()}</li> - <li>{@link android.view.Window#setSharedElementExitTransition Window.setSharedElementExitTransition()}</li> + <li>{@link android.view.Window#setSharedElementEnterTransition + Window.setSharedElementEnterTransition()}</li> + <li>{@link android.view.Window#setSharedElementExitTransition + Window.setSharedElementExitTransition()}</li> </ul> -<p>Los métodos {@link android.view.Window#setExitTransition setExitTransition()} y {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definen la transición de salida para la actividad de llamada. Los métodos {@link android.view.Window#setEnterTransition setEnterTransition()} y {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} definen la transición de entrada para la actividad requerida.</p> +<p>Los métodos {@link android.view.Window#setExitTransition setExitTransition()} y {@link +android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definen +la transición de salida para la actividad que realiza la llamada. Los métodos {@link android.view.Window#setEnterTransition +setEnterTransition()} y {@link android.view.Window#setSharedElementEnterTransition +setSharedElementEnterTransition()} definen la transición de entrada para la actividad invocada.</p> -<p>Para obtener el efecto completo de una transición, debes habilitar las transiciones de contenido de las ventanas en las actividades de llamada o requeridas. De lo contrario, la actividad de llamada comenzará la transición de salida, pero luego observarás una ventana de transición (como escalar o difuminar).</p> +<p>Para obtener el efecto completo de una transición, debes habilitar las transiciones de contenido de las ventanas tanto para las +actividades que realizan la llamada como para aquellas que son invocadas. De lo contrario, la actividad que realiza la llamada comenzará la transición de salida, +pero luego observarás una ventana de transición (como escalar o difuminar).</p> -<p>Para comenzar una transición de entrada lo antes posible, usa el método {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} en la actividad requerida. Esto te permite tener transiciones de entrada más intensas.</p> +<p>Para comenzar una transición de entrada lo antes posible, usa el método +{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} +en la actividad invocada. Esto te permite tener transiciones de entrada más intensas.</p> <h3>Iniciar una actividad mediante el uso de transiciones</h3> -<p>Si permites transiciones y estableces una transición de salida para una actividad, la transición se activa cuando inicias otra actividad como alguna de las siguientes:</p> +<p>Si permites transiciones y estableces una transición de salida para una actividad, la transición se activa +cuando inicias otra actividad, como alguna de las siguientes:</p> <pre> startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle()); </pre> -<p>Si estableciste una transición de entrada para la segunda actividad, la transición también se activa cuando se inicia la actividad. Para deshabilitar las transiciones cuando inicias otra actividad, proporciona una agrupación de opciones <code>null</code>.</p> +<p>Si estableciste una transición de entrada para la segunda actividad, la transición también se activa +cuando se inicia la actividad. Para deshabilitar las transiciones cuando inicias otra actividad, proporciona +una agrupación de opciones <code>null</code>.</p> <h3>Iniciar una actividad con un elemento compartido</h3> @@ -240,8 +289,10 @@ startActivity(intent, <li>Habilita las transiciones de contenido de ventanas en tu tema.</li> <li>Especifica una transición de elementos compartidos en tu estilo.</li> <li>Define tu transición como un recurso XML.</li> -<li>Asigna un nombre en común para los elementos compartidos en ambos diseños con el atributo <code>android:transitionName</code>.</li> -<li>Usa el método {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.</li> +<li>Asigna un nombre en común para los elementos compartidos en ambos diseños con el atributo +<code>android:transitionName</code>.</li> +<li>Usa el método {@link android.app.ActivityOptions#makeSceneTransitionAnimation +ActivityOptions.makeSceneTransitionAnimation()}.</li> </ol> <pre> @@ -266,13 +317,20 @@ imgContainerView.setOnClickListener(new View.OnClickListener() { }); </pre> -<p>Para las vistas dinámicas compartidas que generas en tu código, usa el método {@link android.view.View#setTransitionName View.setTransitionName()} para especificar un nombre del elemento en común en ambas actividades.</p> +<p>Para las vistas dinámicas compartidas que generas en tu código, usa el método +{@link android.view.View#setTransitionName View.setTransitionName()} para especificar un nombre de +elemento en común en ambas actividades.</p> -<p>Para invertir la animación de transición de escenas cuando terminas la segunda actividad, llama al método {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} en lugar del {@link android.app.Activity#finish Activity.finish()}.</p> +<p>Para invertir la animación de transición de escenas cuando terminas la segunda actividad, llama al método +{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} +en lugar del {@link android.app.Activity#finish Activity.finish()}.</p> <h3>Iniciar una actividad con múltiples elementos compartidos</h3> -<p>Para realizar una animación de transición de escenas entre dos actividades que tienen más de un elemento compartido, define los elementos compartidos en ambos diseños con el atributo <code>android:transitionName</code> (o usa el método {@link android.view.View#setTransitionName View.setTransitionName()} en ambas actividades) y crea un objeto {@link android.app.ActivityOptions} como se indica a continuación:</p> +<p>Para realizar una animación de transición de escenas entre dos actividades que tienen más de un elemento +compartido, define los elementos compartidos en ambos diseños con el atributo <code>android:transitionName</code> +(o usa el método {@link android.view.View#setTransitionName View.setTransitionName()} +en ambas actividades) y crea un objeto {@link android.app.ActivityOptions} como se indica a continuación:</p> <pre> ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, @@ -283,9 +341,14 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, <h2 id="CurvedMotion">Usar movimiento curvo</h2> -<p>Las animaciones en Material Design se basan en curvas para la interpolación de tiempo y los modelos de movimiento espacial. Con Android 5.0 (nivel de API 21) y superior, puedes definir las curvas de sincronización personalizadas y los modelos de movimientos curvos para las animaciones.</p> +<p>Las animaciones en Material Design se basan en curvas para la interpolación de tiempo y los modelos de movimiento +espacial. Con Android 5.0 (API nivel 21) y superior, puedes definir las curvas de sincronización personalizadas y +los modelos de movimientos curvos para las animaciones.</p> -<p>La clase {@link android.view.animation.PathInterpolator} es un nuevo interpolador que se basa en una curva Bézier o un objeto {@link android.graphics.Path}. Este interpolador especifica una curva de movimiento en un cuadrado de 1x1, con puntos de anclaje a (0,0) y (1,1), y puntos de control según lo especificado en los argumentos del constructor. También puedes definir un interpolador para la ruta de acceso como un recurso XML:</p> +<p>La clase {@link android.view.animation.PathInterpolator} es un nuevo interpolador que se basa en una curva +Bézier o un objeto {@link android.graphics.Path}. Este interpolador especifica una curva de movimiento +en un cuadrado de 1x1, con puntos de anclaje a (0,0) y (1,1), y puntos de control según lo especificado en los argumentos del +constructor. También puedes definir un interpolador para la ruta de acceso como un recurso XML:</p> <pre> <pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android" @@ -295,7 +358,8 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, android:controlY2="1"/> </pre> -<p>El sistema proporciona recursos XML para las tres curvas básicas en la especificación de Material Design:</p> +<p>El sistema proporciona recursos XML para las tres curvas básicas en la especificación +de Material Design:</p> <ul> <li><code>@interpolator/fast_out_linear_in.xml</code></li> @@ -303,9 +367,12 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, <li><code>@interpolator/linear_out_slow_in.xml</code></li> </ul> -<p>Puedes pasar un objeto {@link android.view.animation.PathInterpolator} al método {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p> +<p>Puedes pasar un objeto {@link android.view.animation.PathInterpolator} al método {@link +android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p> -<p>La clase {@link android.animation.ObjectAnimator} tiene nuevos constructores que te permiten animar coordenadas junto a una ruta de acceso, usando dos o más propiedades a la vez. Por ejemplo, el siguiente animador usa un objeto{@link android.graphics.Path} para animar las propiedades X e Y de una vista:</p> +<p>La clase {@link android.animation.ObjectAnimator} tiene nuevos constructores que te permiten animar +coordenadas junto a una ruta de acceso, usando dos o más propiedades a la vez. Por ejemplo, el siguiente animador +usa un objeto{@link android.graphics.Path} para animar las propiedades X e Y de una vista:</p> <pre> ObjectAnimator mAnimator; @@ -317,7 +384,9 @@ mAnimator.start(); <h2 id="ViewState">Animar cambios de estados de las vistas</h2> -<p>La clase {@link android.animation.StateListAnimator} te permite definir los animadores que se ejecutan cuando cambia el estado de una vista. En el siguiente ejemplo, se muestra cómo definir un {@link android.animation.StateListAnimator} como un recurso XML:</p> +<p>La clase {@link android.animation.StateListAnimator} te permite definir los animadores que se ejecutan cuando +cambia el estado de una vista. En el siguiente ejemplo, se muestra cómo definir un {@link +android.animation.StateListAnimator} como un recurso XML:</p> <pre> <!-- animate the translationZ property of a view when pressed --> @@ -345,11 +414,21 @@ mAnimator.start(); </selector> </pre> -<p>Para adjuntar animaciones personalizadas de los estados de visualizaciones, define un animador usando el elemento <code>selector</code> en un archivo de recurso XML como en este ejemplo y asígnalo a tu vista con el atributo <code>android:stateListAnimator</code>. Para asignar un animador de lista de estados a una vista en tu código, usa el método {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} y asigna el animador a tu vista con el método {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p> +<p>Para adjuntar animaciones personalizadas de los estados de visualizaciones, define un animador usando el elemento +<code>selector</code> en un archivo de recurso XML como en este ejemplo y asígnalo a tu +vista con el atributo <code>android:stateListAnimator</code>. Para asignar un animador de lista de estados +a una vista en tu código, usa el método {@link android.animation.AnimatorInflater#loadStateListAnimator +AnimationInflater.loadStateListAnimator()} y asigna el animador a tu vista con el método +{@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p> -<p>Cuando tu tema extiende al tema material, los botones tendrán una animación Z de manera predeterminada. Para evitar este comportamiento en tus botones, establece el atributo <code>android:stateListAnimator</code> para <code>@null</code>.</p> +<p>Cuando tu tema extiende al tema material, los botones tendrán una animación Z de manera predeterminada. Para evitar este +comportamiento en los botones, establece el atributo <code>android:stateListAnimator</code> en +<code>@null</code>.</p> -<p>La clase {@link android.graphics.drawable.AnimatedStateListDrawable} te permite crear elementos de diseño que muestren animaciones entre los cambios de estados de la vista asociada. Algunos de los widgets del sistema en Android 5.0 usan estas animaciones de manera predeterminada. En el siguiente ejemplo, se muestra cómo definir un {@link android.graphics.drawable.AnimatedStateListDrawable} como un recurso XML:</p> +<p>La clase {@link android.graphics.drawable.AnimatedStateListDrawable} te permite crear elementos de diseño +que muestren animaciones entre los cambios de estados de la vista asociada. Algunos de los widgets del sistema en +Android 5.0 usan estas animaciones de manera predeterminada. En el siguiente ejemplo, se muestra cómo +definir un {@link android.graphics.drawable.AnimatedStateListDrawable} como un recurso XML:</p> <pre> <!-- res/drawable/myanimstatedrawable.xml --> @@ -379,19 +458,28 @@ mAnimator.start(); <h2 id="AnimVector">Animar interfaces dibujables en vector</h2> -<p>Las <a href="{@docRoot}training/material/drawables.html#VectorDrawables">interfaces dibujables en vector</a> son escalables sin perder definición. La clase {@link android.graphics.drawable.AnimatedVectorDrawable} te permite animar las propiedades de un elemento de diseño en vector.</p> +<p>Las <a href="{@docRoot}training/material/drawables.html#VectorDrawables">interfaces dibujables en vector</a> son +escalables sin perder definición. La clase {@link android.graphics.drawable.AnimatedVectorDrawable} +te permite animar las propiedades de un elemento de diseño en vector.</p> <p>Generalmente, las interfaces animadas dibujables en vector se definen en tres archivos XML:</p> <ul> -<li>Una interfaz dibujable en vector con el elemento <code><vector></code> en <code>res/drawable/</code></li> -<li>Una interfaz dibujable animada en vector con el elemento <code><animated-vector></code> en <code>res/drawable/</code></li> -<li>Uno o más animadores de objeto con el elemento <code><objectAnimator></code> en <code>res/anim/</code></li> +<li>Una interfaz dibujable en vector con el elemento <code><vector></code> en +<code>res/drawable/</code></li> +<li>Una interfaz dibujable animada en vector con el elemento <code><animated-vector></code> en +<code>res/drawable/</code></li> +<li>Uno o más animadores de objeto con el elemento <code><objectAnimator></code> en +<code>res/anim/</code></li> </ul> -<p>Las interfaces animadas dibujables en vector pueden animar los atributos de los elementos <code><group></code> y <code><path></code>. Los elementos <code><group></code> definen un conjunto de rutas de acceso o subgrupos y el elemento <code><path></code> define rutas de acceso para dibujar.</p> +<p>Las interfaces animadas dibujables en vector pueden animar los atributos de los elementos <code><group></code> y +<code><path></code>. Los elementos <code><group></code> definen un conjunto de +rutas de acceso o subgrupos y el elemento <code><path></code> define rutas de acceso para dibujar.</p> -<p>Cuando definas una interfaz dibujable en vector que desees animar, usa el atributo <code>android:name</code> para asignar un nombre único a grupos o rutas de acceso, de manera que puedas hacer referencia a ellos desde tus definiciones del animador. Por ejemplo:</p> +<p>Cuando definas una interfaz dibujable en vector que desees animar, usa el atributo <code>android:name</code> +para asignar un nombre único a grupos o rutas de acceso, de manera que puedas hacer referencia a ellos desde tus definiciones del +animador. Por ejemplo:</p> <pre> <!-- res/drawable/vectordrawable.xml --> @@ -413,7 +501,8 @@ mAnimator.start(); </vector> </pre> -<p>La definición de la interfaz animada dibujable en vector hace referencia a grupos y rutas de acceso en el elemento de diseño en vector por sus nombres:</p> +<p>La definición de la interfaz animada dibujable en vector hace referencia a grupos y rutas de acceso en el elemento de diseño en vector +por sus nombres:</p> <pre> <!-- res/drawable/animvectordrawable.xml --> @@ -428,7 +517,9 @@ mAnimator.start(); </animated-vector> </pre> -<p>Las definiciones de animación representan objetos {@link android.animation.ObjectAnimator} o {@link android.animation.AnimatorSet}. El primer animador en este ejemplo rota el grupo objetivo unos 360 grados:</p> +<p>Las definiciones de animación representan objetos {@link android.animation.ObjectAnimator} o {@link +android.animation.AnimatorSet}. El primer animador en este ejemplo rota el grupo +objetivo unos 360 grados:</p> <pre> <!-- res/anim/rotation.xml --> @@ -439,7 +530,9 @@ mAnimator.start(); android:valueTo="360" /> </pre> -<p>El segundo animador en este ejemplo transforma la ruta de acceso de la interfaz dibujable en vector de una forma a otra. Ambas rutas de acceso deben ser compatibles para transformar: deben tener el mismo número de comandos y el mismo número de parámetros para cada comando.</p> +<p>El segundo animador en este ejemplo transforma la ruta de acceso de la interfaz dibujable en vector de una forma a +otra. Ambas rutas de acceso deben ser compatibles para transformarse: deben tener el mismo número de comandos +y el mismo número de parámetros para cada comando.</p> <pre> <!-- res/anim/path_morph.xml --> @@ -453,4 +546,5 @@ mAnimator.start(); </set> </pre> -<p>Para más información, consulta la referencia de API para {@link android.graphics.drawable.AnimatedVectorDrawable}.</p>
\ No newline at end of file +<p>Para más información, consulta la referencia de la API para {@link +android.graphics.drawable.AnimatedVectorDrawable}.</p> diff --git a/docs/html-intl/intl/es/training/material/compatibility.jd b/docs/html-intl/intl/es/training/material/compatibility.jd index 8295cf9a3ba4..ad2e953fed4f 100644 --- a/docs/html-intl/intl/es/training/material/compatibility.jd +++ b/docs/html-intl/intl/es/training/material/compatibility.jd @@ -1,10 +1,10 @@ -page.title=Mantener la compatibilidad +page.title=Mantener la compatibilidad @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#Theme">Definir estilos alternativos</a></li> <li><a href="#Layouts">Proporcionar diseños alternativos</a></li> @@ -20,42 +20,63 @@ page.title=Mantener la compatibilidad </div> -<p>Algunas características de Material Design como el tema material y las transiciones de actividades personalizadas solo están disponibles en Android 5.0 (nivel 21 de la API) y superior. Sin embargo, puedes diseñar tus aplicaciones para usar estas características al ejecutar en dispositivos que admiten Material Design y aún son compatibles con dispositivos que ejecutan versiones anteriores de Android.</p> +<p>Algunas características de Material Design, como el tema material y las transiciones de actividades personalizadas, solo +están disponibles en Android 5.0 (API nivel 21) y superior. Sin embargo, puedes diseñar tus aplicaciones para +usar estas características cuando se ejecutan en dispositivos que admiten Material Design y aún son compatibles +con dispositivos que ejecutan versiones anteriores de Android.</p> <h2 id="Theme">Definir estilos alternativos</h2> -<p>Puedes configurar tu aplicación para usar el tema material en los dispositivos que los admiten y revertir a un tema anterior en los dispositivos que ejecutan versiones anteriores de Android:</p> +<p>Puedes configurar tu aplicación para usar el tema material en los dispositivos que los admiten y revertir +a un tema anterior en los dispositivos que ejecutan versiones anteriores de Android:</p> <ol> -<li>Define un tema que herede de un tema anterior (como Holo) en <code>res/values/styles.xml</code>.</li> -<li>Define un tema con el mismo nombre que hereda del tema material en <code>res/values-v21/styles.xml</code>.</li> +<li>Define un tema que herede de un tema anterior (como Holo) en +<code>res/values/styles.xml</code>.</li> +<li>Define un tema con el mismo nombre que hereda del tema material en +<code>res/values-v21/styles.xml</code>.</li> <li>Establece este tema como el tema de tu aplicación en el archivo de manifiesto.</li> </ol> -<p class="note"><strong>Nota:</strong> Si tu aplicación usa el tema material pero no proporciona un tema alternativo, tu aplicación no se ejecutará en versiones de Android anteriores a la versión 5.0. +<p class="note"><strong>Nota:</strong> +Si tu aplicación usa el tema material pero no proporciona un tema alternativo, +tu aplicación no se ejecutará en versiones de Android anteriores a la versión 5.0. </p> <h2 id="Layouts">Proporcionar diseños alternativos</h2> -<p>Si los diseños que realizas de acuerdo con las pautas de Material Design no usan ninguno de los nuevos atributos XML introducidos en Android 5.0 (nivel de API 21), estos trabajarán en versiones anteriores de Android. De lo contrario, puedes proporcionar diseños alternativos. También puedes proporcionar diseños alternativos para personalizar la apariencia de tu aplicación en versiones anteriores de Android.</p> +<p>Si los diseños que realizas de acuerdo con las pautas de Material Design no usan ninguno de +los nuevos atributos XML introducidos en Android 5.0 (API nivel 21), estos trabajarán en +versiones anteriores de Android. De lo contrario, puedes proporcionar diseños alternativos. También puedes proporcionar diseños +alternativos para personalizar la apariencia de tu aplicación en versiones anteriores de Android.</p> -<p>Crea tus archivos de diseño para Android 5.0 (nivel de API 21) dentro de <code>res/layout-v21/</code> y tus archivos de diseño alternativo para versiones anteriores de Android dentro de <code>res/layout/</code>. Por ejemplo, <code>res/layout/my_activity.xml</code> es un diseño alternativo para <code>res/layout-v21/my_activity.xml</code>.</p> +<p>Crea tus archivos de diseño para Android 5.0 (API nivel 21) dentro de <code>res/layout-v21/</code> y +tus archivos de diseño alternativo para versiones anteriores de Android dentro de <code>res/layout/</code>. +Por ejemplo, <code>res/layout/my_activity.xml</code> es un diseño alternativo para +<code>res/layout-v21/my_activity.xml</code>.</p> -<p>Para evitar duplicación de código, define tus estilos en <code>res/values/</code>, modifica estilos en <code>res/values-v21/</code> para las nuevas API y usa transmisión por herencia de estilos, al definir estilos base en <code>res/values/</code> y al heredar de estos en <code>res/values-v21/</code>.</p> +<p>Para evitar duplicación de código, define tus estilos en <code>res/values/</code>, modifica +estilos en <code>res/values-v21/</code> para las nuevas API y usa transmisión por herencia de estilos, definiendo estilos +base en <code>res/values/</code> y heredando de los que están en <code>res/values-v21/</code>.</p> <h2 id="SupportLib">Usar la Biblioteca de soporte</h2> -<p>Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> r21 y superiores incluyen las siguientes características de Material Design:</p> +<p>Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> +r21 y superiores incluyen las siguientes características de Material Design:</p> <ul> -<li><a href="{@docRoot}training/material/theme.html">Estilos de Material Design</a> para algunos widgets del sistema cuando aplicas uno de los temas <code>Theme.AppCompat</code>.</li> -<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atributos del tema de la paleta de colores</a> en los temas <code>Theme.AppCompat</code>.</li> -<li>El widget {@link android.support.v7.widget.RecyclerView} para <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">mostrar conjuntos de datos</a>.</li> +<li><a href="{@docRoot}training/material/theme.html">Estilos de Material Design</a> para algunos widgets +del sistema cuando aplicas uno de los temas <code>Theme.AppCompat</code>.</li> +<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atributos del tema de la paleta de colores</a> +en los temas <code>Theme.AppCompat</code>.</li> +<li>El widget {@link android.support.v7.widget.RecyclerView} para <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">mostrar conjuntos +de datos</a>.</li> <li>El widget {@link android.support.v7.widget.CardView} para <a href="{@docRoot}training/material/lists-cards.html#CardView">crear tarjetas</a>.</li> -<li>La clase {@link android.support.v7.graphics.Palette} para <a href="{@docRoot}training/material/drawables.html#ColorExtract">extraer colores prominentes de imágenes</a>.</li> +<li>La clase {@link android.support.v7.graphics.Palette} para <a href="{@docRoot}training/material/drawables.html#ColorExtract">extraer colores prominentes de +imágenes</a>.</li> </ul> <h3>Widgets del sistema</h3> @@ -73,7 +94,8 @@ page.title=Mantener la compatibilidad <h3>Paleta de colores</h3> -<p>Para obtener estilos de Material Design y personalizar la paleta de colores con la Biblioteca de soporte v7 de Android, aplica uno de los temas <code>Theme.AppCompat</code>:</p> +<p>Para obtener estilos de Material Design y personalizar la paleta de colores con la Biblioteca de soporte +v7 de Android, aplica uno de los temas <code>Theme.AppCompat</code>:</p> <pre> <!-- extend one of the Theme.AppCompat themes --> @@ -87,16 +109,21 @@ page.title=Mantener la compatibilidad <h3>Listas y tarjetas</h3> -<p>Los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView} están disponible en versiones anteriores de Android mediante la Biblioteca de soporte v7 con estas limitaciones:</p> +<p>Los widgets {@link android.support.v7.widget.RecyclerView} y {@link +android.support.v7.widget.CardView} están disponible en versiones anteriores de Android mediante +la Biblioteca de soporte v7 con estas limitaciones:</p> <ul> -<li>{@link android.support.v7.widget.CardView} regresa a una implementación de sombras programáticas mediante el uso de espaciado adicional.</li> -<li>{@link android.support.v7.widget.CardView} no recorta las vistas de sus hijos que forman intersecciones con esquinas redondeadas.</li> +<li>{@link android.support.v7.widget.CardView} regresa a una implementación de sombras programáticas +mediante el uso de espaciado adicional.</li> +<li>{@link android.support.v7.widget.CardView} no recorta las vistas de sus hijos que forman intersecciones +con esquinas redondeadas.</li> </ul> <h3>Dependencias</h3> -<p>Para usar estas características en versiones de Android anteriores a la 5.0 (nivel de API 21), incluye en tu proyecto la Biblioteca de soporte v7 de Android como una <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a>:</p> +<p>Para usar estas características en versiones de Android anteriores a la 5.0 (API nivel 21), incluye +en tu proyecto la Biblioteca de soporte v7 de Android como una <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependencia de Gradle</a>:</p> <pre> dependencies { @@ -120,7 +147,9 @@ dependencies { <li>Matiz de la interfaz dibujable</li> </ul> -<p>Para conservar la compatibilidad con versiones anteriores de Android, comprueba el sistema {@link android.os.Build.VERSION#SDK_INT version} en tiempo de ejecución antes de invocar las API para cualquiera de estas características:</p> +<p>Para conservar la compatibilidad con versiones anteriores de Android, comprueba la {@link +android.os.Build.VERSION#SDK_INT version} del sistema en tiempo de ejecución antes de invocar las API para cualquiera de estas +características:</p> <pre> // Check if we're running on Android 5.0 or higher @@ -131,4 +160,9 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { } </pre> -<p class="note"><strong>Nota:</strong> Para especificar qué versiones de Android admite tu aplicación, usa los atributos <code>android:minSdkVersion</code> y <code>android:targetSdkVersion</code> en tu archivo de manifiesto. Para usar las características de Material Design en Android 5.0, establece el atributo <code>android:targetSdkVersion</code> para <code>21</code>. Para más información, consulta la <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guía de <uses-sdk> de la API</a>.</p>
\ No newline at end of file +<p class="note"><strong>Nota:</strong> Para especificar qué versiones de Android admite tu aplicación, +usa los atributos <code>android:minSdkVersion</code> y <code>android:targetSdkVersion</code> +en tu archivo de manifiesto. Para usar las características de Material Design en Android 5.0, establece el +atributo <code>android:targetSdkVersion</code> en <code>21</code>. Para más información, consulta +la <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guía de <uses-sdk> de la +API</a>.</p> diff --git a/docs/html-intl/intl/es/training/material/drawables.jd b/docs/html-intl/intl/es/training/material/drawables.jd index 5979f37c252d..6bfeff92e16a 100644 --- a/docs/html-intl/intl/es/training/material/drawables.jd +++ b/docs/html-intl/intl/es/training/material/drawables.jd @@ -1,10 +1,10 @@ -page.title=Trabajar con interfaces dibujables +page.title=Trabajar con interfaces dibujables @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#DrawableTint">Cambiar el matiz de los recursos dibujables</a></li> <li><a href="#ColorExtract">Extraer colores prominentes de una imagen</a></li> @@ -31,14 +31,22 @@ page.title=Trabajar con interfaces dibujables <h2 id="DrawableTint">Cambiar el matiz de los recursos dibujables</h2> -<p>Con Android 5.0 (nivel de API 21) y superior, puedes cambiar el matiz de los mapas de bits y nueve parches definidos como máscaras alfa. Puedes cambiar el matiz con recursos de colores o atributos de temas que se resuelven a recursos de colores (por ejemplo, <code>?android:attr/colorPrimary</code>). Generalmente, puedes crear estos materiales solo una vez y agregarles color automáticamente para que coincidan con tu tema.</p> +<p>Con Android 5.0 (API nivel 21) y superior, puedes cambiar el matiz de los mapas de bits y nueve parches definidos como +máscaras alfa. Puedes cambiar el matiz con recursos de colores o atributos de temas que se resuelven a +recursos de colores (por ejemplo, <code>?android:attr/colorPrimary</code>). Generalmente, puedes crear estos recursos +solo una vez y agregarles color automáticamente para que coincidan con tu tema.</p> -<p>Puedes aplicar un matiz a los objetos {@link android.graphics.drawable.BitmapDrawable} o {@link android.graphics.drawable.NinePatchDrawable} con el método {@code setTint()}. También puedes establecer el color de matiz y el modo en tus diseños con los atributos <code>android:tint</code> y <code>android:tintMode</code>.</p> +<p>Puedes aplicar un matiz a los objetos {@link android.graphics.drawable.BitmapDrawable} o {@link +android.graphics.drawable.NinePatchDrawable} con el método {@code setTint()}. También puedes +establecer el color de matiz y el modo en tus diseños con los atributos <code>android:tint</code> y +<code>android:tintMode</code>.</p> <h2 id="ColorExtract">Extraer colores prominentes de una imagen</h2> -<p>La Biblioteca de soporte de Android r21 y superiores incluye la clase {@link android.support.v7.graphics.Palette}, que te permite extraer colores prominentes de una imagen. Esta clase extrae los siguientes colores prominentes:</p> +<p>La Biblioteca de soporte de Android r21 y superiores incluye la clase {@link +android.support.v7.graphics.Palette}, que te permite extraer colores prominentes de una imagen. +Esta clase extrae los siguientes colores prominentes:</p> <ul> <li>Brillante</li> @@ -49,34 +57,44 @@ page.title=Trabajar con interfaces dibujables <li>Claro apagado</li> </ul> -<p>Para extraer estos colores, pasa un objeto {@link android.graphics.Bitmap} al método estático {@link android.support.v7.graphics.Palette#generate Palette.generate()} en el subproceso de fondo en donde cargas tus imágenes. Si no puedes usar dicho subproceso, llama al método {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} y proporciona un oyente (o gestor de eventos) en su lugar.</p> +<p>Para extraer estos colores, pasa un objeto {@link android.graphics.Bitmap} al método estático +{@link android.support.v7.graphics.Palette#generate Palette.generate()} en el subproceso en +segundo plano en donde cargas tus imágenes. Si no puedes usar dicho subproceso, llama al método +{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} y proporciona +un gestor de eventos en su lugar.</p> -<p>Puedes recuperar los colores prominentes de la imagen mediante los métodos de obtención en la clase <code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p> +<p>Puedes recuperar los colores prominentes de la imagen mediante los métodos de obtención en la clase +<code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p> -<p>Para usar la clase {@link android.support.v7.graphics.Palette} en tu proyecto, agrega la siguiente <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a> al módulo de tu aplicación:</p> +<p>Para usar la clase {@link android.support.v7.graphics.Palette} en tu proyecto, agrega la siguiente +<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencia Gradle</a> al módulo de +tu aplicación:</p> <pre> dependencies { ... - compile 'com.android.support:palette-v7:21.0.+' + compile 'com.android.support:palette-v7:21.0.0' } </pre> -<p>Para más información, consulta la referencia de la API para la clase {@link android.support.v7.graphics.Palette}.</p> +<p>Para más información, consulta la referencia de la API para la clase {@link android.support.v7.graphics.Palette}. +</p> <h2 id="VectorDrawables">Crear interfaces dibujables en vector</h2> <!-- video box --> -<a class="notice-developers-video" -href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px"> +<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px"> <div> <h3>Video</h3> <p>Gráficos en vector de Android</p> </div> </a> -<p>En Android 5.0 (nivel de API 21) y superiores, puedes definir las interfaces dibujables en vector, que escalan sin perder definición. Solo necesitas un archivo de recurso para una imagen en vector, en oposición a un archivo de recurso para la densidad de cada pantalla en el caso de imágenes de mapa de bits. Para crear una imagen en vector, defines los detalles de la forma dentro de un elemento XML <code><vector></code>.</p> +<p>En Android 5.0 (API nivel 21) y superiores, puedes definir las interfaces dibujables en vector, que escalan sin +perder definición. Solo necesitas un archivo de recurso para una imagen en vector, en oposición a un archivo de recurso para +la densidad de cada pantalla en el caso de imágenes de mapa de bits. Para crear una imagen en vector, defines los detalles +de la forma dentro de un elemento XML <code><vector></code>.</p> <p>El siguiente ejemplo define una imagen en vector con la forma de un corazón:</p> @@ -102,4 +120,7 @@ href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px"> </vector> </pre> -<p>Las imágenes en vector están representadas en Android como objetos {@link android.graphics.drawable.VectorDrawable}. Para más información 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 más información sobre la animación de las propiedades de las interfaces dibujables en vector, consulta <a href="{@docRoot}training/material/animations.html#AnimVector">Animación de interfaces dibujables en vector</a>.</p>
\ No newline at end of file +<p>Las imágenes en vector están representadas en Android como objetos {@link android.graphics.drawable.VectorDrawable}. + Para más información 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 más información +sobre la animación de las propiedades de las interfaces dibujables en vector, consulta +<a href="{@docRoot}training/material/animations.html#AnimVector">Animación de interfaces dibujables en vector</a>.</p> diff --git a/docs/html-intl/intl/es/training/material/get-started.jd b/docs/html-intl/intl/es/training/material/get-started.jd index 50a762dd02d9..bd6731668891 100644 --- a/docs/html-intl/intl/es/training/material/get-started.jd +++ b/docs/html-intl/intl/es/training/material/get-started.jd @@ -1,10 +1,10 @@ -page.title=Comencemos +page.title=Comencemos @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#ApplyTheme">Aplicar el tema Material</a></li> <li><a href="#Layouts">Realizar tus diseños</a></li> @@ -40,20 +40,27 @@ page.title=Comencemos <h3>Mantener la compatibilidad con versiones anteriores</h3> -<p>Puedes agregar muchas características de Material Design a tu aplicación mientras mantienes la compatibilidad con las versiones anteriores a Android 5.0. Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p> +<p>Puedes agregar muchas características de Material Design a tu aplicación mientras mantienes la compatibilidad con las +versiones anteriores a Android 5.0. Para más información, consulta +<a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p> <h3>Actualización de tu aplicación con Material Design</h3> -<p>Para actualizar una aplicación existente para incorporar Material Design, actualiza tus diseños siguiendo las pautas de Material Design. Además, asegúrate de incorporar profundidad, respuesta táctil y animaciones.</p> +<p>Para actualizar una aplicación existente para incorporar Material Design, actualiza tus diseños siguiendo +las pautas de Material Design. Además, asegúrate de incorporar profundidad, respuesta táctil y +animaciones.</p> <h3>Crear nuevas aplicaciones con Material Design</h3> -<p>Si creas una nueva aplicación con las características de Material Design, las <a href="http://www.google.com/design/spec">pautas de Material Design</a> te proporcionan un framework de diseño cohesivo. Sigue estas pautas y usa la nueva funcionalidad del framework de Android para diseñar y desarrollar tu aplicación.</p> +<p>Si creas una nueva aplicación con las características de Material Design, las <a href="http://www.google.com/design/spec">pautas de Material Design</a> te proporcionan un framework +de diseño cohesivo. Sigue estas pautas y usa la nueva funcionalidad del framework de +Android para diseñar y desarrollar tu aplicación.</p> <h2 id="ApplyTheme">Aplicar el tema Material</h2> -<p>Para aplicar el tema material en tu aplicación, especifica el estilo que hereda de <code>android:Theme.Material</code>:</p> +<p>Para aplicar el tema material en tu aplicación, especifica el estilo que hereda de +<code>android:Theme.Material</code>:</p> <pre> <!-- res/values/styles.xml --> @@ -65,12 +72,16 @@ page.title=Comencemos </resources> </pre> -<p>El tema material proporciona widgets de sistema actualizados y te permite establecer la paleta de colores y las animaciones predeterminadas para la respuesta táctil y las transiciones de actividades. Para obtener más detalles, consulta <a href="{@docRoot}training/material/theme.html">Usar el tema Material</a>.</p> +<p>El tema material proporciona widgets de sistema actualizados y te permite establecer la paleta de colores y las animaciones +predeterminadas para la respuesta táctil y las transiciones de actividades. Para obtener más detalles, consulta +<a href="{@docRoot}training/material/theme.html">Usar el tema Material</a>.</p> <h2 id="Layouts">Realizar tus diseños</h2> -<p>Además de aplicar y personalizar el tema material, tus diseños deben cumplir con las <a href="http://www.google.com/design/spec">pautas de Material Design</a>. Cuando realices tus diseños, presta especial atención a lo siguiente:</p> +<p>Además de aplicar y personalizar el tema material, tus diseños deben cumplir con +las <a href="http://www.google.com/design/spec">pautas de Material Design</a>. Cuando realices +tus diseños, presta especial atención a lo siguiente:</p> <ul> <li>Cuadrículas de referencia</li> @@ -83,7 +94,9 @@ page.title=Comencemos <h2 id="Depth">Especificar la elevación en tus vistas</h2> -<p>Las vistas pueden proyectar sombras y el valor de elevación de una vista determina el tamaño de su sombra y el orden en que será dibujada. Para establecer la elevación de una vista, usa el atributo <code>android:elevation</code> en tus diseños:</p> +<p>Las vistas pueden proyectar sombras y el valor de elevación de una vista +determina el tamaño de su sombra y el orden en que será dibujada. Para establecer la elevación de una vista, usa el atributo +<code>android:elevation</code> en tus diseños:</p> <pre> <TextView @@ -95,14 +108,22 @@ page.title=Comencemos android:elevation="5dp" /> </pre> -<p>La nueva propiedad <code>translationZ</code> te permite crear animaciones que reflejen cambios temporales en la elevación de una vista. Los cambios de elevación pueden ser útiles cuando <a href="{@docRoot}training/material/animations.html#ViewState">responden a gestos táctiles</a>.</p> +<p>La nueva propiedad <code>translationZ</code> te permite crear animaciones que reflejen cambios +temporales en la elevación de una vista. Los cambios de elevación pueden ser útiles cuando +<a href="{@docRoot}training/material/animations.html#ViewState">responden a gestos +táctiles</a>.</p> -<p>Para obtener más detalles, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definir vistas de recorte y sombras</a>.</p> +<p>Para obtener más detalles, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definir +vistas de recorte y sombras</a>.</p> <h2 id="ListsCards">Crear listas y tarjetas</h2> -<p>{@link android.support.v7.widget.RecyclerView} es una versión más acoplable de {@link android.widget.ListView} que admite diferentes tipos de diseños y proporciona mejoras en el rendimiento. {@link android.support.v7.widget.CardView} te permite mostrar partes de información dentro de las tarjetas con una apariencia consistente entre distintas aplicaciones. El siguiente ejemplo de códigos muestra cómo incluir un {@link android.support.v7.widget.CardView} en tu diseño:</p> +<p>{@link android.support.v7.widget.RecyclerView} es una versión más acoplable de {@link +android.widget.ListView} que admite diferentes tipos de diseños y proporciona mejoras en el rendimiento. +{@link android.support.v7.widget.CardView} te permite mostrar partes de información dentro de las tarjetas con +una apariencia uniforme entre distintas aplicaciones. El siguiente ejemplo de códigos muestra cómo incluir un +{@link android.support.v7.widget.CardView} en tu diseño:</p> <pre> <android.support.v7.widget.CardView @@ -114,12 +135,15 @@ page.title=Comencemos </android.support.v7.widget.CardView> </pre> -<p>Para más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Crear listas y tarjetas</a>.</p> +<p>Para obtener más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Crear listas +y tarjetas</a>.</p> <h2 id="Animations">Personalizar tus animaciones</h2> -<p>Android 5.0 (nivel de API 21) incluye nuevas API para crear animaciones personalizadas en tu aplicación. Por ejemplo, puedes habilitar las transiciones de actividades y definir una transición de salida dentro de una actividad:</p> +<p>Android 5.0 (API nivel 21) incluye nuevas API para crear animaciones personalizadas en tu aplicación. +Por ejemplo, puedes habilitar las transiciones de actividades y definir una transición de salida dentro de una +actividad:</p> <pre> public class MyActivity extends Activity { @@ -144,4 +168,4 @@ public class MyActivity extends Activity { <p>Cuando comienzas otra actividad desde esta actividad, se activa la transición de salida.</p> -<p>Para más información sobre las nuevas API de animación, consulta <a href="{@docRoot}training/material/animations.html">Definir animaciones personalizadas</a>.</p>
\ No newline at end of file +<p>Para más información sobre las nuevas API de animación, consulta <a href="{@docRoot}training/material/animations.html">Definir animaciones personalizadas</a>.</p> diff --git a/docs/html-intl/intl/es/training/material/index.jd b/docs/html-intl/intl/es/training/material/index.jd index 57750b97b3e5..1af0ead3db93 100644 --- a/docs/html-intl/intl/es/training/material/index.jd +++ b/docs/html-intl/intl/es/training/material/index.jd @@ -1,7 +1,7 @@ -page.title=Crear aplicaciones con Material Design -page.type=diseño -page.image=images/material.png -page.metaDescription=Aprende a aplicar Material Design a tus aplicaciones. +page.title=Material Design para desarrolladores +page.image=images/cards/material_2x.png +page.metaDescription=Aprende a aplicar Material Design a tus aplicaciones. + @jd:body @@ -9,13 +9,17 @@ page.metaDescription=Aprende a aplicar Material Design a tus aplicaciones. <div id="tb"> <h2>Dependencias y requisitos previos</h2> <ul> - <li>Android 5.0 (nivel de API 21)</li> - <li>Android Studio 0.8</li> + <li>Android 5.0 (API nivel 21)</li> </ul> </div> </div> -<p>Material Design es una guía integral para diseño visual, de movimiento e interacción en distintas plataformas y dispositivos. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas en la <a href="http://www.google.com/design/spec/material-design/introduction.html">especificación de Material Design</a> y usa los nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21).</p> +<p>Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas +plataformas y dispositivos. Para usar Material Design en tus aplicaciones de Android, sigue las pautas +descritas en la +<a href="http://www.google.com/design/spec/material-design/introduction.html">especificación de Material +Design</a> y usa los nuevos componentes y funcionalidades disponibles en Android 5.0 +(API nivel 21).</p> <p>Esta clase muestra cómo crear aplicaciones de Material Design con los siguientes elementos:</p> @@ -27,7 +31,8 @@ page.metaDescription=Aprende a aplicar Material Design a tus aplicaciones. <li>Animaciones personalizadas</li> </ul> -<p>Esta clase también te enseña cómo mantener la compatibilidad con versiones anteriores de Android 5.0 (nivel de API 21) cuando usas las características de Material Design en tu aplicación.</p> +<p>Esta clase también te enseña cómo mantener la compatibilidad con versiones anteriores de Android +5.0 (API nivel 21) cuando usas las características de Material Design en tu aplicación.</p> <h2>Lecciones</h2> @@ -52,4 +57,4 @@ page.metaDescription=Aprende a aplicar Material Design a tus aplicaciones. <dt><a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a></dt> <dd>Aprende a mantener la compatibilidad con versiones de plataforma anteriores a Android 5.0.</dd> -</dl>
\ No newline at end of file +</dl> diff --git a/docs/html-intl/intl/es/training/material/lists-cards.jd b/docs/html-intl/intl/es/training/material/lists-cards.jd index dc3f67cf2c4d..1d5db98abad8 100644 --- a/docs/html-intl/intl/es/training/material/lists-cards.jd +++ b/docs/html-intl/intl/es/training/material/lists-cards.jd @@ -1,10 +1,10 @@ -page.title=Crear listas y tarjetas +page.title=Crear listas y tarjetas @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#RecyclerView">Crear listas</a></li> <li><a href="#CardView">Crear tarjetas</a></li> @@ -19,55 +19,79 @@ page.title=Crear listas y tarjetas </div> -<p>Para crear listas completas y tarjetas con estilos de Material Design en tus aplicaciones, puedes usar los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView}.</p> +<p>Para crear listas completas y tarjetas con estilos de Material Design en tus aplicaciones, puedes usar los widgets +{@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView}. +</p> <h2 id="RecyclerView">Crear listas</h2> -<p>El widget {@link android.support.v7.widget.RecyclerView} es una versión más flexible y avanzada de {@link android.widget.ListView}. Este widget es un contenedor para mostrar grandes conjuntos de datos que se pueden desplazar de manera muy eficiente al mantener una cantidad limitada de vistas. Usa el widget {@link android.support.v7.widget.RecyclerView} cuando tengas conjuntos de datos cuyos elementos cambien en tiempo de ejecución sobre la base de la acción del usuario o los eventos de la red.</p> +<p>El widget {@link android.support.v7.widget.RecyclerView} es una versión más +flexible y avanzada de {@link android.widget.ListView}. Este widget es un contenedor para mostrar grandes conjuntos de +datos que se pueden desplazar de manera muy eficiente al mantener una cantidad limitada de vistas. Usa el widget +{@link android.support.v7.widget.RecyclerView} cuando tengas conjuntos de datos cuyos elementos +cambien en tiempo de ejecución sobre la base de la acción del usuario o los eventos de la red.</p> -<p>La clase {@link android.support.v7.widget.RecyclerView} simplifica la pantalla y la manipulación de grandes conjuntos de datos al proporcionar lo siguiente:</p> +<p>La clase {@link android.support.v7.widget.RecyclerView} simplifica la pantalla y la manipulación de grandes conjuntos de +datos al proporcionar lo siguiente:</p> <ul> <li>Administradores de diseño para el posicionamiento de elementos</li> <li>Animaciones predeterminadas para las operaciones comunes con elementos, como quitar o agregar elementos</li> </ul> -<p>También tienes la flexibilidad para definir administradores de diseño personalizados y animaciones para los widgets {@link android.support.v7.widget.RecyclerView}.</p> +<p>También tienes la flexibilidad para definir administradores de diseño personalizados y animaciones para los widgets {@link +android.support.v7.widget.RecyclerView}.</p> <img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" /> <p class="img-caption"> <strong>Figura 1</strong>. El widget <code>RecyclerView</code>. </p> -<p>Para usar el widget {@link android.support.v7.widget.RecyclerView}, tienes que especificar un adaptador y un administrador de diseño. Para crear un adaptador, extiende la clase {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Los detalles de la implementación dependen de las especificaciones de tu conjunto de datos y los tipos de vistas. Para más información, consulta los <a href="#RVExamples">ejemplos</a> que figuran a continuación.</p> +<p>Para usar el widget {@link android.support.v7.widget.RecyclerView}, tienes que especificar un +adaptador y un administrador de diseño. Para crear un adaptador, extiende la clase {@link +android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Los detalles +de la implementación dependen de las especificaciones de tu conjunto de datos y los tipos de vistas. Para más +información, consulta los <a href="#RVExamples">ejemplos</a> que figuran a continuación.</p> <div style="float:right"> <img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" /> <p class="img-caption" style="margin-left:8px"> -<strong>Figura 2</strong>: listas con <code>RecyclerView</code>. +<strong>Figura 2</strong>. Listas con <code>RecyclerView</code>. </p> </div> -<p>Un <strong>administrador de diseño</strong> posiciona las vistas de artículos dentro de un {@link android.support.v7.widget.RecyclerView} y determina cuándo volver a usar las vistas de elementos que ya no están visibles para el usuario. Para reutilizar (o <em>reciclar</em>) una vista, un administrador de diseño puede solicitarle al adaptador que reemplace el contenido de la vista con un elemento diferente del conjunto de datos. De esta manera, cuando se reciclan las vistas se mejora el rendimiento al evitar la creación de vistas innecesarias o realizar búsquedas costosas de {@link android.app.Activity#findViewById findViewById()}.</p> +<p>Un <strong>administrador de diseño</strong> posiciona las vistas de artículos dentro de un {@link +android.support.v7.widget.RecyclerView} y determina cuándo volver a usar las vistas de elementos que ya +no están visibles para el usuario. Para reutilizar (o <em>reciclar</em>) una vista, un administrador de diseño puede solicitarle al +adaptador que reemplace el contenido de la vista con un elemento diferente del conjunto de datos. De esta manera, +cuando se reciclan las vistas se mejora el rendimiento al evitar la creación de vistas innecesarias o +realizar búsquedas costosas de {@link android.app.Activity#findViewById findViewById()}.</p> <p>{@link android.support.v7.widget.RecyclerView} te proporciona estos administradores de diseño incorporados:</p> <ul> -<li>{@link android.support.v7.widget.LinearLayoutManager} muestra elementos en una lista de desplazamiento horizontal o vertical.</li> +<li>{@link android.support.v7.widget.LinearLayoutManager} muestra elementos en una lista de desplazamiento horizontal o +vertical.</li> <li>{@link android.support.v7.widget.GridLayoutManager} muestra elementos en una cuadrícula.</li> <li>{@link android.support.v7.widget.StaggeredGridLayoutManager} muestra elementos en una cuadrícula escalonada.</li> </ul> -<p>Para crear un administrador de diseño personalizado, extiende la clase {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p> +<p>Para crear un administrador de diseño personalizado, extiende la clase {@link +android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p> <h3>Animaciones</h3> -<p>Las animaciones para agregar o eliminar elementos están permitidas en forma predeterminada en {@link android.support.v7.widget.RecyclerView}. Para personalizar estas animaciones, extiende la clase {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} y usa el método {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.</p> +<p>Las animaciones para agregar o eliminar elementos están permitidas en forma predeterminada en {@link +android.support.v7.widget.RecyclerView}. Para personalizar estas animaciones, extiende la clase +{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} y usa +el método {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}. +</p> <h3 id="RVExamples">Ejemplos</h3> -<p>El siguiente ejemplo de códigos demuestra cómo agregar el {@link android.support.v7.widget.RecyclerView} a un diseño:</p> +<p>El siguiente ejemplo de códigos demuestra cómo agregar el widget +{@link android.support.v7.widget.RecyclerView} a un diseño:</p> <pre> <!-- A RecyclerView with some commonly used attributes --> @@ -78,7 +102,9 @@ page.title=Crear listas y tarjetas android:layout_height="match_parent"/> </pre> -<p>Una vez que hayas agregado un widget {@link android.support.v7.widget.RecyclerView} a tu diseño, obtén un identificador para el objeto, conéctalo a un administrador de diseño y adjunta un adaptador para los datos que se van a mostrar:</p> +<p>Una vez que hayas agregado un widget {@link android.support.v7.widget.RecyclerView} a tu diseño, +obtén un identificador para el objeto, conéctalo a un administrador de diseño y adjunta un adaptador para los datos +que se van a mostrar:</p> <pre> public class MyActivity extends Activity { @@ -108,7 +134,10 @@ public class MyActivity extends Activity { } </pre> -<p>El adaptador proporciona acceso a los elementos en tu conjunto de datos, crea vistas para los elementos y reemplaza el contenido de algunas de las vistas con estos elementos de datos nuevos cuando el elemento original ya no está visible. El siguiente ejemplo de código muestra una implementación simple para un conjunto de datos que consta de una matriz de cadenas mostradas mediante el uso de widgets {@link android.widget.TextView}:</p> +<p>El adaptador proporciona acceso a los elementos en tu conjunto de datos, crea vistas para los elementos y +reemplaza el contenido de algunas de las vistas con estos elementos de datos nuevos cuando el elemento original ya no está +visible. El siguiente ejemplo de código muestra una implementación simple para un conjunto de datos que consta +de una matriz de cadenas mostradas mediante el uso de widgets {@link android.widget.TextView}:</p> <pre> public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { @@ -171,19 +200,29 @@ public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { <h2 id="CardView">Crear tarjetas</h2> -<p>{@link android.support.v7.widget.CardView} extiende la clase {@link android.widget.FrameLayout} y te permite mostrar información dentro de tarjetas que tienen una apariencia consistente en la plataforma. Los widgets {@link android.support.v7.widget.CardView} pueden tener sombras y esquinas redondeadas.</p> +<p>{@link android.support.v7.widget.CardView} extiende la clase {@link android.widget.FrameLayout} +y te permite mostrar información dentro de tarjetas que tienen una apariencia uniforme en la plataforma. Los widgets {@link +android.support.v7.widget.CardView} pueden tener sombras y esquinas redondeadas.</p> -<p>Para crear una tarjeta con una sombra, usa el atributo <code>card_view:cardElevation</code>. {@link android.support.v7.widget.CardView} usa elevación real y sombras dinámicas en Android 5.0 (nivel de API 21) y superior, y regresa a una implementación de sombras programáticas en versiones anteriores. Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p> +<p>Para crear una tarjeta con una sombra, usa el atributo <code>card_view:cardElevation</code>. +{@link android.support.v7.widget.CardView} usa elevación real y sombras dinámicas en Android 5.0 +(API nivel 21) y superior, y regresa a una implementación de sombras programáticas en versiones anteriores. +Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener +la compatibilidad</a>.</p> -<p>Usa estas propiedades para personalizar la apariencia del widget {@link android.support.v7.widget.CardView}:</p> +<p>Usa estas propiedades para personalizar la apariencia del widget +{@link android.support.v7.widget.CardView}:</p> <ul> - <li>Para establecer el radio de la esquina en tus diseños, usa el atributo <code>card_view:cardCornerRadius</code>.</li> + <li>Para establecer el radio de la esquina en tus diseños, usa el atributo <code>card_view:cardCornerRadius</code>. +</li> <li>Para establecer el radio en tu código, usa el método <code>CardView.setRadius</code>.</li> - <li>Para establecer el color de fondo de una tarjeta, usa el atributo <code>card_view:cardBackgroundColor</code>.</li> + <li>Para establecer el color de fondo de una tarjeta, usa el atributo <code>card_view:cardBackgroundColor</code>. +</li> </ul> -<p>El siguiente ejemplo de código muestra cómo incluir un widget {@link android.support.v7.widget.CardView} en tu diseño:</p> +<p>El siguiente ejemplo de código muestra cómo incluir un widget {@link android.support.v7.widget.CardView} +en tu diseño:</p> <pre> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" @@ -212,7 +251,11 @@ public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { <h2 id="Dependencies">Agregar dependencias</h2> -<p>Los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView} son parte de las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a>. Para usar estos widgets en tu proyecto, agrega estas <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencias de Gradle</a> al módulo de tu aplicación:</p> +<p>Los widgets {@link android.support.v7.widget.RecyclerView} y {@link android.support.v7.widget.CardView} +son parte de las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de +soporte v7</a>. Para usar estos widgets en tu proyecto, agrega estas +<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Dependencias de Gradle</a> al módulo +de tu aplicación:</p> <pre> dependencies { @@ -220,4 +263,4 @@ dependencies { compile 'com.android.support:cardview-v7:21.0.+' compile 'com.android.support:recyclerview-v7:21.0.+' } -</pre>
\ No newline at end of file +</pre> diff --git a/docs/html-intl/intl/es/training/material/shadows-clipping.jd b/docs/html-intl/intl/es/training/material/shadows-clipping.jd index 5e6aa359a5da..5509fc8bbd44 100644 --- a/docs/html-intl/intl/es/training/material/shadows-clipping.jd +++ b/docs/html-intl/intl/es/training/material/shadows-clipping.jd @@ -1,10 +1,10 @@ -page.title=Definir vistas de recorte y sombras +page.title=Definir vistas de recorte y sombras @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#Elevation">Asignar elevación a tus vistas</a></li> <li><a href="#Shadows">Personalizar vistas de sombras y contornos</a></li> @@ -18,20 +18,29 @@ page.title=Definir vistas de recorte y sombras </div> </div> -<p>Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los usuarios a comprender la importancia relativa de cada elemento y a centrar su atención en la tarea a realizar.</p> +<p>Material Design introduce una elevación para los elementos de la IU. La elevación ayuda a los usuarios a comprender la +importancia relativa de cada elemento y a centrar su atención en la tarea para realizar.</p> -<p>La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su sombra: las vistas con valores de Z superiores, proyectan sombras más grandes y suaves. Las vistas con valores Z superiores ocluyen las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta el tamaño de la vista.</p> +<p>La elevación de una vista, representada por la propiedad Z, determina la apariencia visual de su +sombra: las vistas con valores Z superiores, proyectan sombras más grandes y suaves. Las vistas con valores Z superiores ocluyen +las vistas con valores Z inferiores. Sin embargo, el valor Z de una vista no afecta el tamaño de la vista.</p> -<p>El padre de la vista elevada se encarga de dibujar las sombras y así, sujeto al recorte de vista estándar, es recortado por el padre de manera predeterminada.</p> +<p>El padre de la vista elevada se encarga de dibujar las sombras y así, sujetas al recorte de vista estándar, son +recortadas por el padre de manera predeterminada.</p> -<p>La elevación también es útil para crear animaciones donde los widgets suben temporalmente sobre el plano visual cuando realizan alguna acción.</p> +<p>La elevación también es útil para crear animaciones donde los widgets suben temporalmente sobre el +plano visual cuando realizan alguna acción.</p> -<p>Para más información sobre la elevación en Material Design, consulta <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos en el espacio 3D</a>.</p> +<p>Para más información sobre la elevación en Material Design, consulta +<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos +en el espacio 3D</a>.</p> <h2 id="Elevation">Asignar elevación a tus vistas</h2> -<p>El valor Z de una vista cualquiera tiene dos componentes: <ul> +<p>El valor Z de una vista cualquiera tiene dos componentes: + +<ul> <li>Elevación: El componente estático.</li> <li>Traducción: El componente dinámico usado para las animaciones.</li> </ul> @@ -41,20 +50,32 @@ page.title=Definir vistas de recorte y sombras <img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" /> <p class="img-caption"><strong>Figura 1</strong>: sombras para diferentes elevaciones de vistas.</p> -<p>Para establecer la elevación de una vista al definir un diseño, usa el atributo <code>android:elevation</code>. Para establecer la elevación de una vista en el código de una actividad, usa el método {@link android.view.View#setElevation View.setElevation()}.</p> +<p>Para establecer la elevación de una vista al definir un diseño, usa el atributo <code>android:elevation</code>. + Para establecer la elevación de una vista en el código de una actividad, usa el método +{@link android.view.View#setElevation View.setElevation()}.</p> -<p>Para establecer la traducción de una vista, usa el método {@link android.view.View#setTranslationZ View.setTranslationZ()}.</p> +<p>Para establecer la traducción de una vista, usa el método {@link android.view.View#setTranslationZ +View.setTranslationZ()}.</p> -<p>Los nuevos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} y {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} te permiten animar fácilmente la elevación de las vistas. Para más información, consulta la referencia de la API para {@link android.view.ViewPropertyAnimator} y la guía del desarrollador <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animación de propiedades</a>.</p> +<p>Los nuevos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} y {@link +android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} te permiten +animar fácilmente la elevación de las vistas. Para más información, consulta la referencia de la API para +{@link android.view.ViewPropertyAnimator} y la guía del desarrollador <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animación de propiedades</a>. +</p> -<p>También puedes usar un {@link android.animation.StateListAnimator} para especificar estas animaciones de manera declarativa. Esto es especialmente útil para casos en donde los cambios de estados desencadenan animaciones, como cuando un usuario pulsa un botón. Para más información, consulta <a href="{@docRoot}training/material/animations.html#ViewState">Animar cambios de estados de las vistas</a>.</p> +<p>También puedes usar un {@link android.animation.StateListAnimator} para +especificar estas animaciones de manera declarativa. Esto es especialmente útil para casos en donde los cambios de +estados desencadenan animaciones, como cuando un usuario pulsa un botón. Para más información, consulta +<a href="{@docRoot}training/material/animations.html#ViewState">Animar cambios de estados de las vistas</a>.</p> <p>Los valores Z se miden en dp (píxeles independientes de la densidad).</p> <h2 id="Shadows">Personalizar visualización de sombras y contornos</h2> -<p>Los límites del elemento de diseño de fondo de una vista determinan la forma predeterminada de su sombra. Los <strong>contornos</strong> representan la forma externa de un objeto gráfico y definen el área de la onda para la respuesta táctil.</p> +<p>Los límites de la interfaz dibujable en segundo plano de una vista determinan la forma predeterminada de su sombra. +Los <strong>contornos</strong> representan la forma externa de un objeto gráfico y definen el área del efecto de ondas +para la respuesta táctil.</p> <p>Examina esta vista, definida con una interfaz dibujable en segundo plano:</p> @@ -77,23 +98,36 @@ page.title=Definir vistas de recorte y sombras </shape> </pre> -<p>La vista proyecta una sombra con esquinas redondeadas, ya que la interfaz dibujable en segundo plano define el contorno de la vista. Un contorno personalizado reemplazaría la forma predeterminada de la sombra de una vista.</p> +<p>La vista proyecta una sombra con esquinas redondeadas, ya que la interfaz dibujable en segundo plano +define el contorno de la vista. Un contorno personalizado reemplazaría la forma predeterminada de la sombra de una vista.</p> <p>Para definir un contorno personalizado para una vista en tu código:<p> <ol> <li>Extiende la clase {@link android.view.ViewOutlineProvider}.</li> <li>Reemplaza el método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> -<li>Asigna el nuevo proveedor de contornos a tu vista con el método {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> +<li>Asigna el nuevo proveedor de contornos a tu vista con el método {@link +android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> </ol> -<p>Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante el uso de métodos en la clase {@link android.graphics.Outline}. El proveedor de contornos predeterminado para las 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 a <code>null</code>.</p> +<p>Puedes crear contornos rectangulares y ovalados con esquinas redondeadas mediante el uso de métodos en la clase +{@link android.graphics.Outline}. El proveedor de contornos predeterminado para las +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 +en <code>null</code>.</p> <h2 id="Clip">Recortar vistas</h2> -<p>Recortar vistas te permite cambiar fácilmente la forma de una vista. Puedes recortar vistas para mantener una consistencia con otros elementos del diseño o para cambiar la forma de una vista en respuesta a una señal de entrada del usuario. Puedes recortar una vista a partir de su área de contorno mediante el método {@link android.view.View#setClipToOutline View.setClipToOutline()} o el atributo <code>android:clipToOutline</code>. Solo los contornos rectangulares, circulares y redondeados admiten el recorte, según lo determinado por el método {@link android.graphics.Outline#canClip Outline.canClip()}.</p> +<p>Recortar vistas te permite cambiar fácilmente la forma de una vista. Puedes recortar vistas para +mantener 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. +Puedes recortar una vista a partir de su área de contorno mediante el método {@link android.view.View#setClipToOutline +View.setClipToOutline()} o el atributo <code>android:clipToOutline</code>. Solo +los contornos rectangulares, circulares y redondeados admiten el recorte, según lo determinado por el método +{@link android.graphics.Outline#canClip Outline.canClip()}.</p> -<p>Para recortar una vista a partir de una interfaz dibujable, establece la interfaz dibujable como el plano de fondo de la vista (como se muestra más arriba) y llama al método {@link android.view.View#setClipToOutline View.setClipToOutline()}.</p> +<p>Para recortar una vista a partir de una interfaz dibujable, establece la interfaz dibujable como el plano de fondo de la vista +(como se muestra más arriba) y llama al método {@link android.view.View#setClipToOutline View.setClipToOutline()}. +</p> -<p>Recortar vistas es una operación costosa, asi que no animes la forma que usas para recortar una vista. Para lograr este efecto, usa la animación <a href="{@docRoot}training/material/animations.html#Reveal">Efecto revelar</a>.</p>
\ No newline at end of file +<p>Recortar vistas es una operación costosa, así que no animes la forma que usas para +recortar una vista. Para lograr este efecto, usa la animación <a href="{@docRoot}training/material/animations.html#Reveal">Efecto revelar</a>.</p> diff --git a/docs/html-intl/intl/es/training/material/theme.jd b/docs/html-intl/intl/es/training/material/theme.jd index c94948340fd8..d748c43dd1c1 100644 --- a/docs/html-intl/intl/es/training/material/theme.jd +++ b/docs/html-intl/intl/es/training/material/theme.jd @@ -1,10 +1,10 @@ -page.title=Usar el tema Material +page.title=Usar el tema Material @jd:body <div id="tb-wrapper"> <div id="tb"> -<h2>Esta lección te enseña a</h2> +<h2>Esta lección te enseña a realizar lo siguiente:</h2> <ol> <li><a href="#ColorPalette">Personalizar la paleta de colores</a></li> <li><a href="#StatusBar">Personalizar la barra de estado</a></li> @@ -27,9 +27,12 @@ page.title=Usar el tema Material <li>Animaciones para transiciones de actividades</li> </ul> -<p>Puedes personalizar la apariencia del tema material según la identidad de tu marca, con una paleta de colores que esté bajo tu control. Puedes cambiar el matiz de la barra de acción y la barra de estado mediante atributos de temas, como se muestra en la <a href="#fig3">Figura 3</a>.</p> +<p>Puedes personalizar la apariencia del tema material +según la identidad de tu marca, con una paleta de colores que esté bajo tu control. Puedes cambiar el matiz de la barra de acción y +la barra de estado mediante atributos de temas, como se muestra en la <a href="#fig3">figura 3</a>.</p> -<p>Los widgets del sistema tienen un nuevo diseño y animaciones para respuesta táctil. Puedes personalizar tu aplicación cambiando su paleta de colores, las animaciones de la respuesta táctil y sus transiciones de actividades.</p> +<p>Los widgets del sistema tienen un nuevo diseño y animaciones para respuesta táctil. Puedes personalizar tu aplicación cambiando su +paleta de colores, las animaciones de la respuesta táctil y sus transiciones de actividades.</p> <p>El tema material se define como:</p> @@ -39,7 +42,8 @@ page.title=Usar el tema Material <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> </ul> -<p>Para obtener una lista de estilos de Material, consulta la referencia de la API para {@link android.R.style R.style}.</p> +<p>Para obtener una lista de estilos de Material, consulta la referencia de la API para +{@link android.R.style R.style}.</p> <!-- two columns, dark/light material theme example --> <div style="width:700px;margin-top:25px;margin-bottom:10px"> @@ -59,13 +63,18 @@ page.title=Usar el tema Material </div> <p class="note"> -<strong>Nota:</strong> El tema material solo está disponible en Android 5.0 (nivel de API 21) y superior. Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> proporcionan temas con estilos de Material Design para algunos widgets y admiten la personalización de la paleta de colores. Para más información, consulta <a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>. +<strong>Nota:</strong> El tema material solo está disponible en Android 5.0 (API nivel 21) y +superior. Las <a href="{@docRoot}tools/support-library/features.html#v7">Bibliotecas de soporte v7</a> +proporcionan temas con estilos de Material Design para algunos widgets y admiten la personalización de la paleta de +colores. Para más información, consulta +<a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>. </p> <h2 id="ColorPalette">Personalizar la paleta de colores</h2> -<p style="margin-bottom:30px">Si deseas personalizar los colores base del tema para que se adapten a tu marca, define tus colores personalizados mediante los atributos de temas cuando heredes del tema material:</p> +<p style="margin-bottom:30px">Si deseas personalizar los colores base del tema para que se adapten a tu marca, define +tus colores personalizados mediante los atributos de temas cuando heredes del tema material:</p> <pre> <resources> @@ -91,17 +100,32 @@ page.title=Usar el tema Material <h2 id="StatusBar">Personalizar la barra de estado</h2> -<p>El tema material te permite personalizar fácilmente la barra de estado, especifica un color que se adapte a tu marca y proporciona suficiente contraste para mostrar los íconos de estado en blanco. Si quieres establecer un color personalizado para la barra de estado, usa el atributo <code>android:statusBarColor</code> cuando extiendas el tema material. <code>android:statusBarColor</code> hereda el valor de <code>android:colorPrimaryDark</code> en forma predeterminada.</p> +<p>El tema material te permite personalizar fácilmente la barra de estado, especifica un +color que se adapte a tu marca y proporciona suficiente contraste para mostrar los íconos de estado en blanco. Si +quieres establecer un color personalizado para la barra de estado, usa el atributo <code>android:statusBarColor</code> +cuando extiendas el tema material. <code>android:statusBarColor</code> hereda el +valor de <code>android:colorPrimaryDark</code> en forma predeterminada.</p> -<p>También puedes dibujar por detrás de la barra de estado. Por ejemplo, si quieres que la barra de estado se muestre en forma transparente sobre una foto, aplica un sutil degradado oscuro para garantizar que los íconos de estado blancos sigan visibles. Para hacerlo, establece el atributo <code>android:statusBarColor</code> a <code>@android:color/transparent</code> y ajusta los indicadores de la ventana según lo requerido. También puedes usar el método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para las animaciones o el difuminado.</p> +<p>También puedes dibujar por detrás de la barra de estado. Por ejemplo, si quieres que la barra de estado se +muestre en forma transparente sobre una foto, aplica un sutil degradado oscuro para garantizar que los íconos +de estado blancos sigan visibles. Para hacerlo, establece el atributo <code>android:statusBarColor</code> en +<code>@android:color/transparent</code> y ajusta los indicadores de la ventana según lo requerido. También puedes +usar el método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para +las animaciones o el difuminado.</p> <p class="note"> -<strong>Nota:</strong> La barra de estado casi siempre debe estar delimitada claramente de la barra de herramientas principal, excepto para los casos en donde muestres imágenes de un extremo a otro o contenido multimedia detrás de estas barras, y también cuando uses un degradado para garantizar que los íconos aún sean visibles. +<strong>Nota:</strong> La barra de estado casi siempre debe estar delimitada claramente de la +barra de herramientas principal, excepto para los casos en donde muestres imágenes de un extremo a otro o contenido multimedia detrás +de estas barras, y también cuando uses un degradado para garantizar que los íconos aún sean visibles. </p> -<p>Cuando personalizas la barra de navegación y la barra de estado, o bien tendrás que hacer que ambas sean transparentes o modifica solo la barra de estado. La barra de navegación debe permanecer de color negro en todos los otros casos.</p> +<p>Cuando personalizas la barra de navegación y la barra de estado, haz que ambas sean transparentes o modifica +solo la barra de estado. La barra de navegación debe permanecer de color negro en todos los otros casos.</p> -<h2 id="Inheritance">Cambiar el tema de vistas individuales</h3> +<h2 id="Inheritance">Vistas individuales del tema</h3> -<p>Los elementos en las definiciones de diseño XML pueden especificar el atributo <code>android:theme</code>, que hace referencia al recurso del tema. Este atributo modifica el tema para el elemento y cualquier elemento hijo, y esto es útil para modificar las paletas de colores de los temas en una porción específica de una interfaz.</p>
\ No newline at end of file +<p>Los elementos en las definiciones de diseño XML pueden especificar el atributo <code>android:theme</code>, +que hace referencia al recurso del tema. Este atributo modifica el tema para el elemento y cualquier +elemento secundario, y esto es útil para modificar las paletas de colores de los temas en una porción específica +de una interfaz.</p> |