Aperçu

Utilisez Scalable UI pour créer des expériences utilisateur sophistiquées, dynamiques et multipanaux dans les voitures. Interface utilisateur évolutive :

  • Fournit un système de fenêtrage flexible.

  • Réduit les risques, les coûts et la complexité techniques présentés par la Compatibility Test Suite (CTS) pour les implémentations d'interface utilisateur.

L'UI évolutive est compatible avec un large éventail de conceptions modernes d'infodivertissement embarqué (IVI) nécessitant des arrangements de fenêtres dynamiques.

Android 17 introduit les fonctionnalités suivantes spécifiques au fenêtrage avancé :

Exemples d'expériences

L'UI évolutive permet une infinité de configurations de fenêtres. Voici quelques exemples de scénarios créés pour exercer l'UI évolutive :

Arrière-plan de carte avec applications flottantes

Configuration de l'arrière-plan d'une carte avec d'autres applications flottant au-dessus.

Arrière-plan de l'application

Configuration de l'arrière-plan d'une application avec des panneaux flottants.

Appli épinglée sous d'autres applis

Une application épinglée, telle qu'un conteneur de widgets, avec d'autres applications qui se lancent par-dessus.

Panneau flottant conditionnel

Panneau flottant conditionnel qui s'affiche uniquement lorsque des conditions spécifiques sont remplies, par exemple lorsque des contenus multimédias sont en cours de lecture ou lorsqu'une alerte se déclenche.

Appli épinglée près du conducteur

Une application épinglée plus près du conducteur.

Disposition de l'écran partagé

Mise en page en écran partagé affichant deux applications côte à côte.

Écran partagé interactif

Une mise en page interactive en écran partagé permettant un redimensionnement dynamique.

Mise en page multi-ancres pour les grands écrans

Mise en page multi-ancres conçue pour les grands écrans.

Disposition de l'écran d'accueil avec un carrousel d'applications.

Avantages et conformité

Voici quelques avantages d'une UI évolutive :

  • Réduction des risques liés aux tests : le framework est pré-certifié et conforme à la suite CTS, ce qui élimine le principal risque d'échec des tests en fin de cycle de programme. Une UI évolutive peut vous faire économiser des mois d'efforts d'ingénierie et accélérer la conformité.

  • Plus de flexibilité de conception : capacité éprouvée à recréer de nombreux modèles de vitrage automobile complexes existants. L'UI évolutive prend en charge les conceptions ambitieuses et très différenciées.

  • Complexité d'implémentation réduite : l'abstraction dans un modèle XML de haut niveau basé sur la configuration réduit les obstacles à l'entrée pour la logique de fenêtrage personnalisée.

  • Meilleures performances : l'UI évolutive s'exécute sur une base de fenêtrage hautes performances, entièrement intégrée à Android standard. Les transitions sont fluides, ce qui permet une optimisation directe.

Principes de base

L'UI évolutive minimise le besoin de code spécifique à l'OEM, facilite la mise à jour et réduit les risques de lancement en éliminant les pièges et en réduisant les problèmes de certification.

L'approche basée sur XML permet de résoudre les problèmes courants liés à la gestion de systèmes de fenêtrage complexes dans Android Automotive OS (AAOS), tels que le positionnement précis, les conflits d'ordre Z et la mise au point de l'application.

L'UI évolutive fournit ces composants de base.

Panneau

Un panneau est le conteneur rectangulaire de base sur l'écran. Chaque panneau correspond à une tâche racine dédiée pour une gestion indépendante. Un panneau peut héberger des tâches d'application (TaskPanel) ou du contenu basé sur des vues, comme des widgets (DecorPanel). Pour en savoir plus, consultez Configurer un panneau.

Variante

Une variante définit un état visuel spécifique pour un panneau et inclut des propriétés telles que bounds (position et taille), visibility, layer (ordre Z) et le rayon corner. Un même panneau peut avoir plusieurs variantes, telles que opened, closed ou minimized. Pour en savoir plus, consultez Utiliser une variante pour concevoir un état visuel.

