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.

A continuación, se incluye 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. La ActionBar ahora usa un 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 de la app, la etiqueta y otra información.
  • Un botón para expandir en algunas páginas La página puede comenzar como contraída y ocultar elementos menos importantes hasta que el usuario haga clic en el botón de expansión.
  • IU del selector de apps predeterminada:
    • 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 conduce a un fragmento o intención de subconjunto. El objetivo derecho 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 interruptor principal de Wi-Fi. Puedes encontrar un ejemplo en la siguiente dirección: 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 con Theme.DeviceDefault.Settings como elemento principal.
  • Es un widget de encabezado de la app. Usa los métodos de configuración en AppHeaderController para personalizar cada campo y llamar 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 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.