Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les vues sans défilement se concentrent sur les informations rapides et offrent de la valeur aux utilisateurs avec peu ou pas d'interaction. Il peut donc être difficile d'intégrer un comportement réactif à ces mises en page.
Composants de mise en page prédéfinis sans défilement
Boîte de dialogue
Une boîte de dialogue est une superposition temporaire qui occupe tout l'écran. Il permet aux utilisateurs d'effectuer une seule action.
Tenez compte des points suivants :
Les boîtes de dialogue vous permettent de vérifier que leur contenu est traité.
Les boîtes de dialogue doivent communiquer des informations de manière directe et être dédiées à l'exécution d'une tâche.
Les boîtes de dialogue doivent s'afficher en réponse à une tâche ou une action de l'utilisateur, avec des informations pertinentes ou contextuelles.
Messages de confirmation en superposition
La confirmation en superposition affiche un message de confirmation à l'utilisateur pendant une courte période. Utilisez ce composant pour capter l'attention de l'utilisateur après l'exécution d'une action.
Ouvrir sur le téléphone
La superposition "Ouvrir sur le téléphone" se déclenche lorsque l'utilisateur choisit de poursuivre son parcours sur un téléphone. La superposition comporte un indicateur de progression et indique à l'utilisateur quand consulter son téléphone.
Stepper
Les steppers offrent une expérience de contrôle en plein écran qui permet aux utilisateurs de faire un choix parmi une plage de valeurs. Ils peuvent contrôler l'interaction à l'aide des boutons ou de la couronne, et le niveau spécifique est indiqué par un indicateur de niveau incurvé.
Sélectionner l'heure
Les sélecteurs permettent aux utilisateurs de choisir parmi un nombre fini d'éléments dans des sections déroulantes.
Le sélecteur d'heure comporte jusqu'à trois colonnes, selon que les secondes sont disponibles ou que l'horloge est au format 12 heures ou 24 heures. Les utilisateurs interagissent avec chaque colonne à la fois, en sélectionnant le nombre en le laissant au premier plan avant de continuer.
Sélecteur de date
Les sélecteurs permettent aux utilisateurs de choisir parmi un nombre fini d'éléments dans des sections déroulantes.
Le sélecteur de date comporte jusqu'à trois colonnes, dont l'ordre peut être inversé entre la date, l'heure et l'année, selon le cas d'utilisation.
Les sélecteurs de date nécessitent des chaînes de contenu plus longues. Par conséquent, une seule colonne est visible à la fois, ce qui donne un aperçu de ce qui se trouve à gauche ou à droite. Les utilisateurs interagissent avec chaque colonne à la fois, en sélectionnant le nombre en le laissant en focus avant de continuer.
Exemples de mises en page personnalisées sans défilement
Les écrans d'application non défilants ne sont pas limités aux composants définis. Vous pouvez combiner plusieurs éléments pour créer la mise en page de votre choix.
Vous devez tenir compte de l'espace limité sur un écran non défilant et utiliser des marges et des marges intérieures responsives (en pourcentage) pour utiliser l'espace d'écran disponible. Vous pouvez également envisager d'appliquer un point d'arrêt à 225 dp pour ajouter du contenu ou rendre le contenu existant plus lisible sur les écrans plus grands.
Maps
Superposition d'urgence
Alerte d'urgence
Comportement réactif et adaptatif
Tous les composants de la bibliothèque Compose s'adaptent automatiquement à la taille de l'écran plus large et gagnent en largeur et en hauteur. Pour ces vues en particulier, l'utilisation de points d'arrêt peut offrir une expérience particulièrement riche et précieuse à tous les utilisateurs.
Pour de nombreux boutons, cartes et marges de votre UI, étirez et remplissez l'espace pour différentes tailles d'écran afin de profiter de l'espace disponible sur l'UI et d'obtenir une mise en page équilibrée.
Utilisez la checklist suivante pour vérifier que les paramètres responsifs sont correctement définis :
Créez des mises en page flexibles qui s'affichent correctement sur toutes les tailles d'écran.
Appliquez les marges supérieure, inférieure et latérales recommandées.
Définissez des marges en pourcentage là où le contenu pourrait être coupé.
Utilisez des contraintes de mise en page pour que les éléments utilisent au mieux l'espace à l'écran et maintiennent l'équilibre sur différentes tailles d'appareils.
Tenez compte du texte temporel, le cas échéant, mais ne le faites pas chevaucher la section supérieure de la page.
Pensez à utiliser des boutons qui épousent les bords pour exploiter au maximum l'espace limité.
Envisagez d'appliquer un point d'arrêt à 225 dp pour ajouter du contenu ou rendre le contenu existant plus lisible sur les grands écrans.
Plusieurs parcours de page sans défilement utilisant la pagination
Dans les scénarios où une expérience nécessite plus de contenu, mais souhaite conserver une mise en page sans défilement, envisagez une mise en page multipage avec pagination verticale ou horizontale.
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/25 (UTC).
[null,null,["Dernière mise à jour le 2025/08/25 (UTC)."],[],[],null,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
