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 sean 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 Preference de la biblioteca de compatibilidad. Ahora se dibuja un divisor entre las categorías.
  • Cambio de tema de ActionBar. La ActionBar ahora usa el tema de color claro, con texto de color de contraste.
  • Nuevo diseño de preferencias. El espacio para los íconos permanece incluso cuando una preferencia no tiene ícono.

Widgets nuevos:

  • Un widget de encabezado para los detalles de la app. Muestra el ícono de la app, la etiqueta de la app y otra información.
  • Un botón para expandir en algunas páginas La página puede comenzar contraída y ocultar los elementos menos importantes hasta que el usuario haga clic en el botón para expandirla.
  • 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, ahora es una IU en pantalla completa basada en botones de selección.
  • Una preferencia de estilo "MasterSwitch". Esta es una preferencia con dos objetivos de clic. El objetivo de la izquierda dirige a un intent o fragmento de subconjunto. El objetivo correcto es un interruptor de activación que controla la activación o desactivación de toda la página.

Ejemplos y fuente

  • Comportamiento del divisor
    • Todas las páginas de Configuración se modificaron 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
    • Todas las páginas de Configuración se modificaron 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 la app en Configuración ya implementan el nuevo encabezado de la app.
    • Puedes encontrar ejemplos y código en:
      packages/apps/Settings/src/com/android/settings/applications/AppHeaderController.java
  • Botón para expandir
    • 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 Arquitectura de la información actualizada).

  • 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
    • Hay 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/+/main:packages/apps/Settings/src/com/android/settings/wifi/WifiPrimarySwitchPreferenceController.java
    • Un ejemplo de caso de uso es el interruptor principal de Wi-Fi. Puedes encontrar un ejemplo en: 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 OEMs 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 estilo de los divisores de Configuración y cambia el valor de lo siguiente:
    • allowDividerAbove
    • allowDividerBelow
    • allowDividerAfterLastItem
  • Es el color del tema de ActionBar. Las actividades deben usar Theme.DeviceDefault.Settings como tema o crear un tema personalizado con Theme.DeviceDefault.Settings como elemento superior.
  • Widget del encabezado de la app. Usa set en AppHeaderController para personalizar cada campo y llamar a build() una vez que se hayan configurado todos los campos.
  • Botón para expandir:
    • Para inhabilitar por completo la funcionalidad, reemplaza el constructor de ProgressiveDisclosureMixin y establece keepExpanded en verdadero.
    • Para personalizar la cantidad de elementos que se mostrarán inicialmente, llama al método ProgressiveDisclosureMixin.setTileLimit() durante el método onAttach(Context) del fragmento.