Optimiser les applications pour ChromeOS

Les applications Android jouent un rôle important dans la refonte de l'informatique moderne. sur les grands écrans. Mais le simple fait d'exécuter votre application mobile sur un Chromebook ne vous donne pas la meilleure expérience aux utilisateurs.

Cette page détaille certaines façons d'adapter votre expérience aux facteurs de forme portables et convertibles. Consultez nos liste complète des tests pour en savoir plus sur les tests de votre application la compatibilité sur ces appareils.

Profitez du mode multifenêtre de format libre.

L'implémentation des applications Android sous ChromeOS inclut le mode multifenêtre de base. de l'assistance. Au lieu d'occuper tout l'écran, Android affiche applications sur ChromeOS dans des conteneurs de fenêtre de format libre, plus adaptés à ces appareils.

Les utilisateurs peuvent redimensionner la fenêtre qui contient votre application Android, comme illustré dans la figure 1. Pour un redimensionnement fluide et un affichage fluide des fenêtres de format libre l'intégralité de leur contenu à l'utilisateur, consultez les consignes de l'article Gestion des fenêtres.

Figure 1 : Fenêtre d'application redimensionnable

Vous pouvez améliorer l'expérience utilisateur lorsque votre application s'exécute sous ChromeOS en suivant ces pratiques:

• Gérez correctement le cycle de vie de l'activité dans mode multifenêtre et assurez-vous de continuer à mettre à jour l'interface utilisateur, même si votre application n'est pas la fenêtre la plus sélectionnée.
• Assurez-vous que votre application ajuste sa mise en page de manière appropriée chaque fois que l'utilisateur redimensionne sa fenêtre.
• Personnalisez les dimensions initiales de la fenêtre de l'application en spécifiant ses taille du lancement.
• Notez que les et l'orientation de l'activité racine de l'application s'applique à toutes ses fenêtres.

Personnaliser la couleur de la barre supérieure

ChromeOS utilise le thème de l'application pour colorer la barre supérieure affichée en haut de l'application. qui s'affiche lorsque les utilisateurs maintiennent les commandes des fenêtres et le bouton Retour. Pour une apparence soignée et personnalisée pour ChromeOS, définissez colorPrimary et, si possible, colorPrimaryDark dans le thème de votre application.

colorPrimaryDark permet de colorer la barre supérieure. Si seulement colorPrimary est défini, ChromeOS en utilise une version plus sombre dans la barre supérieure. Pour en savoir plus, consultez la section Styles et thèmes.

Prendre en charge le clavier, le pavé tactile et la souris

Tous les Chromebooks sont équipés d'un clavier physique et d'un pavé tactile, et certains sont dotés d'un l'écran tactile. Certains appareils peuvent être convertis sous forme d'ordinateur portable en tablette.

Prise en charge de la saisie à partir de la souris, du pavé tactile et du clavier dans vos applications ChromeOS afin que l'application soit utilisable sans écran tactile. De nombreuses applications prennent déjà en charge la souris et pavé tactile sans nécessiter d'efforts supplémentaires. Toutefois, il est préférable de personnaliser au comportement de la souris, et pour permettre et distinguer à la souris et aux commandes tactiles.

Vérifiez les points suivants:

• Vous pouvez cliquer sur toutes les cibles avec la souris.
• Toutes les surfaces tactiles défilantes défilent à l'aide de la molette de la souris, comme illustré dans figure 2.
• Les états de pointage sont implémentés avec discernement afin d'améliorer la découverte de l'interface utilisateur sans submerger l'utilisateur, comme illustré dans la figure 3.

Figure 2. Défilement avec la molette de la souris

Figure 3. États de survol du bouton.

Le cas échéant, faites la différence entre les saisies à la souris et les entrées tactiles. Pour exemple, appuyer et une obligation de conservation sur un élément peut déclencher une interface utilisateur à sélection multiple, tandis que cliquer avec le bouton droit de la souris sur le même élément peut déclencher un menu d'options à la place.

