training/multiscreen/screensizes.jd

page.title=Cmo admitir varios tamaos de pantalla
parent.title=Cmo disear aplicaciones para varias pantallas
parent.link=index.html

trainingnavtop=true
next.title=Cmo 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 seccin puedes aprender:</h2>
<ol>
  <li><a href="#TaskUseWrapMatchPar">Cmo utilizar los valores "wrap_content" y "match_parent"</a></li>
  <li><a href="#TaskUseRelativeLayout">Cmo utilizar RelativeLayout</a></li>
  <li><a href="#TaskUseSizeQuali">Cmo utilizar calificadores de tamao</a></li>
  <li><a href="#TaskUseSWQuali">Cmo utilizar el calificador de ancho ms pequeo</a></li>
  <li><a href="#TaskUseAliasFilters">Cmo utilizar alias de diseo</a></li>
  <li><a href="#TaskUseOriQuali">Cmo utilizar calificadores de orientacin</a></li>
  <li><a href="#TaskUse9Patch">Cmo utilizar mapas de bits de la clase NinePatch</a></li>
</ol>

<h2>Tambin puedes consultar:</h2>

<ul>
  <li><a href="{@docRoot}guide/practices/screens_support.html">Cmo admitir varias pantallas</a></li>
</ul>

<h2>Prubalo!</h2>

<div class="download-box">
<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">Descargar la aplicacin de ejemplo</a>
<p class="filename">NewsReader.zip</p>
</div>

</div>
</div>

<p>En esta seccin se explica cmo admitir varios tamaos de pantalla. Para ello, sigue estos pasos:</p>
<ul>
  <li>Asegrate de que el diseo se haya ajustado correctamente al tamao de la pantalla.</li>
  <li>Configura la pantalla con el diseo de interfaz adecuado.</li>
  <li>Asegrate de aplicar el diseo adecuado a la pantalla correspondiente.</li>
  <li>Utiliza el mapa de bits con la escala adecuada.</li>
</ul>


<h2 id="TaskUseWrapMatchPar">Cmo utilizar los valores "wrap_content" y "match_parent"</h2>

<p>Para garantizar que el diseo es flexible y que se adapta a varios tamaos 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 tamao mnimo necesario para adaptar el contenido a esta vista, mientras que <code>"match_parent"</code> (tambin conocido como <code>"fill_parent"</code> antes del nivel 8 del API) provoca que el componente se ample hasta coincidir con el tamao de la vista principal.</p>

<p>Al utilizar los valores de tamao <code>"wrap_content"</code> y <code>"match_parent"</code> en lugar de los tamaos 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 cmo se utilizan en el ejemplo los valores <code>"wrap_content"</code> y <code>"match_parent"</code> para los tamaos de los componentes en lugar de dimensiones especficas. Esto permite que el diseo se adapte correctamente a diferentes tamaos y orientaciones de la pantalla.</p>

<p>Por ejemplo, esta es la apariencia del diseo en modo horizontal y vertical. Ten en cuenta que los tamaos de los componentes se adaptan automticamente a la altura y al ancho:</p>

<img src="{@docRoot}images/training/layout-hvga.png" />
<p class="img-caption"><strong>Figura 1.</strong> La aplicacin de ejemplo News Reader en modo vertical (izquierda) y horizontal (derecha)</p>


<h2 id="TaskUseRelativeLayout">Cmo utilizar RelativeLayout</h2>

<p>Puedes crear diseos de un cierto nivel de complejidad con instancias anidadas de <PH>{@link android.widget.LinearLayout}</PH> y combinaciones de los valores de tamao <code>"wrap_content"</code> y <code>"match_parent"</code>. Sin embargo, <PH>{@link android.widget.LinearLayout}</PH> no te permite controlar con precisin 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 lnea recta, a menudo la mejor solucin es utilizar <PH>{@link android.widget.RelativeLayout}</PH>que te permite especificar el diseo segn 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>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"&gt;
    &lt;TextView
        android:id="&#64;+id/label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Type here:"/&gt;
    &lt;EditText
        android:id="&#64;+id/entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="&#64;id/label"/&gt;
    &lt;Button
        android:id="&#64;+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="&#64;id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:text="OK" /&gt;
    &lt;Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="&#64;id/ok"
        android:layout_alignTop="&#64;id/ok"
        android:text="Cancel" /&gt;