Transition

Une transition définit la façon dont un panneau passe de son état actuel fromVariant à un nouvel état toVariant. Un Event déclenche la transition, qui définit l'animation utilisée par le panneau lors du changement d'état. Un panneau doit passer de son état actuel à toVariant. Pour la synchronisation, le gestionnaire de fenêtres principal anime et coordonne toutes les transitions.

  • Événement : déclencheur d'un changement d'UI. Un OEM ou le système peuvent prédéfinir un déclencheur. Par exemple, _System_OnHomeEvent, _System_TaskOpenEvent ou l'appui sur un bouton de navigation personnalisé.

Par exemple, Scalable UI utilise des événements pour déclencher des transitions. Ces transitions animent un panneau d'une variante à une autre pour afficher les modifications dynamiques dans l'UI. L'UI évolutive communique ces modifications aux autres applications système pour ajuster le contenu si nécessaire. En définissant des relations d'UI en XML, vous pouvez :

  • Spécifiez des comportements d'UI complexes : définissez des interactions complexes avec l'interface utilisateur.

  • Organiser les systèmes de fenêtres : contrôlez le positionnement et la superposition des fenêtres.

  • Implémenter des thèmes visuels : appliquez une esthétique et un branding cohérents.

  • Réduisez la complexité du code : minimisez le besoin de développer un code personnalisé étendu.

Pour en savoir plus, consultez Configurer une transition.

Boutons de l'interface utilisateur du système

En plus de déclencher des intents, CarSystemBarButtons peut déclencher un événement d'UI évolutive lorsqu'il est appuyé à l'aide des attributs event, selectedEvent et unselectedEvent.

event décrit l'événement à déclencher lorsque l'utilisateur appuie sur le bouton. Si vous avez besoin d'un contrôle plus précis sur un événement, utilisez les attributs selectedEvent et unselectedEvent pour spécifier l'événement à déclencher lorsque le bouton est sélectionné ou désélectionné, respectivement.

Quand implémenter l'UI du système ?

Cette section décrit les utilisations optimales de l'UI évolutive.

Créer des mises en page multipanaux persistantes

Créez une expérience multizone dans laquelle différentes zones de l'écran sont en permanence dédiées à des fonctions spécifiques. Par exemple, des commandes multimédias dédiées, une bande de climatisation ou une carte en plein écran.

Utilisez TaskPanels pour les applications principales (comme la navigation) et DecorPanels pour les éléments d'interface utilisateur, sous forme de vues, qui doivent être placés entre TaskPanels.

Implémenter une scène de maison dynamique

Implémentez une scène Home composée de plusieurs panneaux d'application interactifs et visibles simultanément. Par exemple, la carte, le lecteur multimédia et la grille d'applications.

Pour faire passer tous les panneaux concernés à leur variante opened ou default, configurez _System_HomeEvent.

Appliquer des calques contextuels

Placez des éléments d'UI non liés à l'application, tels que des widgets contextuels, un branding personnalisé et des barres de déplacement qui peuvent être animées en coordination avec les tâches de l'application.

Utilisez DecorPanels pour tous les éléments purement décoratifs ou hébergeant des widgets. Si un widget héberge une application entièrement fonctionnelle et pouvant être lancée, un Panel > TaskPanel est optimal. Utilisez DecorPanels pour les éléments d'UI basés sur les vues lorsque la superposition doit être synchronisée avec la superposition TaskPanel.

Concevoir des interactions complexes avec les panneaux

Concevez des actions avancées pilotées par l'utilisateur, comme le redimensionnement dynamique d'un panneau d'application ou l'ajustement des vues du tableau de bord en fonction du contenu de l'écran principal.

Définissez des Events personnalisés pour déclencher des Transitions spécifiques non standards.