Patrones y componentes

En Android 8.0, se agregan varios componentes y widgets al menú Configuración, que cubren usos comunes. Se recomienda a los fabricantes y desarrolladores de dispositivos que usen los componentes comunes cuando extiendan la app de Configuración para que las nuevas interfaces de usuario sigan siendo coherentes con la IU de Configuración existente.

Este es un resumen de las mejoras:

  • Cambio en el comportamiento del divisor en el framework de preferencias de la biblioteca de compatibilidad. Ahora se dibuja un divisor entre las categorías.
  • Se cambió el tema de ActionBar. Ahora, ActionBar usa el tema de color claro, con texto en color de acento.
  • Nuevo diseño de preferencias El espacio para los íconos permanece incluso cuando una preferencia no tiene un ícono.

Nuevos widgets:

  • Es un widget de encabezado para los detalles de la app. Muestra el ícono, la etiqueta y otra información de la app.
  • Un botón para expandir en algunas páginas La página puede comenzar como contraída y ocultar los elementos menos importantes hasta que el usuario haga clic en el botón de expansión.
  • IU predeterminada del selector de apps:
    • La IU para elegir el navegador predeterminado, la app de teléfono predeterminada, etcétera
    • Antes era un diálogo, pero ahora es una IU de pantalla completa basada en botones de opción.
  • Es una preferencia de estilo "MasterSwitch". Esta es una preferencia con dos objetivos de clic. El destino izquierdo lleva a un fragmento o intent de subconfiguración. El objetivo de la derecha es un botón de activación que controla el encendido y apagado de toda la página.

Ejemplos y fuente

  • Comportamiento del divisor
    • Se modificaron todas las páginas de Configuración para usar el nuevo comportamiento del divisor.
    • El comportamiento del divisor se define como un ThemeOverlay en:
      packages/apps/Settings/res/values/styles_preference.xml
  • Cambio de tema de ActionBar
    • Se modificaron todas las páginas de Configuración para usar el nuevo tema de ActionBar.
    • El tema se define en Theme.DeviceDefault.Settings
  • Nuevo diseño de preferencias
    • Muchas páginas de Configuración ahora usan el nuevo diseño de preferencias.
    • Puedes encontrar el código en:
      packages/apps/Settings/res/values/styles_preference.xml
  • Widget de encabezado de la app
    • La mayoría de las páginas de información de las apps en Configuración ya implementan el nuevo encabezado de la app.
    • Puedes encontrar ejemplos y código en los siguientes vínculos:
      packages/apps/Settings/src/com/android/settings/applications/AppHeaderController.java
  • Botón de expansión
    • Puedes encontrar ejemplos y código en los siguientes vínculos:
      packages/apps/Settings/src/com/android/settings/dashboard/ProgressiveDisclosureMixin.java

      Nota: Este componente se debe usar junto con DashboardFragment. (Consulta más detalles sobre DashboardFragment en Updated Information Architecture).

  • Selector de apps predeterminado
    • Puedes encontrar el código de la clase base en:
      packages/apps/Settings/src/com/android/settings/applications/defaultapps/DefaultAppPickerFragment.java
    • Existen varias subclases de DefaultAppPickerFragment, cada una de las cuales implementa un selector para diferentes intents.
  • Preferencia de estilo MasterSwitch
    • El código se encuentra en: https://cs.android.com/android/platform/superproject/+/main:packages/apps/Settings/src/com/android/settings/wifi/WifiPrimarySwitchPreferenceController.java
    • Un ejemplo de caso de uso es el cambio de Wi-Fi principal. Puedes encontrar un ejemplo en la siguiente URL: packages/apps/Settings/src/com/android/settings/wifi/WifiMasterSwitchPreferenceController.java

Implementación

Los fabricantes de dispositivos pueden comenzar a usar todos los componentes nuevos de inmediato. Si los OEM deciden implementar una nueva preferencia de estilo "MasterSwitch" o un selector de apps predeterminado, deben seguir los ejemplos de este documento y los archivos de referencia (Javadoc) escritos con cada componente para obtener más detalles.

Cómo personalizar el menú de configuración

  • Comportamiento del divisor. Para cambiar la forma en que se dibuja el divisor, actualiza el diseño de los divisores de configuración y cambia el valor de lo siguiente:
    • allowDividerAbove
    • allowDividerBelow
    • allowDividerAfterLastItem
  • Color del tema de ActionBar. Las actividades deben usar Theme.DeviceDefault.Settings como tema o crear un tema personalizado usando Theme.DeviceDefault.Settings como elemento principal.
  • Widget de encabezado de la app. Usa los métodos setter en AppHeaderController para personalizar cada campo y llama a build() una vez que se hayan configurado todos los campos.
  • Botón de expansión:
    • Para inhabilitar por completo la funcionalidad, reemplaza el constructor de ProgressiveDisclosureMixin y establece keepExpanded como verdadero.
    • Para personalizar la cantidad de elementos que se muestran inicialmente, llama al método ProgressiveDisclosureMixin.setTileLimit() durante el método onAttach(Context) del fragmento.