Personalización de doble panel

Android 12 presenta un diseño de doble panel , con un menú L0 estático a la izquierda y un panel de contenido a la derecha. Esta característica introduce muchas opciones de personalización nuevas. Esta página detalla esas características y explica cómo puede personalizar sus propias preferencias.

Volver al panel único

De forma predeterminada, CarSettings ahora muestra la vista de panel dual cuando la ventana de la aplicación tiene un ancho mayor o igual a 1400 dp y la vista de panel único en caso contrario. Para personalizar esto para un dispositivo específico, use una superposición de recursos de tiempo de ejecución (RRO) para apuntar a los valores de configuración necesarios:

Valor Descripción
config_global_force_single_pane Configúrelo en true si toda la aplicación se va a ejecutar en una configuración de panel único.
config_homepage_fragment_class Especifica el fragmento inicial de la página de inicio. En el panel dual, esto se usa para el fragmento inicial en el panel de contenido. En un solo panel, este debería ser el fragmento de la página de inicio.

Teclas de encabezado

Debido a que diferentes actividades de CarSettings pueden tener una IA personalizada, se proporciona una asignación de claves de encabezado para simplificar las personalizaciones. En AndroidManifest.xml , cada actividad que admite panel dual tiene un TOP_LEVEL_HEADER_KEY especificado en sus metadatos. Este valor apunta a una clave especificada en res/values/header_keys.xml , que se asigna a la clave de preferencia del elemento del menú de nivel superior al que pertenece el fragmento inicial. Por lo tanto, si se cambia el fragmento inicial de una actividad o se reorganiza la IA de modo que un fragmento particular caiga bajo una preferencia de nivel superior diferente, las asignaciones relevantes en el archivo header_keys.xml se pueden actualizar para especificar el valor correcto. .

Personalizar el diseño de la actividad

El diseño de BaseCarSettingsActivity se encuentra en res/layout/car_setting_activity y en estas secciones:

Valor Descripción
top_level_menu Fragmento del menú de nivel superior que se muestra en configuraciones de panel dual. El ancho de esta sección está especificado por top_level_menu_width . Alrededor de esta vista se incluye un diseño de base del chasis (con barra de herramientas).
top_level_divider Línea vertical que divide los dos paneles y cuyo ancho puedes personalizar con top_level_divider_width .
fragment_container_wrapper Diseño contenedor para el panel de contenido (o el panel principal en una configuración de panel único). Alrededor de esta vista se incluye un diseño base del chasis (con barra de herramientas).
settings_focus_parking_view Implementación personalizada de FocusParkingView para mantener el enfoque giratorio cuando sea necesario.
fragment_container Contenedor de contenido principal. Los fragmentos de contenido utilizan esto como diseño de destino.
restricted_message Vista de bloqueo restringida por UX que se mostrará en instancias de BaseFragment .

Figura 1. Diseño de panel doble

Preferencias de nivel superior

Las preferencias de nivel superior son CarUiPreferences personalizadas con un diseño ligeramente modificado para cambiar la altura de la preferencia y la forma del fondo. Hay muchas formas diferentes de personalizar el aspecto de estas preferencias:

Valor Descripción
res/layout/top_level_preference.xml Superponga todo el diseño de preferencias.
top_level_preference_min_height Altura mínima de la preferencia de nivel superior. Dependiendo del contenido (por ejemplo, si hay un subtítulo), las preferencias pueden ser más altas que este valor.
top_level_preference_corner_radius Radio del redondeo de la esquina.
top_level_preference_background Fondo de las preferencias de nivel superior cuando no están resaltadas actualmente.
top_level_preference_highlight Antecedentes de las preferencias de nivel superior cuando se resaltan.

Iconos de nivel superior

La Figura 2 ilustra cómo los íconos de nivel superior ahora consisten en un ícono vectorial dentro de una forma de fondo de color. Esta forma está actualmente configurada para soportar una forma ovalada o rectangular. De forma predeterminada, la forma está configurada en ovalada.

Para cambiar el valor predeterminado, modifique el valor en config_top_level_icon_shape (donde 0 es un rectángulo y 1 es un óvalo). Los íconos se crean insertando el ícono de primer plano en top_level_foreground_icon_inset desde la forma de fondo. Cada icono de nivel superior tiene un color de primer plano especificado en res/values/colors.xml y un color de fondo especificado en la carpeta res/color .

Para crear una apariencia personalizada, puede anular todos los valores de color.

Figura 2. Componentes de preferencias de nivel superior

Los iconos de preferencias inyectadas que se encuentran en las categorías especificadas por config_top_level_injection_categories también se tratan como iconos de nivel superior. Los íconos proporcionados tienen el mismo valor y la misma forma que se especifica para todos los demás íconos de nivel superior (ver arriba). Sin embargo, el fondo se determina observando los siguientes atributos en este orden:

  1. com.android.settings.bg.argb Metadatos de la aplicación de inyección.
  2. com.android.settings.bg.hint Metadatos de la aplicación de inyección.
  3. top_level_injected_default_background Especificado en res/values/colors.xml .

Para ignorar los datos de la aplicación de inyección y usar siempre el fondo predeterminado, configure config_top_level_injection_background_always_use_default en true .