{"id":294,"date":"2021-08-27T15:28:59","date_gmt":"2021-08-27T15:28:59","guid":{"rendered":"https:\/\/www.louismarchand.me\/?page_id=294"},"modified":"2022-08-30T15:05:54","modified_gmt":"2022-08-30T15:05:54","slug":"android-les-layouts","status":"publish","type":"page","link":"https:\/\/www.louismarchand.me\/index.php\/android-les-layouts\/","title":{"rendered":"Les \u00ab\u00a0Layouts\u00a0\u00bb Android"},"content":{"rendered":"

Introduction<\/h2>\n

Le syst\u00e8me Android utilise une m\u00e9canique MVC dont les vues sont enti\u00e8rement g\u00e9n\u00e9r\u00e9es par des librairies et des fichiers de configuration. L’id\u00e9e est d’utiliser le plus possible les fichiers de configuration pour g\u00e9n\u00e9rer l’interface graphique et d’utiliser le moins possible la programmation pour cette t\u00e2che.<\/p>\n

Les \u00ab\u00a0layouts\u00a0\u00bb<\/h2>\n

Android utilise un syst\u00e8me de positionnement Android qu’on appelle \u00ab\u00a0Layout\u00a0\u00bb. Il s’agit d’une ressource qu’on peut utiliser et modifier \u00e0 l’aide de la programmation d’Activit\u00e9. Ces \u00ab\u00a0layouts\u00a0\u00bb sont configur\u00e9s dans un fichier XML, et sont li\u00e9s aux activit\u00e9s par la m\u00e9thode \u00ab\u00a0setContentView\u00a0\u00bb.<\/p>\n

Les \u00ab\u00a0layouts\u00a0\u00bb sont organis\u00e9s en arbre dans lequel les feuilles sont des vues et les autres noeuds sont des groupes de vues.<\/p>\n

\"\"<\/p>\n

Les vues sont les \u00ab\u00a0widget\u00a0\u00bb graphiques comme des boutons ou des boites de texte. Les groupes de vues sont des \u00ab\u00a0layouts\u00a0\u00bb en soi. Donc, les \u00ab\u00a0layouts\u00a0\u00bb contiennent d’autres \u00ab\u00a0layouts\u00a0\u00bb et des \u00ab\u00a0widgets\u00a0\u00bb.<\/p>\n

L’\u00e9diteur Android Studio permet de modifier les \u00ab\u00a0layouts\u00a0\u00bb de mani\u00e8re graphique ou en \u00e9ditant directement la configuration XML. La version graphique peut \u00eatre plus facile, mais il est important de consid\u00e9rer que cette version n’est pas particuli\u00e8rement fiable. L’affichage tel que visible dans Android Studio ne correspond pas n\u00e9cessairement \u00e0 l’affichage qui sera visible sur un appareil Android. L’\u00e9dition XML peut sembler plus difficile \u00e0 premi\u00e8re vue, mais donne g\u00e9n\u00e9ralement un r\u00e9sultat plus fiable une fois sur l’appareil Android.<\/p>\n

Voici le visuel graphique:<\/p>\n

\"\"<\/p>\n

Voici le visuel d’\u00e9dition de configuration:<\/p>\n

\"\"<\/p>\n

Et voici un affichage \u00ab\u00a0split\u00a0\u00bb:<\/p>\n

\"\"<\/p>\n

Cet affichage permet de voir graphiquement les modifications effectu\u00e9es dans le code XML. La principale probl\u00e9matique de ce type d’affichage est l’espace n\u00e9cessaire pour \u00eatre \u00e0 l’aise.<\/p>\n

Les groupes de vues<\/h2>\n

Il existe une grande quantit\u00e9 de groupe de vues (\u00ab\u00a0layouts\u00a0\u00bb). Je ne ferai pas le tour de toutes ces classes et si vous voulez en savoir plus, je vous recommande d’aller voir la documentation ici<\/a>. Les \u00ab\u00a0layouts\u00a0\u00bb pr\u00e9sent\u00e9s ici sont les plus g\u00e9n\u00e9raux et permettent de faire une grande majorit\u00e9 des mises en pages standards.<\/p>\n

Les \u00ab\u00a0layouts\u00a0\u00bb lin\u00e9aires<\/h3>\n

Les \u00ab\u00a0layouts\u00a0\u00bb lin\u00e9aires sont une mani\u00e8re standard, rapide et adaptative de faire des interfaces mobiles. Il existe deux (2) types de \u00ab\u00a0layouts\u00a0\u00bb lin\u00e9aires: les \u00ab\u00a0layouts\u00a0\u00bb lin\u00e9aires verticaux et les \u00ab\u00a0layouts\u00a0\u00bb lin\u00e9aires horizontaux. Par exemple, voici une configuration de \u00ab\u00a0layout\u00a0\u00bb lin\u00e9aire horizontal:<\/p>\n

\n
<?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\r\n<LinearLayout<\/span> xmlns:android=<\/span>\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\r\n    xmlns:app=<\/span>\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\r\n    xmlns:tools=<\/span>\"http:\/\/schemas.android.com\/tools\"<\/span>\r\n    android:layout_width=<\/span>\"match_parent\"<\/span>\r\n    android:layout_height=<\/span>\"match_parent\"<\/span>\r\n    android:orientation=<\/span>\"horizontal\"<\/span>\r\n    tools:context=<\/span>\".MainActivity\"<\/span>><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button1\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button2\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button3\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button4\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n<\/LinearLayout><\/span>\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Et voici un exemple de \u00ab\u00a0layout\u00a0\u00bb lin\u00e9aire vertical:<\/p>\n
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\r\n<LinearLayout<\/span> xmlns:android=<\/span>\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\r\n    xmlns:app=<\/span>\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\r\n    xmlns:tools=<\/span>\"http:\/\/schemas.android.com\/tools\"<\/span>\r\n    android:layout_width=<\/span>\"match_parent\"<\/span>\r\n    android:layout_height=<\/span>\"match_parent\"<\/span>\r\n    android:orientation=<\/span>\"vertical\"<\/span>\r\n    tools:context=<\/span>\".MainActivity\"<\/span>><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button1\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button2\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button3\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button4\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button\"<\/span> \/><\/span>\r\n<\/LinearLayout><\/span>\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Il est \u00e9galement possible d’emboiter des \u00ab\u00a0layouts\u00a0\u00bb dans d’autres \u00ab\u00a0layouts\u00a0\u00bb. Par exemple:<\/p>\n
\n
<?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\r\n<LinearLayout<\/span> xmlns:android=<\/span>\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\r\n    xmlns:app=<\/span>\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\r\n    xmlns:tools=<\/span>\"http:\/\/schemas.android.com\/tools\"<\/span>\r\n    android:layout_width=<\/span>\"match_parent\"<\/span>\r\n    android:layout_height=<\/span>\"match_parent\"<\/span>\r\n    android:orientation=<\/span>\"vertical\"<\/span>\r\n    tools:context=<\/span>\".MainActivity\"<\/span>><\/span>\r\n    <LinearLayout<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:orientation=<\/span>\"horizontal\"<\/span>><\/span>\r\n        <Button<\/span>\r\n            android:id=<\/span>\"@+id\/button1\"<\/span>\r\n            android:layout_width=<\/span>\"match_parent\"<\/span>\r\n            android:layout_height=<\/span>\"match_parent\"<\/span>\r\n            android:layout_weight=<\/span>\"1\"<\/span>\r\n            android:text=<\/span>\"Button1\"<\/span> \/><\/span>\r\n        <Button<\/span>\r\n            android:id=<\/span>\"@+id\/button2\"<\/span>\r\n            android:layout_width=<\/span>\"match_parent\"<\/span>\r\n            android:layout_height=<\/span>\"match_parent\"<\/span>\r\n            android:layout_weight=<\/span>\"1\"<\/span>\r\n            android:text=<\/span>\"Button2\"<\/span> \/><\/span>\r\n    <\/LinearLayout><\/span>\r\n    <Button<\/span>\r\n        android:id=<\/span>\"@+id\/button3\"<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:text=<\/span>\"Button3\"<\/span> \/><\/span>\r\n    <LinearLayout<\/span>\r\n        android:layout_width=<\/span>\"match_parent\"<\/span>\r\n        android:layout_height=<\/span>\"match_parent\"<\/span>\r\n        android:layout_weight=<\/span>\"1\"<\/span>\r\n        android:orientation=<\/span>\"horizontal\"<\/span>><\/span>\r\n        <Button<\/span>\r\n            android:id=<\/span>\"@+id\/button4\"<\/span>\r\n            android:layout_width=<\/span>\"match_parent\"<\/span>\r\n            android:layout_height=<\/span>\"match_parent\"<\/span>\r\n            android:layout_weight=<\/span>\"1\"<\/span>\r\n            android:text=<\/span>\"Button4\"<\/span> \/><\/span>\r\n        <LinearLayout<\/span>\r\n            android:layout_width=<\/span>\"match_parent\"<\/span>\r\n            android:layout_height=<\/span>\"match_parent\"<\/span>\r\n            android:layout_weight=<\/span>\"1\"<\/span>\r\n            android:orientation=<\/span>\"vertical\"<\/span>><\/span>\r\n            <Button<\/span>\r\n                android:id=<\/span>\"@+id\/button5\"<\/span>\r\n                android:layout_width=<\/span>\"match_parent\"<\/span>\r\n                android:layout_height=<\/span>\"match_parent\"<\/span>\r\n                android:layout_weight=<\/span>\"1\"<\/span>\r\n                android:text=<\/span>\"Button5\"<\/span> \/><\/span>\r\n            <Button<\/span>\r\n                android:id=<\/span>\"@+id\/button6\"<\/span>\r\n                android:layout_width=<\/span>\"match_parent\"<\/span>\r\n                android:layout_height=<\/span>\"match_parent\"<\/span>\r\n                android:layout_weight=<\/span>\"1\"<\/span>\r\n                android:text=<\/span>\"Button6\"<\/span> \/><\/span>\r\n        <\/LinearLayout><\/span>\r\n    <\/LinearLayout><\/span>\r\n<\/LinearLayout><\/span>\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
Les \u00ab\u00a0layouts\u00a0\u00bb de contraintes<\/h3>\n
Les \u00ab\u00a0layouts\u00a0\u00bb de contraintes sont des \u00ab\u00a0layouts\u00a0\u00bb qui sont beaucoup plus puissant que les \u00ab\u00a0layouts\u00a0\u00bb lin\u00e9aires, mais qui sont \u00e9galement beaucoup plus complexe \u00e0 monter. Ce type de \u00ab\u00a0layouts\u00a0\u00bb est bas\u00e9 sur la position relative des objets par rapport aux autres. Ce type de \u00ab\u00a0layout\u00a0\u00bb remplace les \u00ab\u00a0layouts\u00a0\u00bb relatifs qui \u00e9tait utilis\u00e9s dans les pr\u00e9c\u00e9dentes versions d’Android. \u00c9galement, les \u00ab\u00a0layouts\u00a0\u00bb de contraintes peuvent permettre des d\u00e9placements et animations d’objets.<\/p>\n
Voici ce qui a \u00e0 conna\u00eetre dans l’utilisation des \u00ab\u00a0layouts\u00a0\u00bb de contrainte:<\/p>\n