Diseño responsivo/adaptable con vistas

Los diseños responsivos o adaptables proporcionan una experiencia del usuario optimizada independientemente de el tamaño de la pantalla. Implementa diseños responsivos o adaptables para permitir que tus app basada en vistas para admitir todos los tamaños de visualización, las orientaciones y configuraciones, incluidas aquellas que pueden cambiar de tamaño, por ejemplo, multiventana automático.

Diseño responsivo

El primer paso para admitir una variedad de factores de forma de dispositivos es crear un que responda a las variaciones en la cantidad de espacio de visualización disponible a tu app.

ConstraintLayout

La mejor manera de crear un diseño adaptable es usar ConstraintLayout como el diseño base para tu IU. ConstraintLayout te permite especificar la posición y tamaño de cada vista de acuerdo con las relaciones espaciales con otras en el diseño. Todas las vistas pueden moverse y cambiar de tamaño a la vez como los cambios en el espacio de visualización.

La forma más fácil de compilar un diseño con ConstraintLayout es usar el editor de diseño de Android Studio, El editor de diseño te permite arrastrar nuevas vistas a la aplicar restricciones relativas a las vistas superiores y del mismo nivel, y establecer la vista sin la necesidad de editar ningún archivo XML manualmente.

Para obtener más información, consulta Cómo crear una IU responsiva con ConstraintLayout.

Ancho y altura responsivos

Para asegurarte de que tu diseño sea responsivo en diferentes tamaños de visualización, usa wrap_content, match_parent o 0dp (match constraint) para el ancho y la altura de los componentes de la vista en lugar de valores hard-coded:

• wrap_content: La vista establece su tamaño para que se adapte al contenido que incluye.
• match_parent: La vista se expande lo más posible dentro de la vista superior.
• 0dp (match constraint): En un ConstraintLayout, similar a match_parent La vista ocupa todo el espacio disponible restricciones.

Por ejemplo:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

En la Figura 4, se muestra cómo se ajustan el ancho y la altura de TextView como pantalla cambia de ancho con la orientación del dispositivo.

TextView establece su ancho para llenar todo el espacio disponible (match_parent). su altura exactamente al mismo espacio que se requiere por la altura de la superficie texto (wrap_content), lo que permite que la vista se adapte a diferentes pantallas dimensiones y diferentes cantidades de texto.

Si usas un LinearLayout, también puede expandir las vistas secundarias según el diseño weight para que las vistas se rellenen de forma proporcional el espacio disponible. Sin embargo, usar ponderaciones en un LinearLayout anidado requiere que el sistema realice varios pases de diseño para determinar el tamaño de cada uno lo que ralentiza el rendimiento de la IU.

ConstraintLayout puede crear casi todos los diseños posibles con LinearLayout sin afectar el rendimiento, por lo que debes convertir tus recursos anidados LinearLayout a ConstraintLayout Luego, puede definir diseños ponderados con restricciones cadenas.

Diseño adaptable

El diseño de tu app siempre debe ser responsivo en diferentes tamaños de visualización. Sin embargo, incluso un diseño adaptable no puede proporcionar la mejor experiencia del usuario en en todos los dispositivos o en el modo multiventana. Por ejemplo, la IU que diseñado para un teléfono, probablemente no brinde una experiencia del usuario óptima en un tablet. El diseño adaptable ofrece diseños alternativos optimizados para diferentes y las dimensiones de visualización.

SlidingPaneLayout para IUs de lista-detalles

Por lo general, una IU de lista-detalles proporciona una experiencia del usuario diferente en pantallas de diferentes tamaños. En pantallas grandes, los paneles de lista y de detalles están por lo general, una al lado de la otra. Cuando se selecciona un elemento de la lista, la información del elemento que se muestra en el panel de detalles sin cambiar la IU; los dos paneles permanecen en paralelo. Sin embargo, en pantallas pequeñas, los dos paneles se muestran por separado, cada panel que ocupa toda el área de visualización. Cuando un elemento del panel de lista seleccionado, el panel de detalles (que contiene la información del elemento seleccionado) reemplaza el panel de lista. La navegación hacia atrás reemplaza al panel de detalles por la lista.

SlidingPaneLayout administra la lógica para determinar cuál de las dos experiencias del usuario es apropiado para el tamaño actual de la ventana:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    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"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Los atributos layout_width y layout_weight de las dos vistas que se incluyen en SlidingPaneLayout determinan el comportamiento de SlidingPaneLayout. En el ejemplo, si la ventana es lo suficientemente grande (al menos 580 dp de ancho) para mostrar ambas vistas, la paneles se muestran uno al lado del otro. Pero, si el ancho de la ventana es menor que 580 dp, los paneles se deslizan uno sobre otro para ocupar toda la app de forma individual en la ventana modal.