Curseurs personnalisés

Personnaliser vos applications les curseurs de la souris pour indiquer quel élément de leur UI l'utilisateur peuvent interagir et comment. Vous pouvez configurer PointerIcon pour qu'il utilise Lorsque les utilisateurs interagissent avec une vue en appelant la méthode setPointerIcon().

Dans vos applications, affichez les éléments suivants:

• Pointeurs en faisceau en I pour le texte
• Poignées de redimensionnement sur les bords des calques redimensionnables
• Curseurs à main ouverte et fermée vers le contenu qui peut être affiché à l'écran ou qu'il est possible de faire glisser à l'aide d'un geste cliquer-glisser
• Icônes de chargement signalant qu'un traitement est en cours

La classe PointerIcon fournit des constantes que vous pour implémenter des curseurs personnalisés.

Raccourcis clavier et navigation

Étant donné que chaque Chromebook est doté d'un clavier physique, fournissez des touches d'accès rapide pour permettent à vos utilisateurs d'être plus productifs. Par exemple, si votre application prend en charge vous pouvez appuyer sur Ctrl+P pour ouvrir une boîte de dialogue d'impression.

De même, gérez tous les éléments importants de l'interface utilisateur à l'aide de la navigation via la touche de tabulation. Cela est particulièrement important pour l'accessibilité. Pour répondre aux normes d'accessibilité, toutes les surfaces d'interface utilisateur doivent être clairement mises en évidence et axées sur l'accessibilité. , comme illustré dans les figures suivantes:

Figure 4. Tabulation transversale

Figure 5. Remplacement d'un geste de balayage par une commande qui s'affiche lorsque l'utilisateur pointe dessus.

Veillez à mettre en place des alternatives au clavier ou à la souris pour les fonctionnalités de base fonctionnalités cachées dans des interactions tactiles, telles que l'écran tactile et les actions de mise en attente, les balayages ou autres gestes à plusieurs doigts. Un exemple de solution consiste à fournir qui apparaissent sur une surface lorsque l'utilisateur pointe dessus.

Pour en savoir plus sur la compatibilité avec le clavier, le pavé tactile et la souris, consultez <ph type="x-smartling-placeholder"></ph> Entrées compatibles sur les grands écrans

Améliorer encore les entrées utilisateur

Pour que votre application fonctionne comme un ordinateur de bureau, tenez compte des points suivants axées sur la productivité.

Menus contextuels

Les menus contextuels d'Android, qui sont un autre accélérateur permettant de rediriger les utilisateurs vers fonctionnalités de votre application, peuvent être déclenchées par un clic de souris ou un bouton secondaire ou en appuyant appuyer de manière prolongée sur un écran tactile:

Figure 6. Un menu contextuel s'affiche lorsque l'utilisateur effectue un clic droit.

Glisser-déposer

Créer des interactions de glisser-déposer, comme celle de la figure suivante, peut apporter une productivité efficace et intuitive des fonctionnalités à votre application. Pour en savoir plus, consultez Glisser-déposer.

Figure 7. Glisser-déposer dans une interface d'arborescence de fichiers

Compatible avec les stylets

La prise en charge des stylets est essentielle pour les applications de dessin et de prise de notes. Fournir des la prise en charge des Chromebooks et tablettes équipés d'un stylet via la mise en œuvre des interactions. adapté à l'utilisation de la saisie au stylet.

Tenir compte des variations potentielles dans différents styles de stylet lors de la conception des interactions avec le stylet. Pour obtenir un aperçu des pour les API de stylet, consultez la section Entrées compatibles sur les grands écrans

Rendre vos mises en page responsives

Utilisez au mieux l'espace d'écran disponible pour votre application, son état visuel (plein écran, portrait, paysage ou fenêtre) ; Quelques exemples de une bonne utilisation de l'espace sont les suivants:

