Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Une mise en page définit la structure visuelle avec laquelle un utilisateur interagit avec votre application, par exemple dans une activité. Android fournit un éventail de bibliothèques, de points de départ canoniques et de techniques pour afficher et positionner du contenu.
Respectez les zones sécurisées des appareils Honor, qui incluent des parties de l'UI telles que les encoches, les encarts bord à bord, les écrans bord à bord, les claviers logiciels et les barres système. Fournissez une mise en page flexible permettant aux utilisateurs d'interagir avec le clavier.
Avertissement : Soyez prudent lorsque vous couvrez du contenu avec le clavier.
Ergonomie de l'interaction
Conservez les interactions essentielles, comme la navigation principale, dans une zone d'écran accessible. Les boutons d'action flottants constituent un point d'interaction visible et accessible.
Groupes de confinement
Utilisez le confinement pour regrouper les contenus associés afin de guider l'utilisateur à travers les contenus et les actions. Cartes utilisant la structuration explicite pour grouper du contenu avec des actions associées.
Alignement
Assurez-vous que les contenus et les éléments d'UI similaires sont alignés de manière cohérente.
check_circle
À faire
Établissez un espacement cohérent entre les éléments similaires.
cancel
À éviter
Perturber la lisibilité en espaçant de manière incohérente les éléments similaires, ce qui peut donner l'impression que les conceptions sont aléatoires.
Orientation de la mise en page
Ne vous limitez pas au format portrait ni à une mise en page idéalisée : tenez compte des différents formats, classes de taille et résolutions que les utilisateurs peuvent rencontrer.
Interactions essentielles
Ne proposez pas trop d'actions par vue à l'utilisateur.
Annoter les spécifications de mise en page
Lorsque vous créez des mises en page personnalisées, indiquez comment le contenu doit s'insérer dans la mise en page à l'aide de termes d'alignement, de contraintes ou de gravité. Indiquez comment les images doivent répondre à leur conteneur pour s'afficher correctement.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/28 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/08/28 (UTC)."],[],[],null,["A layout defines the visual structure for a user to interface with your app,\nsuch as in an activity. Android provides a range of libraries, canonical\nstarting points, and techniques to display and position content.\n\nGet Started\n\nStart designing Android layouts by learning [app anatomy](/develop/ui/compose/layouts/adaptive/app-anatomy) then how to\n[structure your app's content](/develop/ui/compose/layouts/adaptive/content-structure).\n\nTakeaways \n**Device safe areas**\n\n\nHonor device safe areas, which includes parts of the UI such as display\ncutouts, edge-to-edge insets, edge displays, software keyboards, and system\nbars. Provide a flexible layout for users to\ninteract with the keyboard.\nWarning: Be careful when covering content with the keyboard.\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. \n**Interaction ergonomics**\n\n\nKeep essential interactions, like primary navigation, in a reachable screen\narea. Floating action buttons (FABs) provide a\nprominent and reachable interaction point \n**Containment groups**\n\n\nUse containment to group related content to guide the user through content and\nactions. Cards using explicit containment to group content with related actions.\n\n**Alignment**\n\nProvide consistent alignment between similar content and UI elements.\n\n\u003cbr /\u003e\n\ncheck_circle\n\nDo \nEstablish consistent spacing between like elements. \ncancel\n\nDon't \nDisrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. \n**Layout orientation**\n\n\nDon't stick to portrait or an idealized layout: Consider different aspect\nratios, size classes, and resolutions that users may encounter.\n\n\n**Essential interactions**\n\n\nDon't overwhelm your user with too many actions per view. \n**Notate layout specs**\n\n\nWhen building custom layouts, notate how content should sit within the layout\nusing alignment, constraints, or gravity terms. Include how images should\nrespond to their container to display properly.\n\n\u003cbr /\u003e"]]
