training/multiscreen/adaptui.jd

page.title=Cmo implementar interfaces de usuario adaptables
parent.title=Cmo disear aplicaciones para varias pantallas
parent.link=index.html

trainingnavtop=true
previous.title=Cmo 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 seccin puedes aprender:</h2>

<ol>
  <li><a href="#TaskDetermineCurLayout">Cmo determinar el diseo actual</a></li>
  <li><a href="#TaskReactToLayout">Cmo reaccionar en funcin del diseo actual</a></li>
  <li><a href="#TaskReuseFrag">Cmo volver a utilizar fragmentos en otras actividades</a></li>
  <li><a href="#TaskHandleConfigChanges">Cmo gestionar los cambios en la configuracin de la pantalla</a></li>
</ol>

<h2>Tambin puedes consultar:</h2>

<ul>
  <li><a href="{@docRoot}guide/practices/tablets-and-handsets.html">Cmo admitir tablets y dispositivos mviles</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 funcin del diseo actual de tu aplicacin, la interfaz puede variar. Por ejemplo, si tu aplicacin 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 debera aparecer por s mismo (en otra actividad).</p>


<h2 id="TaskDetermineCurLayout">Cmo determinar el diseo actual</h2>

<p>Dado que la implementacin de cada diseo variar en cierta medida, probablemente una de las primeras cosas que tendrs que hacer ser determinar el diseo 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;

    &#64;Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        View articleView = findViewById(R.id.article);
        mIsDualPane = articleView != null &amp;&amp;
                        articleView.getVisibility() == View.VISIBLE;
    }
}
</pre>

<p>Ten en cuenta que este cdigo consulta la disponibilidad del panel del "artculo", lo que es mucho ms flexible que incluir una consulta para un diseo determinado.</p>

<p>Otro ejemplo de cmo puedes adaptar la existencia de diferentes componentes es comprobar su disponibilidad antes de realizar una operacin relacionada con los mismos. Por ejemplo, en la aplicacin de ejemplo News Reader, hay un botn que abre un men, pero ese botn 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 aadir el detector de eventos para este botn, 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">Cmo reaccionar en funcin del diseo actual</h2>

<p>El resultado de algunas acciones puede variar en funcin del diseo actual. Por ejemplo, en el ejemplo de News Reader, al hacer clic en un encabezado de la lista se abrir el artculo 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>
&#64;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 aplicacin est en modo de panel dual, debe configurar la barra de accin con pestaas para la navegacin, mientras que si la aplicacin est en modo de panel nico, debe configurar la navegacin con un widget giratorio. Por tanto, el cdigo debe comprobar tambin cul 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 &lt; 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">Cmo volver a utilizar fragmentos en otras actividades</h2>

<p>Un patrn recurrente a la hora de disear 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 artculo de noticias se presenta en el panel de la derecha en las pantallas grandes, pero es una actividad independiente en las pantallas ms pequeas.</p>

<p>En otros casos similares, puedes evitar la duplicacin de cdigo reutilizando la misma <PH>{@link android.app.Fragment}</PH> en distintas actividades. Por ejemplo, <code>ArticleFragment</code> se utiliza en el diseo de panel dual:</p>

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

<p>A continuacin, se vuelve a utilizar (sin diseo) en el diseo de actividad para pantallas ms pequeas (<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 diseo XML. Sin embargo, en este caso, un diseo XML sera un trabajo innecesario porque el fragmento del artculo es el nico componente de esta actividad.</p>

<p>Un punto muy importante que debes tener en cuenta al disear 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 continuacin, la actividad principal implementa esa interfaz:</p>

<p>Por ejemplo, ese es precisamente el objetivo del <code>HeadlinesFragment</code> de la aplicacin 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 continuacin, cuando el usuario selecciona un encabezado, el fragmento notifica el detector especificado por la actividad principal (en lugar de notificar una actividad predefinida especfica):</p>

<pre>
public class HeadlinesFragment extends ListFragment {
    ...
    &#64;Override
    public void onItemClick(AdapterView&lt;?&gt; parent,
                            View view, int position, long id) {
        if (null != mHeadlineSelectedListener) {
            mHeadlineSelectedListener.onHeadlineSelected(position);
        }
    }
    ...
}
</pre>

<p>Si quieres obtener ms informacin sobre esta tcnica, puedes consultar la gua sobre <a
href="{@docRoot}guide/practices/tablets-and-handsets.html">Cmo admitir tablets y dispositivos mviles</a>.</p>


<h2 id="TaskHandleConfigChanges">Cmo gestionar los cambios en la configuracin 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 configuracin (como un cambio de rotacin) para mantener la homogeneidad de tu interfaz.</p>

<p>Por ejemplo, en un tablet de 7" que utilice Android 3.0 o una versin superior, el ejemplo de News Reader utiliza una actividad independiente para mostrar el artculo de noticias en el modo vertical, pero utiliza el diseo de panel dual en el modo horizontal.</p>

<p>Esto significa que cuando el usuario utiliza el modo vertical y est consultando un artculo, tienes que detectar que la orientacin ha cambiado al modo horizontal y reaccionar de forma adecuada finalizando la actividad. A continuacin, debes volver a la actividad principal para que el contenido pueda mostrarse en el diseo de panel dual:</p>

<pre>
public class ArticleActivity extends FragmentActivity {
    int mCatIndex, mArtIndex;

    &#64;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>