&lt;/RelativeLayout&gt;
</pre>

<p>La figura 2 indica cmo se muestra este diseo 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 pequea)</p>

<p>La figura 3 indica cmo se muestra este diseo en una pantalla ms 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 tamao de los componentes es diferente, las relaciones espaciales se mantienen segn se ha especificado con <PH>{@link android.widget.RelativeLayout.LayoutParams}</PH>.</p>


<h2 id="TaskUseSizeQuali">Cmo utilizar calificadores de tamao</h2>

<p>Hay mucha diferencia entre un diseo flexible y un diseo relativo como el que se ha utilizado en las secciones anteriores. Aunque ambos diseos 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 tamao de pantalla. Por tanto, tu aplicacin no solo debe implementar los diseos flexibles, sino que tambin debe ofrecer varios diseos alternativos para diferentes configuraciones de pantalla. Para ello, se utilizan <a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers">calificadores de configuracin</a>, que permiten que el tiempo de ejecucin seleccione el recurso adecuado en funcin de la configuracin actual del dispositivo (por ejemplo, un diseo diferente para diferentes tamaos de pantalla).</p>

<p>Por ejemplo, muchas aplicaciones implementan el patrn de "panel dual" para pantallas grandes (la aplicacin mostrara 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 simultneamente en la pantalla, las pantallas de los telfonos tienen que mostrarlos por separado. Para implementar estos diseos, puedes utilizar los siguientes archivos:</p>

<ul>
  <li><code>res/layout/main.xml</code>, diseo de panel nico (predeterminado):

{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
</li>
  <li><code>res/layout-large/main.xml</code>, diseo 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 diseo. Este diseo se seleccionar en dispositivos con pantallas clasificadas como grandes (por ejemplo, tablets de 7" y superiores). El otro diseo (sin calificadores) se seleccionar en el caso de dispositivos ms pequeos.</p>


<h2 id="TaskUseSWQuali">Cmo utilizar el calificador de ancho mnimo</h2>

<p>Una de las dificultades a las que se enfrentaron los desarrolladores con los dispositivos Android anteriores a la versin 3.2 fue el contenedor de tamao 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 diseos para diferentes dispositivos de esta categora (por ejemplo, para dispositivos de 5" y de 7"), aunque todos estos dispositivos se consideren de pantalla grande. Por esta razn, Android introdujo el calificador de "ancho mnimo" (entre otros) en Android 3.2.</p>

<p>Este calificador te permite mostrar contenido en pantallas que tengan un ancho mnimo determinado en pxeles independientes de la densidad. Por ejemplo, el tablet tpico de 7" tiene un ancho mnimo 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 ms pequeas), puedes utilizar los mismos dos diseos de la seccin anterior para los diseos de panel nico y de panel dual, solo que en lugar de utilizar el calificador de tamao <code>large</code>, debes utilizar <code>sw600dp</code> para indicar que el diseo de panel dual se utiliza con las pantallas cuyo ancho mnimo sea de 600 dp:</p>

<ul>
  <li><code>res/layout/main.xml</code>, diseo de panel nico (predeterminado):

{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
</li>
  <li><code>res/layout-sw600dp/main.xml</code>, diseo de panel dual:

{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
</li>
</ul>

<p>Esto significa que los dispositivos cuyo ancho mnimo sea igual o superior a 600 dp utilizarn el diseo <code>layout-sw600dp/main.xml</code> (panel dual), mientras que las pantallas ms pequeas utilizarn el diseo <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 tamao, por lo que tambin tendrs que seguir utilizando el calificador <code>large</code>. Por tanto, debes tener un archivo con el nombre <code>res/layout-large/main.xml</code> idntico a <code>res/layout-sw600dp/main.xml</code>. En la siguiente seccin, obtendrs informacin sobre una tcnica que te permite evitar que se dupliquen los archivos de diseos.</p>


<h2 id="TaskUseAliasFilters">Cmo utilizar alias de diseo</h2>

<p>El calificador de ancho mnimo solo est disponible en Android 3.2 o superior. Por tanto, tendrs que seguir utilizando los contenedores de tamao abstractos (pequeo, 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 telfonos pero multipanel en tablets de 7", televisiones y otros dispositivos grandes, tendrs que utilizar los siguientes archivos:</p>

<p><ul>
<li><code>res/layout/main.xml:</code> diseo de panel nico,</li>
<li><code>res/layout-large:</code> diseo multipanel,</li>
<li><code>res/layout-sw600dp:</code> diseo multipanel.</li>
</ul></p>

<p>Los dos ltimos archivos son idnticos 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 duplicacin 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 diseos:</p>

<ul>
<li><code>res/layout/main.xml</code>: diseo de panel nico,</li>
<li><code>res/layout/main_twopanes.xml</code>: diseo de panel dual.</li>
</ul>

<p>Aade estos dos archivos:</p>

<p><ul>
<li><code>res/values-large/layout.xml</code>:
<pre>
&lt;resources>
    &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
&lt;/resources>
</pre>
</li>

<li><code>res/values-sw600dp/layout.xml</code>:
<pre>
&lt;resources>
    &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
&lt;/resources>
</pre>

</li>
</ul></p>

<p>Estos dos ltimos archivos tienen el mismo contenido, pero en realidad no definen el diseo. 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 versin de Android (las televisiones y los tablets anteriores a la versin 3.2 utilizarn
<PH>{@code large}</PH>y las televisiones y los tablets posteriores a la versin 3.2 utilizarn <code>sw600dp</code>).</p>


<h2 id="TaskUseOriQuali">Cmo utilizar calificadores de orientacin</h2>

<p>Aunque algunos diseos se pueden utilizar tanto en modo horizontal como vertical, la mayora de ellos pueden beneficiarse de los ajustes. A continuacin, se indica cmo se comporta el diseo segn cada tamao y orientacin de la pantalla en la aplicacin de ejemplo News Reader:</p>

<p><ul>
<li><b>pantalla pequea, vertical:</b> panel nico con logotipo,</li>
<li><b>pantalla pequea, 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>televisin, horizontal:</b> panel dual ancho con barra de acciones.</li>
</ul></p>

<p>Cada uno de estos diseos se establecen en un archivo XML en el directorio <code>res/layout/</code>. Para definir posteriormente las diferentes configuraciones de pantalla, la aplicacin utiliza alias de diseo para asignarlos a cada configuracin:</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 diseos posibles, solo se debe asignar el diseo adecuado a cada configuracin a travs de calificadores de configuracin. Ahora ya puedes utilizar la tcnica de los alias de diseo:</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">Cmo utilizar mapas de bits de la clase NinePatch</h2>

<p>Admitir diferentes tamaos de pantalla normalmente implica que las fuentes de imagen tambin deben poder adaptarse a varios tamaos. Por ejemplo, un fondo de botn debe adaptarse a cualquier forma de botn a la que se aplique.</p>

<p>Si utilizas imgenes sencillas en componentes que pueden cambiar de tamao, observars rpidamente que los resultados no es que sean precisamente impresionantes, ya que las imgenes se estirarn o estrecharn. La solucin 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 disear mapas de bits que se vayan a utilizar en componentes con tamao 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 continuacin, 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 pxeles a lo largo de los bordes superior e izquierdo. Tambin puedes marcar el rea que debe incluir el contenido dibujando pxeles 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 pxeles 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 dnde se debe situar el contenido.</p>

<p>Adems, observa la extensin <code>.9.png</code>. Debes utilizar esta extensin, 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="&#64;drawable/button"</code>), el marco estira la imagen de forma adecuada para adaptarla al botn, como se muestra en varios tamaos de la figura 6.</p>

<img src="{@docRoot}images/training/buttons_stretched.png" />
<p class="img-caption"><strong>Figura 6.</strong> Botn que utiliza la clase NinePatch <code>button.9.png</code> en varios tamaos</p>