Si el ancho de la ventana es mayor que el ancho mínimo total especificado (580 dp), Los valores layout_weight se pueden usar para ajustar el tamaño de los dos paneles de forma proporcional. En la Por ejemplo, el panel de lista siempre es de 280 dp de ancho porque no tiene un grosor. Sin embargo, el panel de detalles siempre llena cualquier espacio horizontal que supere los 580 dp porque del parámetro de configuración layout_weight de la vista.

Recursos de diseño alternativos

Para adaptar el diseño de tu IU a una gran variedad de tamaños de pantalla, usa diseños alternativos. identificados por resource calificadores.

Puedes proporcionar diseños adaptables y específicos para cada pantalla creando Directorios res/layout/ en el código fuente de la app. Crea un directorio para cada configuración de pantalla que requiera un diseño diferente. Luego, agrega una pantalla de configuración de Terraform al nombre del directorio layout (por ejemplo, layout-w600dp para pantallas que tienen 600 dp de ancho disponible.

Los calificadores de configuración representan el espacio de visualización visible disponible para la IU de tu app. El sistema tiene en cuenta cualquier decoración (por ejemplo, el la barra de navegación) ni los cambios en la configuración de las ventanas (como las funciones multiventana ) cuando selecciones el diseño para tu app.

Para crear diseños alternativos en Android Studio, consulta Cómo usar variantes de diseño para optimizar para diferentes pantallas en Desarrolla una IU con objetos View.

Calificador de ancho mínimo

El calificador de tamaño de pantalla de ancho mínimo te permite ofrecer una diseños para pantallas que tienen un ancho mínimo medido en según la densidad píxeles (dp).

Al describir el tamaño de la pantalla como una medida de dp, Android te permite crear diseñados para dimensiones de pantalla específicas sin tener en cuenta diferentes densidades de píxeles.

Por ejemplo, puedes crear un diseño llamado main_activity que esté optimizado para teléfonos y tablets creando diferentes versiones del archivo en distintas directorios:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

El calificador de ancho mínimo especifica el lado más pequeño de la pantalla. independientemente de la orientación actual del dispositivo, por lo que es una manera de especificar el tamaño general de la pantalla disponible para tu diseño.

A continuación, se muestra cómo los valores de ancho mínimo se corresponden con los tamaños de pantalla típicos:

• 320 dp: pantalla pequeña de teléfono (240 x 320 ldpi, 320 x 480 mdpi, 480 x 800 hdpi, etcétera)
• 480 dp: una pantalla de teléfono grande de ~5" (480 x 800 mdpi)
• 600 dp: 7" Tablet (600 x 1024 mdpi)
• 720 dp: 10" Tablet (720 x 1280 mdpi, 800 x 1280 mdpi, etc.)

En la siguiente figura, se proporciona una vista más detallada de la manera en que las diferentes dp de pantalla los anchos se corresponden con diferentes tamaños y orientaciones de pantalla.

Los valores para el calificador de ancho mínimo son en dp, ya que lo que importa es el cantidad de espacio de visualización disponible después de que el sistema contabiliza la densidad de píxeles (no la resolución de píxeles sin procesar).

Los tamaños que se especifican con calificadores de recursos, como el ancho mínimo, se no a los tamaños de pantalla reales. Más bien, los tamaños especifican el ancho o la altura en unidades dp disponibles para la ventana de tu app El sistema Android podría usar parte de la pantalla para la IU del sistema (como la barra del sistema en la parte inferior de la pantalla o la barra de estado en la parte superior), por lo que es posible que parte de la pantalla no disponible para tu diseño. Si tu app se usa en el modo multiventana, la La app solo tiene acceso al tamaño de la ventana que la contiene. Cuando cambia el tamaño de la ventana, se activa una configuración cambian por el nuevo tamaño de ventana, que permite que el sistema seleccione un archivo de diseño apropiado. Entonces, el recurso los tamaños de calificadores que declares deben especificar solo el espacio que tu aplicación necesita. El sistema considera cualquier espacio utilizado por la IU del sistema al proporcionar espacio para tu diseño.

Calificador de ancho disponible

En lugar de cambiar el diseño en función del ancho mínimo de la pantalla, es posible que quieras cambiar tu diseño según el ancho o la altura disponibles. Por ejemplo, tal vez quieras usar un diseño de doble panel siempre que la pantalla proporciona un ancho mínimo de 600 dp, que puede cambiar en función de que el dispositivo esté en orientación horizontal o vertical. En ese caso, debes usar el ancho disponible de la siguiente manera:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

Si la altura disponible es una preocupación para tu app, puedes usar el alto disponible. Por ejemplo, layout-h600dp para pantallas con y tener, al menos, 600 dp de alto de pantalla.

Calificadores de orientación

Si bien puedes admitir todas las variaciones de tamaño usando solo de los calificadores de ancho mínimo y ancho disponible, puedes También quieren cambiar la experiencia del usuario cuando cambian entre el modo vertical y horizontal.

Para eso, puedes agregar los calificadores port o land a tu directorio de diseño. y nombres de usuario. Solo asegúrate de que los calificadores de orientación aparezcan después de los calificadores de tamaño. Por ejemplo:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

Para obtener más información sobre todos los calificadores de configuración de la pantalla, consulta Aplicación descripción general de los recursos.

Clases de tamaño de ventana

Las clases de tamaño de ventana son puntos de interrupción de viewports que te ayudan a crear y diseños. Los puntos de interrupción identifican el área de visualización disponible para tu app como compacta, mediana o expandida. El ancho y la altura se especifican por separado, por lo que tu app siempre tiene una clase de tamaño de ventana para el ancho y una clase de tamaño de ventana altura.

Para aplicar diseños adaptables de manera programática, haz lo siguiente:

• Cómo crear recursos de diseño basados en los puntos de interrupción de la clase de tamaño de ventana
• Calcula las clases de tamaño de ventana de ancho y alto de tu app con la WindowSizeClass#compute() de Jetpack WindowManager biblioteca
• Cómo aumentar el recurso de diseño para las clases de tamaño de ventana actuales

Para obtener más información, consulta Tamaño de la ventana. clases.

Componentes de la IU modularizados con fragmentos

Cuando diseñes tu app para varios tamaños de visualización, usa fragmentos a fin de extraer la lógica de tu IU en componentes separados para asegurarte de que no duplicando el comportamiento de la IU en actividades. Luego, puedes combinar fragmentos crear diseños de varios paneles en pantallas grandes o puedes colocar fragmentos en separar actividades en pantallas pequeñas.

Por ejemplo, el patrón lista-detalles (consulta SlidingPaneLayout) se podrían implementar con un fragmento que contiene la lista y otro que contiene el elemento de la lista más detalles. En pantallas grandes, los fragmentos podrían mostrarse uno al lado del otro; activado pantallas pequeñas, individualmente, en toda la pantalla.

Para obtener más información, consulta la descripción general de Fragments.

Incorporación de actividades

Si tu app consta de varias actividades, su incorporación te permitirá crear fácilmente una IU adaptable.

La incorporación de actividades muestra varias actividades o varias instancias de la misma actividad simultáneamente en la ventana de tareas de una aplicación. En pantallas grandes, las actividades se pueden mostrar una al lado de la otra; en pantallas pequeñas, apiladas una encima de la otra.

Para determinar la manera en que tu app muestra sus actividades, debes crear un archivo XML de configuración de Terraform que el sistema usa para determinar la la presentación en función del tamaño de visualización. Como alternativa, puedes hacer que Jetpack API de WindowManager llamadas.

La incorporación de actividades admite cambios de orientación del dispositivo y dispositivos plegables, apilar y desapilar actividades a medida que el dispositivo rota o se pliega y se despliega

Para obtener más información, consulta Actividad la incorporación.

Tamaños de pantalla y relaciones de aspecto

Prueba tu app en una variedad de tamaños de pantalla y relaciones de aspecto para garantizar que tu IU escala correctamente.

Android 10 (nivel de API 29) y las versiones posteriores admiten una gran variedad de relaciones de aspecto. Los factores de forma plegables pueden variar desde pantallas altas y angostas, como la proporción de 21:9 cuando plegado, a una relación de aspecto cuadrada de 1:1 cuando se despliega.

Para garantizar la compatibilidad con la mayor cantidad posible de dispositivos, prueba tus apps para la mayor cantidad posible muchas de las siguientes relaciones de aspecto de pantalla:

Si no tienes acceso a dispositivos de todos los tamaños de pantalla que quieras puedes usar Android Emulator para emular casi cualquier tamaño de pantalla.

Si prefieres hacer pruebas en un dispositivo real, pero no lo tienes, puedes usar Firebase Test Lab para acceder en un centro de datos de Google.

Recursos adicionales

• Material Design: información sobre el diseño