Personalizzazione a doppio riquadro,Personalizzazione a doppio riquadro

Android 12 introduce un design a doppio riquadro , con un menu L0 statico a sinistra e un riquadro dei contenuti a destra. Questa funzionalità introduce molte nuove opzioni di personalizzazione. Questa pagina descrive in dettaglio tali funzionalità e spiega come personalizzare le tue preferenze.

Ripristina il riquadro singolo

Per impostazione predefinita, CarSettings ora visualizza la visualizzazione a doppio riquadro quando la finestra dell'app ha una larghezza maggiore o uguale a 1400 dp e negli altri casi la visualizzazione a riquadro singolo. Per personalizzarlo per un dispositivo specifico, utilizzare un runtime Resource Overlay (RRO) per indirizzare i valori di configurazione necessari:

Valore Descrizione
config_global_force_single_pane Impostato su true se l'intera app deve essere eseguita nella configurazione a riquadro singolo.
config_homepage_fragment_class Specifica il frammento iniziale per la home page. Nel doppio riquadro, viene utilizzato per il frammento iniziale nel riquadro del contenuto. Nel riquadro singolo, questo dovrebbe essere il frammento della home page.

Tasti dell'intestazione

Poiché diverse attività CarSettings possono avere un IA personalizzato, viene fornita una mappatura dei tasti di intestazione per semplificare le personalizzazioni. In AndroidManifest.xml , ogni attività che supporta il doppio riquadro ha un TOP_LEVEL_HEADER_KEY specificato nei suoi metadati. Questo valore punta a una chiave specificata in res/values/header_keys.xml , che è mappata alla chiave di preferenza della voce di menu di livello superiore in cui rientra il frammento iniziale. Pertanto, se il frammento iniziale di un'attività viene modificato o l'IA viene riorganizzato in modo tale che un particolare frammento rientri in una diversa preferenza di livello superiore, le mappature pertinenti nel file header_keys.xml possono essere aggiornate per specificare il valore corretto .

Personalizza il layout delle attività

Il layout per BaseCarSettingsActivity si trova in res/layout/car_setting_activity e in queste sezioni:

Valore Descrizione
top_level_menu Frammento del menu di livello superiore mostrato nelle configurazioni a doppio riquadro. La larghezza di questa sezione è specificata da top_level_menu_width . Un layout di base dello chassis (con barra degli strumenti) è racchiuso attorno a questa vista.
top_level_divider Linea verticale che divide i due riquadri e di cui puoi personalizzare la larghezza con top_level_divider_width .
fragment_container_wrapper Layout wrapper per il riquadro del contenuto (o il riquadro principale in una configurazione a riquadro singolo). Un layout di base dello chassis (con barra degli strumenti) è avvolto attorno a questa vista.
settings_focus_parking_view Implementazione personalizzata di FocusParkingView per mantenere la messa a fuoco rotante quando necessario.
fragment_container Contenitore del contenuto principale. I frammenti di contenuto lo utilizzano come layout di destinazione.
restricted_message Vista di blocco con limitazioni UX da mostrare sulle istanze di BaseFragment .

Figura 1. Layout a doppio riquadro

Preferenze di primo livello

Le preferenze di livello superiore sono CarUiPreferences personalizzate con un layout leggermente modificato per modificare l'altezza delle preferenze e la forma dello sfondo. Esistono molti modi diversi per personalizzare l'aspetto di queste preferenze:

Valore Descrizione
res/layout/top_level_preference.xml Sovrapponi l' intero layout delle preferenze.
top_level_preference_min_height Altezza minima della preferenza di livello superiore. A seconda del contenuto (ad esempio, è presente un sottotitolo), le preferenze potrebbero essere più alte di questo valore.
top_level_preference_corner_radius Raggio dell'arrotondamento dell'angolo.
top_level_preference_background Sfondo delle preferenze di livello superiore quando non attualmente evidenziate.
top_level_preference_highlight Sfondo delle preferenze di livello superiore quando evidenziate.

Icone di primo livello

La Figura 2 illustra come le icone di livello superiore siano ora costituite da un'icona vettoriale all'interno di una forma di sfondo colorato. Questa forma è attualmente configurata per supportare una forma ovale o rettangolare. Per impostazione predefinita, la forma è impostata su ovale.

Per modificare l'impostazione predefinita, modificare il valore in config_top_level_icon_shape (dove 0 è rettangolo e 1 è ovale). Le icone vengono create inserendo l'icona in primo piano tramite top_level_foreground_icon_inset dalla forma dello sfondo. Ogni icona di livello superiore ha un colore di primo piano specificato in res/values/colors.xml e un colore di sfondo specificato nella cartella res/color .

Per creare un aspetto personalizzato, è possibile sovrascrivere tutti i valori dei colori.

Figura 2. Componenti delle preferenze di livello superiore

Anche le icone per le preferenze inserite che rientrano nelle categorie specificate da config_top_level_injection_categories vengono trattate come icone di livello superiore. Le icone fornite sono inserite con lo stesso valore e nella stessa forma specificata per tutte le altre icone di livello superiore (vedi sopra). Tuttavia, lo sfondo viene determinato esaminando i seguenti attributi in questo ordine:

  1. com.android.settings.bg.argb Metadati dall'app di iniezione.
  2. com.android.settings.bg.hint Metadati dall'app di iniezione.
  3. top_level_injected_default_background Specificato in res/values/colors.xml .

Per ignorare i dati dell'app di inserimento e utilizzare sempre lo sfondo predefinito, impostare config_top_level_injection_background_always_use_default su true .

