Los diseños canónicos son diseños versátiles y comprobados que proporcionan una experiencia del usuario óptima en una variedad de factores de forma.
Los diseños canónicos son compatibles con teléfonos de pantalla pequeña, así como con tablets, plegables y dispositivos ChromeOS. Derivados de la guía de Material Design, los diseños son estéticos y funcionales.
El framework de Android incluye componentes especializados que hacen que la implementación de los diseños sea sencilla y confiable.
Los diseños canónicos crean IUs atractivas y que mejoran la productividad, lo que constituye la base de apps excelentes.
Si ya conoces los diseños canónicos de apps adaptables, pero no sabes qué APIs de Android usar, consulta la sección Aplicabilidad para obtener ayuda y determinar cuál es el diseño correcto para los casos de uso de tu app.
Detalles de lista
El diseño de lista-detalles permite a los usuarios explorar listas de elementos que tienen información descriptiva, explicativa o de otro tipo: los detalles del elemento.
El diseño divide la ventana de la app en dos paneles paralelos: uno para la lista y otro para los detalles. Los usuarios seleccionan elementos de la lista para ver sus detalles. Los vínculos directos en los detalles muestran contenido adicional en el panel de detalles.
Las pantallas de ancho expandido (consulta Cómo usar clases de tamaño de ventana) se adaptan a la lista y los detalles al mismo tiempo. La selección de un elemento de lista actualiza el panel de detalles para mostrar el contenido relacionado del elemento seleccionado.
Las pantallas de ancho mediano y compacto muestran la lista o los detalles, según la interacción del usuario con la app. Cuando solo se ve la lista, la selección de un elemento muestra los detalles en lugar de la lista. Cuando solo se vean los detalles, se volverá a mostrar la lista si se presiona el botón Atrás.
Los cambios de configuración, como la orientación del dispositivo o el tamaño de la ventana de la app, pueden modificar la clase de tamaño de la ventana de la pantalla. Un diseño de lista-detalles responde en consecuencia y mantiene el estado de la app de la siguiente manera:
- Si una pantalla de ancho expandido que muestra los paneles de lista y de detalles se reduce a tamaño mediano o compacto, el panel de detalles permanece visible y el panel de lista se oculta.
- Si una pantalla de ancho mediano o compacto tiene solo el panel de detalles visible y la clase de tamaño de ventana se expande, la lista y los detalles se muestran juntos, y la lista indica que el elemento correspondiente al contenido en el panel de detalles está seleccionado.
- Si una pantalla de ancho mediano o compacto tiene solo el panel de lista visible y se expande, se mostrarán juntos la lista y un panel de detalles de marcador de posición.
El diseño de lista-detalles es ideal para apps de mensajería, administradores de contactos, navegadores de archivos o cualquier app en la que el contenido se pueda organizar como una lista de elementos que muestran información adicional.
Implementación
您可以使用各种技术创建列表-详情布局，包括 Compose、View 和 activity 嵌入（适用于旧版应用）。如需我们帮助您确定哪项技术最适用于您的应用，请参阅适用性部分。
SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。
首先，将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来，添加两个子元素（View 或 fragment），用于表示列表和详情内容。
实现一种通信方法，以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel，因为它能存储业务逻辑，并且可在配置更改后继续留存。
SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情，二者会并排显示。如果窗口空间不足，系统会根据用户与应用的互动单独显示列表或详情。
如需查看示例实现，请参阅包含滑动窗格的列表-详情示例。
activity 嵌入
借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。
如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。
Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。
如需了解详情，请参阅 activity 嵌入。
如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。
Feed
Un diseño de feed dispone elementos de contenido equivalentes en una cuadrícula configurable para permitir una visualización rápida y conveniente de una gran cantidad de contenido.
El tamaño y la posición establecen relaciones entre los elementos de contenido.
Los grupos de contenido se crean al hacer que los elementos tengan el mismo tamaño y posicionarlos juntos. Para atraer la atención a los elementos, estos deben ser más grandes que los cercanos.
Las tarjetas y las listas son componentes comunes de los diseños de feed.
Un diseño de feed admite pantallas de casi cualquier tamaño porque la cuadrícula se puede adaptar de una sola columna de desplazamiento a un feed de varias columnas de desplazamiento de contenido.
Los feeds son adecuados sobre todo para las apps de noticias y redes sociales.
Implementación
RecyclerView 可在单个列中高效呈现大量的项。GridLayoutManager 以网格形式排列各个项，支持配置项的大小和 span。
根据可用显示区域的大小配置网格列，以设置项允许的最小宽度。
如需替换 GridLayoutManager 的默认 span 设置策略（即每个项对应一个 span），可以创建自定义 SpanSizeLookup。调整 span 即可让某些项比其他项更为醒目。
如果显示屏因宽度较小而只够显示一个列，请使用 LinearLayoutManager，而不是 GridLayoutManager。
如需查看示例实现，请参阅使用 View 构建 Feed 示例。
Panel complementario
El diseño de panel complementario organiza el contenido de la app en áreas de visualización principales y secundarias.
El área de visualización principal ocupa la mayor parte de la ventana de la app (por lo general, alrededor de dos tercios) y contiene el contenido principal. El área de visualización secundaria es un panel que ocupa el resto de la ventana de la app y presenta contenido compatible con el contenido principal.
Los diseños de panel complementario funcionan bien en pantallas de ancho expandido (consulta Cómo usar clases de tamaño de ventana) en orientación horizontal. Las pantallas de ancho mediano o compacto admiten la visualización de las áreas principal y secundaria si el contenido se adapta a espacios de visualización más estrechos o si el contenido adicional se puede ocultar inicialmente en una hoja inferior o lateral a la que se puede acceder a través de un control, como un menú o un botón.
Un diseño de panel complementario difiere de un diseño de lista-detalles en la relación del contenido principal y secundario. El contenido del panel secundario es significativo solo en relación con el contenido principal. Por ejemplo, una ventana de herramientas del panel complementario es irrelevante por sí sola. Sin embargo, el contenido complementario del panel de detalles de un diseño de lista-detalles es significativo incluso sin el contenido principal. Por ejemplo, la descripción de un producto de una ficha de producto.
Estos son algunos casos de uso del panel complementario:
- Apps de productividad: Un documento o una hoja de cálculo acompañados de comentarios de revisor en un panel complementario
- Apps de música: Un video en streaming complementado de una lista de videos relacionados en un panel complementario o la representación de un álbum de música complementado con una playlist
- Apps de búsqueda y referencias: Un formulario de entrada de consultas con resultados en un panel complementario
Implementación
辅助窗格布局是使用 LinearLayout 或 ConstraintLayout 等辅助布局实现的。建立窗口大小类别
用于将应用可用的横向显示空间量
三个类别：较小 (< 600dp)、中等 (>= 600dp) 和较大
(>= 840dp)。
针对每个窗口大小类别，按以下方式定义布局：
- 紧凑：在应用资源
layout文件夹中，放置 在主要内容下方或底部动作条内呈现辅助窗格 - 中等：在
layout-w600dp文件夹中提供辅助窗格内容，使主要内容和辅助窗格并排呈现，并平均分配横向显示空间 - 展开：在
layout-w840dp文件夹中添加辅助窗格内容，使主要内容和辅助窗格并排呈现；不过，让辅助窗格只占据横向空间的 30%，并将其余 70% 的空间留给主要内容
使用 ViewModel 在主要内容和
无论是使用 View、fragment 还是二者结合使用，都可以在辅助窗格中显示。
如需查看实现示例，请参阅以下示例：
Aplicabilidad
Los diseños canónicos crean presentaciones polifacéticas de contenido para facilitar el acceso y la exploración profunda. Usa el siguiente diagrama de flujo a fin de determinar qué estrategia de implementación y diseño es la más adecuada para los casos de uso de tu app.
Para ver ejemplos de diseños canónicos implementados en diferentes tipos de apps, consulta la galería de pantallas grandes.
Recursos adicionales
- Material Design: diseños canónicos