Desarrollo Móvil

El diseño Multiscreen en Android , consiste en diseñar una aplicación que se adapte tanto a dispositivos de mano (handset) como a tablets . Entre otras ventajas, las aplicaciones que diseña esta adaptación, permiten mejorar la experiencia de usuario, ya que optimizan el diseño de las interfaces en función del dispositivo empleado para ejecutar la aplicación.

Veamos cómo implementarlo en Android:

1. Comenzamos creando un nuevo proyecto y seleccionando como Activity Principal, de la galería que nos muestra Android Studio, Master/Detail Flow .
   
   
2. En la siguiente pantalla del asistente, hay que tener en cuenta que Android Studio nos pregunta por algunos parámetros que le guiarán en la generación del código fuente que implementará esta funcionalidad. Android Studio creará una clase estática con objetos de prueba que serán utilizados para el menú lateral en el que se mostrará un listado de elementos (ListView). Podemos seleccionar el nombre que queremos darle a esos elementos (por defecto Items).
   
   
3. A continuación analizamos el código que ha generado Android Studio.

En el Activity, ItemListActivity , nos encontramos con un layout > activity_item_list.xml . Dentro de este layout, nos encontramos con que existe un componente FrameLayout que contiene la siguiente línea que incluye a su vez otro layout:

<include layout="@layout/item_list" />

Pues bien, si intentamos acceder con la tecla Ctrl + Click a ese fichero, nos encontramos con que en realidad existen 2 ficheros con el mismo nombre.

La diferencia entre ambos es que Android en tiempo de ejecución decido cuál de los 2 debe cargar , basándose en un parámetro que haya sido definido. En este caso el parámetro es la anchura de la pantalla. Si la anchura de la pantalla es menor de 900dp, se cargará el layout item_list.xml cuyo contenidos es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/item_list"
    android:name="com.miguelcr.gridview.ItemListFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    app:layoutManager="LinearLayoutManager"
    tools:context="com.miguelcr.gridview.ItemListActivity"
    tools:listitem="@layout/item_list_content" />

Si por el contrario, la anchura de la pantalla del dispositivo es mayor o igual que 900dp, el layout que se carga será el fichero item_list.xml cuyo contenido es el siguiente:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:baselineAligned="false"
    android:divider="?android:attr/dividerHorizontal"
    android:orientation="horizontal"
    android:showDividers="middle"
    tools:context="com.miguelcr.gridview.ItemListActivity">

    <!--
    This layout is a two-pane layout for the Items
    master/detail flow.
    
    -->

    <android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/item_list"
        android:name="com.miguelcr.gridview.ItemListFragment"
        android:layout_width="@dimen/item_width"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        app:layoutManager="LinearLayoutManager"
        tools:context="com.miguelcr.gridview.ItemListActivity"
        tools:listitem="@layout/item_list_content" />

    <FrameLayout
        android:id="@+id/item_detail_container"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>

Como podemos apreciar en este segundo caso, se trataría de una tablet y por tanto, en una misma pantalla muestra el Menú lateral y la vista detalle del elemento seleccionado de la lista del menú lateral.

De esta ingeniosa manera se cargan layouts diferentes en tiempo de ejecución en función de si es una tablet o un handset.

Pero y ¿cómo sabes desde el Activity en cuál de los 2 casos nos encontramos? El código generado por Android Studio nos da la respuesta. Si intentamos obtener una referencia al elemento de la interfaz que se muestra para las tablets FrameLayout , cuyo id es item_detail_container , y la referencia no es nula, querrá decir que la aplicación se está ejecutando en una tablet, en otro caso, será un handset .

Las líneas de código para hacer esa comprobación son las siguientes:

if (findViewById(R.id.item_detail_container) != null) {
    // The detail container view will be present only in the
    // large-screen layouts (res/values-w900dp).
    // If this view is present, then the
    // activity should be in two-pane mode.
    mTwoPane = true;
}

Hasta aquí la explicación de cómo detectar y adaptar en tiempo de ejecución el diseño multiscreen en aplicaciones Android.