diff options
Diffstat (limited to 'docs/html-intl/es/training/multiscreen')
| -rw-r--r-- | docs/html-intl/es/training/multiscreen/adaptui.jd | 212 | ||||
| -rw-r--r-- | docs/html-intl/es/training/multiscreen/index.jd | 63 | ||||
| -rw-r--r-- | docs/html-intl/es/training/multiscreen/screendensities.jd | 100 | ||||
| -rw-r--r-- | docs/html-intl/es/training/multiscreen/screensizes.jd | 279 |
4 files changed, 654 insertions, 0 deletions
diff --git a/docs/html-intl/es/training/multiscreen/adaptui.jd b/docs/html-intl/es/training/multiscreen/adaptui.jd new file mode 100644 index 0000000..61f0735 --- /dev/null +++ b/docs/html-intl/es/training/multiscreen/adaptui.jd @@ -0,0 +1,212 @@ +page.title=Cómo implementar interfaces de usuario adaptables +parent.title=Cómo diseñar aplicaciones para varias pantallas +parent.link=index.html + +trainingnavtop=true +previous.title=Cómo admitir varias densidades de pantalla +previous.link=screendensities.html + +@jd:body + + +<!-- This is the training bar --> +<div id="tb-wrapper"> +<div id="tb"> + +<h2>En esta sección puedes aprender:</h2> + +<ol> + <li><a href="#TaskDetermineCurLayout">Cómo determinar el diseño actual</a></li> + <li><a href="#TaskReactToLayout">Cómo reaccionar en función del diseño actual</a></li> + <li><a href="#TaskReuseFrag">Cómo volver a utilizar fragmentos en otras actividades</a></li> + <li><a href="#TaskHandleConfigChanges">Cómo gestionar los cambios en la configuración de la pantalla</a></li> +</ol> + +<h2>También puedes consultar:</h2> + +<ul> + <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Cómo admitir tablets y dispositivos móviles</a></li> +</ul> + +<h2>¡Pruébalo!</h2> + +<div class="download-box"> +<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Descargar la aplicación de ejemplo</a> +<p class="filename">NewsReader.zip</p> +</div> + + +</div> +</div> + +<p>En función del diseño actual de tu aplicación, la interfaz puede variar. Por ejemplo, si tu aplicación está en modo de panel dual, haz clic en un elemento del panel izquierdo para que aparezca en el panel de la derecha. Asimismo, si está en modo de panel único, el contenido debería aparecer por sí mismo (en otra actividad).</p> + + +<h2 id="TaskDetermineCurLayout">Cómo determinar el diseño actual</h2> + +<p>Dado que la implementación de cada diseño variará en cierta medida, probablemente una de las primeras cosas que tendrás que hacer será determinar el diseño que el usuario puede ver en ese momento. Por ejemplo, puedes determinar si el usuario utiliza el modo de "panel único" o de "panel dual". Para ello, puedes consultar si una vista determinada existe y es visible:</p> + +<pre class="prettyprint"> +public class NewsReaderActivity extends FragmentActivity { + boolean mIsDualPane; + + @Override + public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.main_layout); + + View articleView = findViewById(R.id.article); + mIsDualPane = articleView != null && + articleView.getVisibility() == View.VISIBLE; + } +} +</pre> + +<p>Ten en cuenta que este código consulta la disponibilidad del panel del "artículo", lo que es mucho más flexible que incluir una consulta para un diseño determinado.</p> + +<p>Otro ejemplo de cómo puedes adaptar la existencia de diferentes componentes es comprobar su disponibilidad antes de realizar una operación relacionada con los mismos. Por ejemplo, en la aplicación de ejemplo News Reader, hay un botón que abre un menú, pero ese botón solo aparece en las versiones anteriores a Android 3.0 (porque <PH>{@link android.app.ActionBar}</PH> en el nivel 11 del API y en niveles superiores). Por tanto, para añadir el detector de eventos para este botón, puedes hacer lo siguiente:</p> + +<pre class="prettyprint"> +Button catButton = (Button) findViewById(R.id.categorybutton); +OnClickListener listener = /* create your listener here */; +if (catButton != null) { + catButton.setOnClickListener(listener); +} +</pre> + + +<h2 id="TaskReactToLayout">Cómo reaccionar en función del diseño actual</h2> + +<p>El resultado de algunas acciones puede variar en función del diseño actual. Por ejemplo, en el ejemplo de News Reader, al hacer clic en un encabezado de la lista se abrirá el artículo del panel situado a la derecha si la interfaz de usuario está en modo de panel dual, pero se iniciará una actividad independiente si esta está en modo de panel único:</p> + +<pre> +@Override +public void onHeadlineSelected(int index) { + mArtIndex = index; + if (mIsDualPane) { + /* display article on the right pane */ + mArticleFragment.displayArticle(mCurrentCat.getArticle(index)); + } else { + /* start a separate activity */ + Intent intent = new Intent(this, ArticleActivity.class); + intent.putExtra("catIndex", mCatIndex); + intent.putExtra("artIndex", index); + startActivity(intent); + } +} +</pre> + +<p>De igual modo, si la aplicación está en modo de panel dual, debe configurar la barra de acción con pestañas para la navegación, mientras que si la aplicación está en modo de panel único, debe configurar la navegación con un widget giratorio. Por tanto, el código debe comprobar también cuál es el caso adecuado:</p> + +<pre> +final String CATEGORIES[] = { "Top Stories", "Politics", "Economy", "Technology" }; + +public void onCreate(Bundle savedInstanceState) { + .... + if (mIsDualPane) { + /* use tabs for navigation */ + actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS); + int i; + for (i = 0; i < CATEGORIES.length; i++) { + actionBar.addTab(actionBar.newTab().setText( + CATEGORIES[i]).setTabListener(handler)); + } + actionBar.setSelectedNavigationItem(selTab); + } + else { + /* use list navigation (spinner) */ + actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST); + SpinnerAdapter adap = new ArrayAdapter<String>(this, + R.layout.headline_item, CATEGORIES); + actionBar.setListNavigationCallbacks(adap, handler); + } +} +</pre> + + +<h2 id="TaskReuseFrag">Cómo volver a utilizar fragmentos en otras actividades</h2> + +<p>Un patrón recurrente a la hora de diseñar para distintas pantallas es utilizar una parte de la interfaz que se implementa como un panel en algunas configuraciones de pantalla y como actividad independiente en otras. Por ejemplo, en el ejemplo de News Reader, el texto del artículo de noticias se presenta en el panel de la derecha en las pantallas grandes, pero es una actividad independiente en las pantallas más pequeñas.</p> + +<p>En otros casos similares, puedes evitar la duplicación de código reutilizando la misma <PH>{@link android.app.Fragment}</PH> en distintas actividades. Por ejemplo, <code>ArticleFragment</code> se utiliza en el diseño de panel dual:</p> + +{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all} + +<p>A continuación, se vuelve a utilizar (sin diseño) en el diseño de actividad para pantallas más pequeñas (<code>ArticleActivity</code>):</p> + +<pre> +ArticleFragment frag = new ArticleFragment(); +getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit(); +</pre> + +<p>Evidentemente, esto tiene el mismo efecto que declarar el fragmento en un diseño XML. Sin embargo, en este caso, un diseño XML sería un trabajo innecesario porque el fragmento del artículo es el único componente de esta actividad.</p> + +<p>Un punto muy importante que debes tener en cuenta al diseñar tus fragmentos es no crear un acoplamiento fuerte para una actividad determinada. Para ello, normalmente puedes definir una interfaz que resuma todas las formas en las que tiene que interactuar el fragmento con su actividad principal y, a continuación, la actividad principal implementa esa interfaz:</p> + +<p>Por ejemplo, ese es precisamente el objetivo del <code>HeadlinesFragment</code> de la aplicación News Reader:</p> + +<pre> +public class HeadlinesFragment extends ListFragment { + ... + OnHeadlineSelectedListener mHeadlineSelectedListener = null; + + /* Must be implemented by host activity */ + public interface OnHeadlineSelectedListener { + public void onHeadlineSelected(int index); + } + ... + + public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) { + mHeadlineSelectedListener = listener; + } +} +</pre> + +<p>A continuación, cuando el usuario selecciona un encabezado, el fragmento notifica el detector especificado por la actividad principal (en lugar de notificar una actividad predefinida específica):</p> + +<pre> +public class HeadlinesFragment extends ListFragment { + ... + @Override + public void onItemClick(AdapterView<?> parent, + View view, int position, long id) { + if (null != mHeadlineSelectedListener) { + mHeadlineSelectedListener.onHeadlineSelected(position); + } + } + ... +} +</pre> + +<p>Si quieres obtener más información sobre esta técnica, puedes consultar la guía sobre <a +href="{@docRoot}guide/practices/tablets-and-handsets.html">Cómo admitir tablets y dispositivos móviles</a>.</p> + + +<h2 id="TaskHandleConfigChanges">Cómo gestionar los cambios en la configuración de la pantalla</h2> + +<p>Si utilizas actividades independientes para implementar partes individuales de tu interfaz, debes tener en cuenta que es posible que tengas que reaccionar ante determinados cambios en la configuración (como un cambio de rotación) para mantener la homogeneidad de tu interfaz.</p> + +<p>Por ejemplo, en un tablet de 7" que utilice Android 3.0 o una versión superior, el ejemplo de News Reader utiliza una actividad independiente para mostrar el artículo de noticias en el modo vertical, pero utiliza el diseño de panel dual en el modo horizontal.</p> + +<p>Esto significa que cuando el usuario utiliza el modo vertical y está consultando un artículo, tienes que detectar que la orientación ha cambiado al modo horizontal y reaccionar de forma adecuada finalizando la actividad. A continuación, debes volver a la actividad principal para que el contenido pueda mostrarse en el diseño de panel dual:</p> + +<pre> +public class ArticleActivity extends FragmentActivity { + int mCatIndex, mArtIndex; + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + mCatIndex = getIntent().getExtras().getInt("catIndex", 0); + mArtIndex = getIntent().getExtras().getInt("artIndex", 0); + + // If should be in two-pane mode, finish to return to main activity + if (getResources().getBoolean(R.bool.has_two_panes)) { + finish(); + return; + } + ... +} +</pre> + + diff --git a/docs/html-intl/es/training/multiscreen/index.jd b/docs/html-intl/es/training/multiscreen/index.jd new file mode 100644 index 0000000..0a1461b --- /dev/null +++ b/docs/html-intl/es/training/multiscreen/index.jd @@ -0,0 +1,63 @@ +page.title=Cómo diseñar aplicaciones para varias pantallas +trainingnavtop=true +startpage=true +next.title=Cómo admitir varios tamaños de pantalla +next.link=screensizes.html + +@jd:body + +<div id="tb-wrapper"> +<div id="tb"> + +<h2>Dependencias y requisitos previos</h2> + +<ul> + <li>Android 1.6 o superior (Android 2.1 o superior para la aplicación de ejemplo)</li> + <li>Conocimiento básico de <a +href="http://developer.android.com/guide/components/activities.html">Actividades</a> y <a href="http://developer.android.com/guide/components/fragments.html">Fragmentos</a></li> + <li>Experiencia en el desarrollo de una <a +href="http://developer.android.com/guide/topics/ui/index.html">Interfaz de usuario</a> de Android</li> + <li>Algunas funciones requieren el uso de la <a +href="{@docRoot}tools/extras/support-library.html">biblioteca de compatibilidad</a></li> +</ul> + +<h2>También puedes consultar:</h2> + +<ul> + <li><a href="{@docRoot}guide/practices/screens_support.html">Cómo admitir varias pantallas</a></li> +</ul> + +<h2>¡Pruébalo!</h2> + +<div class="download-box"> +<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Descargar la aplicación de ejemplo</a> +<p class="filename">NewsReader.zip</p> +</div> + +</div> +</div> + +<p>Android se utiliza en cientos de dispositivos con diferentes tamaños de pantalla, desde pequeños teléfonos hasta enormes televisores. Por ello, es importante que diseñes tu aplicación para que sea compatible con todos los tamaños de pantalla y esté disponible para el mayor número de usuarios posible.</p> + +<p>Sin embargo, no es suficiente con que tu aplicación sea compatible con diferentes dispositivos. Cada tamaño de pantalla ofrece diferentes posibilidades y retos para la interacción del usuario. Por ello, para satisfacer completamente a tus usuarios e impresionarlos, tu aplicación debe ir más allá de simplemente <em>admitir</em> varias pantallas: debe <em>optimizar</em> la experiencia de usuario para cada configuración de pantalla.</p> + +<p>En esta sección se explica cómo implementar una interfaz de usuario que esté optimizada para diferentes configuraciones de pantalla.</p> + +<p>El código que aparece en cada sección se ha extraído de una aplicación de ejemplo para explicar las prácticas recomendadas a la hora de optimizar tu aplicación para varias pantallas. Puedes descargar el ejemplo (situado a la derecha) y utilizarlo como fuente de código reutilizable para tu propia aplicación.</p> + +<p class="note"><strong>Nota:</strong> en esta sección y en el ejemplo correspondiente, se utiliza la <a +href="{@docRoot}tools/extras/support-library.html">biblioteca de compatibilidad</a> para poder usar las API de <PH>{@link android.app.Fragment}</PH> en versiones anteriores a Android 3.0. Debes descargar y la biblioteca y añadirla a tu aplicación para poder utilizar todas las API que se indican en esta sección.</p> + + +<h2>Secciones</h2> + +<dl> + <dt><b><a href="screensizes.html">Cómo admitir varios tamaños de pantalla</a></b></dt> + <dd>En esta sección se explica cómo crear diseños que se adapten a diferentes tamaños de pantalla (mediante dimensiones flexibles para vistas, <PH>{@link android.widget.RelativeLayout}</PH>, calificadores de orientación y tamaño de pantalla, filtros de alias y mapas de bits de la clase NinePatch).</dd> + + <dt><b><a href="screendensities.html">Cómo admitir varias densidades de pantalla</a></b></dt> + <dd>En esta sección se explica cómo admitir pantallas con diferentes densidades de píxeles (mediante píxeles independientes de la densidad y mapas de bits adecuados a cada densidad).</dd> + + <dt><b><a href="adaptui.html">Cómo implementar interfaces de usuario adaptables</a></b></dt> + <dd>En esta sección se explica cómo implementar tu interfaz de usuario para que se adapte a varias combinaciones de densidad o de tamaño de pantalla (detección de tiempo de ejecución del diseño activo, cómo reaccionar en función del diseño actual y cómo administrar los cambios en la configuración de la pantalla).</dd> +</dl> diff --git a/docs/html-intl/es/training/multiscreen/screendensities.jd b/docs/html-intl/es/training/multiscreen/screendensities.jd new file mode 100644 index 0000000..0edb89f --- /dev/null +++ b/docs/html-intl/es/training/multiscreen/screendensities.jd @@ -0,0 +1,100 @@ +page.title=Cómo admitir varias densidades de pantalla +parent.title=Cómo diseñar aplicaciones para varias pantallas +parent.link=index.html + +trainingnavtop=true +previous.title=Cómo admitir varios tamaños de pantalla +previous.link=screensizes.html +next.title=Cómo implementar interfaces de usuario adaptables +next.link=adaptui.html + +@jd:body + + +<!-- This is the training bar --> +<div id="tb-wrapper"> +<div id="tb"> + +<h2>En esta sección puedes aprender:</h2> +<ol> + <li><a href="#TaskUseDP">Cómo utilizar píxeles independientes de la densidad</a></li> + <li><a href="#TaskProvideAltBmp">Cómo proporcionar mapas de bits alternativos</a></li> +</ol> + +<h2>También puedes consultar:</h2> + +<ul> + <li><a href="{@docRoot}guide/practices/screens_support.html">Cómo admitir varias pantallas</a></li> + <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Directrices para diseñar iconos</a></li> +</ul> + +<h2>¡Pruébalo!</h2> + +<div class="download-box"> +<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Descargar la aplicación de ejemplo</a> +<p class="filename">NewsReader.zip</p> +</div> + + +</div> +</div> + +<p>En esta sección se explica cómo proporcionar diferentes recursos y utilizar unidades de medida de resolución independiente para admitir diferentes densidades de pantalla.</p> + +<h2 id="TaskUseDP">Cómo utilizar píxeles independientes de la densidad</h2> + +<p>Un error común que debes evitar al crear tus diseños es utilizar píxeles absolutos para definir distancias o tamaños. Definir dimensiones de diseño mediante píxeles es problemático porque cada pantalla tiene densidades de píxeles diferentes, por lo que es posible que el mismo número de píxeles corresponda a varios tamaños físicos en distintos dispositivos. Por tanto, al especificar dimensiones, debes utilizar siempre unidades <code>dp</code> o <code>sp</code>. <code>dp</code> es un píxel independiente de la densidad que corresponde al tamaño físico de un píxel a 160 dpi. <code>sp</code> es la misma unidad de base, pero aumentada en función del tamaño de letra preferido por el usuario (se trata de un píxel independiente de la escala). Por tanto, debes utilizar esta unidad de medida para definir el tamaño de letra (pero no para tamaños de diseños).</p> + +<p>Por ejemplo, al especificar un espacio entre dos vistas, debes utilizar <code>dp</code> en lugar de <code>px</code>:</p> + +<pre> +<Button android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@string/clickme" + android:layout_marginTop="20dp" /> +</pre> + +<p>Al especificar el tamaño de letra, debes usar siempre <code>sp</code>:</p> + +<pre> +<TextView android:layout_width="match_parent" + android:layout_height="wrap_content" + android:textSize="20sp" /> +</pre> + + +<h2 id="TaskProvideAltBmp">Cómo proporcionar mapas de bits alternativos</h2> + +<p>Dado que Android se ejecuta en dispositivos con diferentes densidades de pantalla, siempre debes proporcionar tus recursos de mapas de bits adaptados a los conjuntos de densidades generalizados: baja, media, alta y muy alta. De este modo, podrás conseguir un rendimiento y una calidad gráfica óptimos en todas las densidades de pantalla.</p> + +<p>Para generar estas imágenes, debes empezar con tu recurso genérico en formato vectorial y generar las imágenes para cada densidad con la siguiente escala de tamaños:</p> + +<p><ul> + <li><code>xhdpi</code>: 2,0 + <li><code>hdpi</code>: 1,5 + <li><code>mdpi</code>: 1.0 (base) + <li><code>ldpi</code>: 0,75 +</ul></p> + +<p>Esto significa que si generas una imagen de 200 x 200 para dispositivos <code>xhdpi</code>, debes generar el mismo recurso en 150 x 150 para <code>hdpi</code>, en 100 x 100 para <code>mdpi</code> y, por último, una imagen de 75 x 75 para dispositivos <code>ldpi</code>.</p> + +<p>A continuación, sitúa los archivos de imagen generados en el subdirectorio adecuado en <code>res/</code> y el sistema seleccionará el archivo correspondiente automáticamente en función de la densidad de la pantalla del dispositivo en el que se esté ejecutando la aplicación:</p> + +<pre class="classic no-pretty-print"> +MyProject/ + res/ + drawable-xhdpi/ + awesomeimage.png + drawable-hdpi/ + awesomeimage.png + drawable-mdpi/ + awesomeimage.png + drawable-ldpi/ + awesomeimage.png +</pre> + +<p>Por tanto, cada vez que hagas referencia a <code>@drawable/awesomeimage</code>, el sistema seleccionará el mapa de bits adecuado en función de los puntos por pulgada de la pantalla.</p> + +<p>Para consultar más sugerencias y directrices sobre cómo crear recursos de iconos para tu aplicación, consulta la sección <a +href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Directrices para diseñar iconos</a>.</p> + diff --git a/docs/html-intl/es/training/multiscreen/screensizes.jd b/docs/html-intl/es/training/multiscreen/screensizes.jd new file mode 100644 index 0000000..9a971d1 --- /dev/null +++ b/docs/html-intl/es/training/multiscreen/screensizes.jd @@ -0,0 +1,279 @@ +page.title=Cómo admitir varios tamaños de pantalla +parent.title=Cómo diseñar aplicaciones para varias pantallas +parent.link=index.html + +trainingnavtop=true +next.title=Cómo admitir varias densidades de pantalla +next.link=screendensities.html + +@jd:body + + +<!-- This is the training bar --> +<div id="tb-wrapper"> +<div id="tb"> + +<h2>En esta sección puedes aprender:</h2> +<ol> + <li><a href="#TaskUseWrapMatchPar">Cómo utilizar los valores "wrap_content" y "match_parent"</a></li> + <li><a href="#TaskUseRelativeLayout">Cómo utilizar RelativeLayout</a></li> + <li><a href="#TaskUseSizeQuali">Cómo utilizar calificadores de tamaño</a></li> + <li><a href="#TaskUseSWQuali">Cómo utilizar el calificador de ancho más pequeño</a></li> + <li><a href="#TaskUseAliasFilters">Cómo utilizar alias de diseño</a></li> + <li><a href="#TaskUseOriQuali">Cómo utilizar calificadores de orientación</a></li> + <li><a href="#TaskUse9Patch">Cómo utilizar mapas de bits de la clase NinePatch</a></li> +</ol> + +<h2>También puedes consultar:</h2> + +<ul> + <li><a href="{@docRoot}guide/practices/screens_support.html">Cómo admitir varias pantallas</a></li> +</ul> + +<h2>¡Pruébalo!</h2> + +<div class="download-box"> +<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Descargar la aplicación de ejemplo</a> +<p class="filename">NewsReader.zip</p> +</div> + +</div> +</div> + +<p>En esta sección se explica cómo admitir varios tamaños de pantalla. Para ello, sigue estos pasos:</p> +<ul> + <li>Asegúrate de que el diseño se haya ajustado correctamente al tamaño de la pantalla.</li> + <li>Configura la pantalla con el diseño de interfaz adecuado.</li> + <li>Asegúrate de aplicar el diseño adecuado a la pantalla correspondiente.</li> + <li>Utiliza el mapa de bits con la escala adecuada.</li> +</ul> + + +<h2 id="TaskUseWrapMatchPar">Cómo utilizar los valores "wrap_content" y "match_parent"</h2> + +<p>Para garantizar que el diseño es flexible y que se adapta a varios tamaños de pantalla, debes utilizar los valores <code>"wrap_content"</code> y <code>"match_parent"</code> para la altura y el ancho de algunos componentes de la vista. Si utilizas <code>"wrap_content"</code>, el ancho o la altura de la vista se establece en el tamaño mínimo necesario para adaptar el contenido a esta vista, mientras que <code>"match_parent"</code> (también conocido como <code>"fill_parent"</code> antes del nivel 8 del API) provoca que el componente se amplíe hasta coincidir con el tamaño de la vista principal.</p> + +<p>Al utilizar los valores de tamaño <code>"wrap_content"</code> y <code>"match_parent"</code> en lugar de los tamaños predefinidos, las vistas pueden utilizar únicamente el espacio requerido para esa vista o ampliarse hasta rellenar el espacio disponible respectivamente. Por ejemplo:</p> + +{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all} + +<p>Observa cómo se utilizan en el ejemplo los valores <code>"wrap_content"</code> y <code>"match_parent"</code> para los tamaños de los componentes en lugar de dimensiones específicas. Esto permite que el diseño se adapte correctamente a diferentes tamaños y orientaciones de la pantalla.</p> + +<p>Por ejemplo, esta es la apariencia del diseño en modo horizontal y vertical. Ten en cuenta que los tamaños de los componentes se adaptan automáticamente a la altura y al ancho:</p> + +<img src="{@docRoot}images/training/layout-hvga.png" /> +<p class="img-caption"><strong>Figura 1.</strong> La aplicación de ejemplo News Reader en modo vertical (izquierda) y horizontal (derecha)</p> + + +<h2 id="TaskUseRelativeLayout">Cómo utilizar RelativeLayout</h2> + +<p>Puedes crear diseños de un cierto nivel de complejidad con instancias anidadas de <PH>{@link android.widget.LinearLayout}</PH> y combinaciones de los valores de tamaño <code>"wrap_content"</code> y <code>"match_parent"</code>. Sin embargo, <PH>{@link android.widget.LinearLayout}</PH> no te permite controlar con precisión las relaciones espaciales de las vistas secundarias; las vistas de <PH>{@link android.widget.LinearLayout}</PH> simplemente se alinean en paralelo. Si quieres orientar las vistas secundarias de una forma que no sea una línea recta, a menudo la mejor solución es utilizar <PH>{@link android.widget.RelativeLayout}</PH>que te permite especificar el diseño según las relaciones espaciales entre los componentes. Por ejemplo, puedes alinear una vista secundaria en el lateral izquierdo y otra vista en el lateral derecho de la pantalla.</p> + +<p>Por ejemplo:</p> + +<pre> +<?xml version="1.0" encoding="utf-8"?> +<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" + android:layout_width="match_parent" + android:layout_height="match_parent"> + <TextView + android:id="@+id/label" + android:layout_width="match_parent" + android:layout_height="wrap_content" + android:text="Type here:"/> + <EditText + android:id="@+id/entry" + android:layout_width="match_parent" + android:layout_height="wrap_content" + android:layout_below="@id/label"/> + <Button + android:id="@+id/ok" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:layout_below="@id/entry" + android:layout_alignParentRight="true" + android:layout_marginLeft="10dp" + android:text="OK" /> + <Button + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:layout_toLeftOf="@id/ok" + android:layout_alignTop="@id/ok" + android:text="Cancel" /> +</RelativeLayout> +</pre> + +<p>La figura 2 indica cómo se muestra este diseño en una pantalla QVGA.</p> + +<img src="{@docRoot}images/training/relativelayout1.png" /> +<p class="img-caption"><strong>Figura 2.</strong> Captura de pantalla de una pantalla QVGA (pantalla pequeña)</p> + +<p>La figura 3 indica cómo se muestra este diseño en una pantalla más grande.</p> + +<img src="{@docRoot}images/training/relativelayout2.png" /> +<p class="img-caption"><strong>Figura 3.</strong> Captura de pantalla de una pantalla WSVGA (pantalla grande)</p> + +<p>Ten en cuenta que aunque el tamaño de los componentes es diferente, las relaciones espaciales se mantienen según se ha especificado con <PH>{@link android.widget.RelativeLayout.LayoutParams}</PH>.</p> + + +<h2 id="TaskUseSizeQuali">Cómo utilizar calificadores de tamaño</h2> + +<p>Hay mucha diferencia entre un diseño flexible y un diseño relativo como el que se ha utilizado en las secciones anteriores. Aunque ambos diseños se adaptan a diferentes pantalla estirando el espacio dentro de los componentes y alrededor de los mismos, puede que no ofrezcan la mejor experiencia de usuario para cada tamaño de pantalla. Por tanto, tu aplicación no solo debe implementar los diseños flexibles, sino que también debe ofrecer varios diseños alternativos para diferentes configuraciones de pantalla. Para ello, se utilizan <a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers">calificadores de configuración</a>, que permiten que el tiempo de ejecución seleccione el recurso adecuado en función de la configuración actual del dispositivo (por ejemplo, un diseño diferente para diferentes tamaños de pantalla).</p> + +<p>Por ejemplo, muchas aplicaciones implementan el patrón de "panel dual" para pantallas grandes (la aplicación mostraría una lista de elementos en un panel y el contenido en otro panel). Aunque los tablets y las televisiones son lo suficientemente grandes como para que los dos paneles aparezcan simultáneamente en la pantalla, las pantallas de los teléfonos tienen que mostrarlos por separado. Para implementar estos diseños, puedes utilizar los siguientes archivos:</p> + +<ul> + <li><code>res/layout/main.xml</code>, diseño de panel único (predeterminado): + +{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all} +</li> + <li><code>res/layout-large/main.xml</code>, diseño de panel dual: + +{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all} +</li> +</ul> + +<p>Observa el calificador <code>large</code> en el nombre de directorio del segundo diseño. Este diseño se seleccionará en dispositivos con pantallas clasificadas como grandes (por ejemplo, tablets de 7" y superiores). El otro diseño (sin calificadores) se seleccionará en el caso de dispositivos más pequeños.</p> + + +<h2 id="TaskUseSWQuali">Cómo utilizar el calificador de ancho mínimo</h2> + +<p>Una de las dificultades a las que se enfrentaron los desarrolladores con los dispositivos Android anteriores a la versión 3.2 fue el contenedor de tamaño de pantalla "grande". Algunos ejemplos de este tipo de dispositivo son el tablet Dell Streak, el tablet Galaxy Tab original y los tablets de 7" en general. Sin embargo, es posible que muchas aplicaciones quieran mostrar varios diseños para diferentes dispositivos de esta categoría (por ejemplo, para dispositivos de 5" y de 7"), aunque todos estos dispositivos se consideren de pantalla grande. Por esta razón, Android introdujo el calificador de "ancho mínimo" (entre otros) en Android 3.2.</p> + +<p>Este calificador te permite mostrar contenido en pantallas que tengan un ancho mínimo determinado en píxeles independientes de la densidad. Por ejemplo, el tablet típico de 7" tiene un ancho mínimo de 600 dp, por lo que si quieres que la interfaz de usuario sea de panel dual en esta pantalla (y una única lista en pantallas más pequeñas), puedes utilizar los mismos dos diseños de la sección anterior para los diseños de panel único y de panel dual, solo que en lugar de utilizar el calificador de tamaño <code>large</code>, debes utilizar <code>sw600dp</code> para indicar que el diseño de panel dual se utiliza con las pantallas cuyo ancho mínimo sea de 600 dp:</p> + +<ul> + <li><code>res/layout/main.xml</code>, diseño de panel único (predeterminado): + +{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all} +</li> + <li><code>res/layout-sw600dp/main.xml</code>, diseño de panel dual: + +{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all} +</li> +</ul> + +<p>Esto significa que los dispositivos cuyo ancho mínimo sea igual o superior a 600 dp utilizarán el diseño <code>layout-sw600dp/main.xml</code> (panel dual), mientras que las pantallas más pequeñas utilizarán el diseño <code>layout/main.xml</code> (panel único).</p> + +<p>No obstante, esto no funcionará en los dispositivos anteriores a Android 3.2 porque no reconocen <code>sw600dp</code> como calificador de tamaño, por lo que también tendrás que seguir utilizando el calificador <code>large</code>. Por tanto, debes tener un archivo con el nombre <code>res/layout-large/main.xml</code> idéntico a <code>res/layout-sw600dp/main.xml</code>. En la siguiente sección, obtendrás información sobre una técnica que te permite evitar que se dupliquen los archivos de diseños.</p> + + +<h2 id="TaskUseAliasFilters">Cómo utilizar alias de diseño</h2> + +<p>El calificador de ancho mínimo solo está disponible en Android 3.2 o superior. Por tanto, tendrás que seguir utilizando los contenedores de tamaño abstractos (pequeño, normal, grande y extragrande) para que sean compatibles con versiones anteriores. Por ejemplo, si quieres que tu interfaz de usuario sea de panel único en teléfonos pero multipanel en tablets de 7", televisiones y otros dispositivos grandes, tendrás que utilizar los siguientes archivos:</p> + +<p><ul> +<li><code>res/layout/main.xml:</code> diseño de panel único,</li> +<li><code>res/layout-large:</code> diseño multipanel,</li> +<li><code>res/layout-sw600dp:</code> diseño multipanel.</li> +</ul></p> + +<p>Los dos últimos archivos son idénticos porque uno de ellos se utilizará con dispositivos Android 3.2 y el otro con tablets y televisiones que utilicen versiones anteriores de Android.</p> + +<p>Para evitar la duplicación del mismo archivo para tablets y televisiones (así como todos los problemas que esto conlleva), puedes utilizar archivos alias. Por ejemplo, puedes establecer los siguientes diseños:</p> + +<ul> +<li><code>res/layout/main.xml</code>: diseño de panel único,</li> +<li><code>res/layout/main_twopanes.xml</code>: diseño de panel dual.</li> +</ul> + +<p>Añade estos dos archivos:</p> + +<p><ul> +<li><code>res/values-large/layout.xml</code>: +<pre> +<resources> + <item name="main" type="layout">@layout/main_twopanes</item> +</resources> +</pre> +</li> + +<li><code>res/values-sw600dp/layout.xml</code>: +<pre> +<resources> + <item name="main" type="layout">@layout/main_twopanes</item> +</resources> +</pre> + +</li> +</ul></p> + +<p>Estos dos últimos archivos tienen el mismo contenido, pero en realidad no definen el diseño. Solo configuran <PH>{@code main}</PH> para que sea un alias de <PH>{@code main_twopanes}</PH>. Como los archivos tienen selectores <code>large</code> y <code>sw600dp</code>, se aplican a tablets y a televisiones independientemente de la versión de Android (las televisiones y los tablets anteriores a la versión 3.2 utilizarán +<PH>{@code large}</PH>y las televisiones y los tablets posteriores a la versión 3.2 utilizarán <code>sw600dp</code>).</p> + + +<h2 id="TaskUseOriQuali">Cómo utilizar calificadores de orientación</h2> + +<p>Aunque algunos diseños se pueden utilizar tanto en modo horizontal como vertical, la mayoría de ellos pueden beneficiarse de los ajustes. A continuación, se indica cómo se comporta el diseño según cada tamaño y orientación de la pantalla en la aplicación de ejemplo News Reader:</p> + +<p><ul> +<li><b>pantalla pequeña, vertical:</b> panel único con logotipo,</li> +<li><b>pantalla pequeña, horizontal:</b> panel único con logotipo,</li> +<li><b>tablet de 7", vertical:</b> panel único con barra de acciones,</li> +<li><b>tablet de 7", horizontal:</b> panel dual ancho con barra de acciones,</li> +<li><b>tablet de 10", vertical:</b> panel dual estrecho con barra de acciones,</li> +<li><b>tablet de 10", horizontal:</b> panel dual ancho con barra de acciones,</li> +<li><b>televisión, horizontal:</b> panel dual ancho con barra de acciones.</li> +</ul></p> + +<p>Cada uno de estos diseños se establecen en un archivo XML en el directorio <code>res/layout/</code>. Para definir posteriormente las diferentes configuraciones de pantalla, la aplicación utiliza alias de diseño para asignarlos a cada configuración:</p> + +<p><code>res/layout/onepane.xml:</code></p> +{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all} + +<p><code>res/layout/onepane_with_bar.xml:</code></p> +{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all} + +<p><code>res/layout/twopanes.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all} + +<p><code>res/layout/twopanes_narrow.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes_narrow.xml all} + +<p>Una vez que se hayan definido todos los diseños posibles, solo se debe asignar el diseño adecuado a cada configuración a través de calificadores de configuración. Ahora ya puedes utilizar la técnica de los alias de diseño:</p> + +<p><code>res/values/layouts.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/values/layouts.xml all} + +<p><code>res/values-sw600dp-land/layouts.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-land/layouts.xml +all} + +<p><code>res/values-sw600dp-port/layouts.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-port/layouts.xml +all} + +<p><code>res/values-large-land/layouts.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/values-large-land/layouts.xml all} + +<p><code>res/values-large-port/layouts.xml</code>:</p> +{@sample development/samples/training/multiscreen/newsreader/res/values-large-port/layouts.xml all} + + + +<h2 id="TaskUse9Patch">Cómo utilizar mapas de bits de la clase NinePatch</h2> + +<p>Admitir diferentes tamaños de pantalla normalmente implica que las fuentes de imagen también deben poder adaptarse a varios tamaños. Por ejemplo, un fondo de botón debe adaptarse a cualquier forma de botón a la que se aplique.</p> + +<p>Si utilizas imágenes sencillas en componentes que pueden cambiar de tamaño, observarás rápidamente que los resultados no es que sean precisamente impresionantes, ya que las imágenes se estirarán o estrecharán. La solución es utilizar mapas de bits de la clase NinePatch, que son archivos PNG con un formato especial que indican las áreas que se pueden y no se pueden estirar.</p> + +<p>Por tanto, al diseñar mapas de bits que se vayan a utilizar en componentes con tamaño variable, utiliza siempre mapas de bits de la clase NinePatch. Para convertir un mapa de bits en uno de la clase NinePatch, puedes empezar con una imagen normal (consulta la figura 4, que se ha ampliado cuatro veces para obtener una mayor claridad).</p> + +<img src="{@docRoot}images/training/button.png" /> +<p class="img-caption"><strong>Figura 4.</strong> <code>button.png</code></p> + +<p>A continuación, puedes pasar a la utilidad <ode +href="{@docRoot}tools/help/draw9patch.html"><code>draw9patch</code></a> del SDK (que se localiza en el directorio <code>tools/</code>) en la que puedes marcar las áreas que se deben estirar dibujando píxeles a lo largo de los bordes superior e izquierdo. También puedes marcar el área que debe incluir el contenido dibujando píxeles a lo largo de los bordes inferior y derecho, como se muestra en la figura 5.</p> + +<img src="{@docRoot}images/training/button_with_marks.png" /> +<p class="img-caption"><strong>Figura 5.</strong> <code>button.9.png</code></p> + +<p>Observa los píxeles de color negro situados junto a los bordes. Los que aparecen en los bordes superior e izquierdo indican los lugares en los que se puede estirar la imagen, mientras que los que aparecen en los bordes inferior y derecho indican dónde se debe situar el contenido.</p> + +<p>Además, observa la extensión <code>.9.png</code>. Debes utilizar esta extensión, ya que, de este modo, el marco detecta que se trata de una imagen de la clase NinePatch, en lugar de una imagen PNG normal.</p> + +<p>Cuando aplicas este fondo a un componente (definiendo <code>android:background="@drawable/button"</code>), el marco estira la imagen de forma adecuada para adaptarla al botón, como se muestra en varios tamaños de la figura 6.</p> + +<img src="{@docRoot}images/training/buttons_stretched.png" /> +<p class="img-caption"><strong>Figura 6.</strong> Botón que utiliza la clase NinePatch <code>button.9.png</code> en varios tamaños</p> + |