,

Android 12 introduce un design a doppio riquadro , con un menu L0 statico a sinistra e un riquadro dei contenuti a destra. Questa funzionalità introduce molte nuove opzioni di personalizzazione. Questa pagina descrive in dettaglio tali funzionalità e spiega come personalizzare le tue preferenze.

Ripristina il riquadro singolo

Per impostazione predefinita, CarSettings ora visualizza la visualizzazione a doppio riquadro quando la finestra dell'app ha una larghezza maggiore o uguale a 1400 dp e negli altri casi la visualizzazione a riquadro singolo. Per personalizzarlo per un dispositivo specifico, utilizzare un runtime Resource Overlay (RRO) per indirizzare i valori di configurazione necessari:

Valore Descrizione
config_global_force_single_pane Impostato su true se l'intera app deve essere eseguita nella configurazione a riquadro singolo.
config_homepage_fragment_class Specifica il frammento iniziale per la home page. Nel doppio riquadro, viene utilizzato per il frammento iniziale nel riquadro del contenuto. Nel riquadro singolo, questo dovrebbe essere il frammento della home page.

Tasti dell'intestazione

Poiché diverse attività CarSettings possono avere un IA personalizzato, viene fornita una mappatura dei tasti di intestazione per semplificare le personalizzazioni. In AndroidManifest.xml , ogni attività che supporta il doppio riquadro ha un TOP_LEVEL_HEADER_KEY specificato nei suoi metadati. Questo valore punta a una chiave specificata in res/values/header_keys.xml , che è mappata alla chiave di preferenza della voce di menu di livello superiore in cui rientra il frammento iniziale. Pertanto, se il frammento iniziale di un'attività viene modificato o l'IA viene riorganizzato in modo tale che un particolare frammento rientri in una diversa preferenza di livello superiore, le mappature pertinenti nel file header_keys.xml possono essere aggiornate per specificare il valore corretto .

Personalizza il layout delle attività

Il layout per BaseCarSettingsActivity si trova in res/layout/car_setting_activity e in queste sezioni:

Valore Descrizione
top_level_menu Frammento del menu di livello superiore mostrato nelle configurazioni a doppio riquadro. La larghezza di questa sezione è specificata da top_level_menu_width . Un layout di base dello chassis (con barra degli strumenti) è racchiuso attorno a questa vista.
top_level_divider Linea verticale che divide i due riquadri e di cui puoi personalizzare la larghezza con top_level_divider_width .
fragment_container_wrapper Layout wrapper per il riquadro del contenuto (o il riquadro principale in una configurazione a riquadro singolo). Un layout di base dello chassis (con barra degli strumenti) è avvolto attorno a questa vista.
settings_focus_parking_view Implementazione personalizzata di FocusParkingView per mantenere la messa a fuoco rotante quando necessario.
fragment_container Contenitore del contenuto principale. I frammenti di contenuto lo utilizzano come layout di destinazione.
restricted_message Vista di blocco con limitazioni UX da mostrare sulle istanze di BaseFragment .

Figura 1. Layout a doppio riquadro

Preferenze di primo livello

Le preferenze di livello superiore sono CarUiPreferences personalizzate con un layout leggermente modificato per modificare l'altezza delle preferenze e la forma dello sfondo. Esistono molti modi diversi per personalizzare l'aspetto di queste preferenze:

Valore Descrizione
res/layout/top_level_preference.xml Sovrapponi l' intero layout delle preferenze.
top_level_preference_min_height Altezza minima della preferenza di livello superiore. A seconda del contenuto (ad esempio, è presente un sottotitolo), le preferenze potrebbero essere più alte di questo valore.
top_level_preference_corner_radius Raggio dell'arrotondamento dell'angolo.
top_level_preference_background Sfondo delle preferenze di livello superiore quando non attualmente evidenziate.
top_level_preference_highlight Sfondo delle preferenze di livello superiore quando evidenziate.

Icone di primo livello

La Figura 2 illustra come le icone di livello superiore siano ora costituite da un'icona vettoriale all'interno di una forma di sfondo colorato. Questa forma è attualmente configurata per supportare una forma ovale o rettangolare. Per impostazione predefinita, la forma è impostata su ovale.

Per modificare l'impostazione predefinita, modificare il valore in config_top_level_icon_shape (dove 0 è rettangolo e 1 è ovale). Le icone vengono create inserendo l'icona in primo piano tramite top_level_foreground_icon_inset dalla forma dello sfondo. Ogni icona di livello superiore ha un colore di primo piano specificato in res/values/colors.xml e un colore di sfondo specificato nella cartella res/color .

Per creare un aspetto personalizzato, è possibile sovrascrivere tutti i valori dei colori.

Figura 2. Componenti delle preferenze di livello superiore

Anche le icone per le preferenze inserite che rientrano nelle categorie specificate da config_top_level_injection_categories vengono trattate come icone di livello superiore. Le icone fornite sono inserite con lo stesso valore e nella stessa forma specificata per tutte le altre icone di livello superiore (vedi sopra). Tuttavia, lo sfondo viene determinato esaminando i seguenti attributi in questo ordine:

  1. com.android.settings.bg.argb Metadati dall'app di iniezione.
  2. com.android.settings.bg.hint Metadati dall'app di iniezione.
  3. top_level_injected_default_background Specificato in res/values/colors.xml .

Per ignorare i dati dell'app di inserimento e utilizzare sempre lo sfondo predefinito, impostare config_top_level_injection_background_always_use_default su true .