• Afficher l'architecture des applications
• Limitez la longueur du texte et la taille des images à une largeur maximale.
• Optimisez l'utilisation de l'espace disponible dans la barre d'outils de l'application.
• Améliorer le placement des affordances d'UI en adaptant l'application à l'utilisation de la souris d'utilisation du pouce.
• Optimiser la taille des vidéos et des images, et définir un ensemble de largeurs maximales et la hauteur de tous les contenus, afin d'optimiser la lisibilité et la numérisation.
• Implémentez un système de colonnes réactif. Pour en savoir plus, consultez la section Annonces grille de mise en page.
• Redimensionnez et modifiez l'interface utilisateur si nécessaire à l'aide du système de colonnes. Dans la mesure du possible, évitez d'ouvrir de nouvelles fenêtres.
• Supprimez les composants à défilement horizontal ou réduisez leur importance.
• Évitez d'utiliser une interface utilisateur modale plein écran. Utilisez une interface utilisateur intégrée, comme des indicateurs de progression des alertes pour toutes les actions non critiques.
• Utilisez les composants améliorés de l'interface utilisateur, tels que les sélecteurs de date et d'heure, les champs de texte et conçus pour la souris, le clavier et les écrans plus grands.
• Utiliser les modifications intégrées, des colonnes supplémentaires ou une interface utilisateur modale au lieu d'une nouvelle activité pour un élément géographique de petite à moyenne taille.
• Supprimez ou modifiez les boutons d'action flottants pour améliorer le clavier la navigation. Par défaut, la position d'un bouton d'action flottant se trouve en dernier dans la tabulation transversale. commande. Au lieu de cela, privilégiez-la en premier, car il s'agit de l'action principale, remplacez-la par une autre affordance de niveau supérieur.

Figure 8. Simulations d'une mise en page responsive sur un écran de téléphone et d'ordinateur de bureau.

Modifier les modèles de navigation

Un bouton "Retour" au niveau du système est un schéma transporté depuis les appareils portables d'Android, ce qui n'est pas aussi bien adapté sur ordinateur.

Votre application étant de plus en plus personnalisée pour un environnement d'ordinateur portable, envisagez en vous orientant vers un schéma de navigation qui élimine le bouton Retour. Laissez le pour gérer sa propre pile d'historique en fournissant un retour dans l'appli les boutons, le fil d'Ariane ou d'autres voies d'échappement, comme les boutons "Fermer" ou "Annuler", de son interface utilisateur sur grand écran.

Vous pouvez contrôler si votre application affiche un bouton "Retour" dans sa fenêtre en procédant comme suit : en définissant une préférence <activity> . Un paramètre de true masque bouton Retour:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Résoudre les problèmes liés aux images d'aperçu de l'appareil photo

Des problèmes d'appareil photo peuvent survenir lorsque l'application ne peut s'exécuter qu'en mode portrait mais l'utilisateur l'exécute sur un écran en mode paysage. Dans ce cas, l'aperçu ou le résultat capturé pourrait faire l'objet d'une rotation incorrecte.

Le mode de compatibilité modifie la façon dont le système gère les événements, tels que les changements d'orientation, dans ChromeOS : Cela permet d'éviter les problèmes lorsque la caméra est utilisée de manière inappropriée. le mode d'orientation choisi. Pour activer le mode de compatibilité, remplissez les critères suivants:

• Ciblez au moins Android 7.0 (niveau d'API 24). La le niveau minimal du SDK peut être inférieur.
• Faites en sorte que votre application puisse être redimensionnée.

Gérer les paramètres de l'appareil

Examinez les paramètres suivants pour les applications exécutées sous ChromeOS.

Régler le volume

Les appareils ChromeOS sont des appareils à volume fixe: les applis qui diffusent du son ont leurs propres commandes de volume. Suivez les consignes pour En cours avec des appareils à volume fixe.

Modifier la luminosité de l'écran

Vous ne pouvez pas régler la luminosité de l'appareil sous ChromeOS. Appels vers la fonction system settings et Les WindowManager.LayoutParams sont ignorés.