{"id":18,"date":"2012-07-05T20:50:00","date_gmt":"2012-07-05T20:50:00","guid":{"rendered":"http:\/\/cyol.fr\/blogwp\/?p=18"},"modified":"2013-11-14T16:21:33","modified_gmt":"2013-11-14T15:21:33","slug":"dev-android-srdice-mutualisation-des-layouts","status":"publish","type":"post","link":"https:\/\/cyol.fr\/blog\/post\/dev-android-srdice-mutualisation-des-layouts\/","title":{"rendered":"D\u00e9v Android SRDice : Mutualisation des layouts"},"content":{"rendered":"<p><a href=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/icones\/Android_Robot_100.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-124\" title=\"Android_Robot_100\" alt=\"Logo Android\" src=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/icones\/Android_Robot_100.png\" width=\"85\" height=\"100\" \/><\/a>Apr\u00e8s avoir <a title=\"D\u00e9v Android SRDice : Mutualisation du code Java\" href=\"https:\/\/cyol.fr\/blog\/post\/dev-android-srdice-mutualisation-du-code-java\/\">mutualis\u00e9 le code Java<\/a>, il est temps de se pencher les \u00e9l\u00e9ments visuels composant les vues : les layouts.<\/p>\n<p><!--more--><\/p>\n<p>En d\u00e9veloppement Android on a la possibilit\u00e9 d&rsquo;inclure des layouts dans d&rsquo;autres avec le mot cl\u00e9 include.<\/p>\n<h3>\u00c9tape 1 : Etude de l&rsquo;existant :<\/h3>\n<p>J&rsquo;\u00e9tudie donc la vue de mon application pour d\u00e9finir les ensembles d&rsquo;\u00e9l\u00e9ments qui peuvent (doivent) \u00eatre modulaire. Pour ce faire, outre le fait de penser \u00e0 quels \u00e9l\u00e9ments je vais avoir besoin \u00e0 la fois dans SRDSimpleActivity et SRDExtendedActivity, je pense aussi aux diff\u00e9rences que je peux d\u00e9j\u00e0 avoir entre le layout et le <a title=\"SRDice, premiers retours utilisateurs : Edge\/Chance, R\u00e8gle des six et layouts diff\u00e9rents suivant l\u2019orientation de l\u2019\u00e9cran\" href=\"https:\/\/cyol.fr\/blog\/post\/srdice-premiers-retours-utilisateurs-edge-chance-regle-des-six-et-layouts-differents-suivant-l-orientation-de-l-ecran\/\">layout-land<\/a> et sur la fa\u00e7on d&rsquo;en profiter pour optimiser ceci :<\/p>\n<ul>\n<li>L&rsquo;ent\u00eate avec le logo<\/li>\n<li>Le bloc \u00ab\u00a0Nombre de d\u00e9s\u00a0\u00bb avec les boutons &#8211; et +<\/li>\n<li>La checkbox \u00ab\u00a0Edge\/Chance\u00a0\u00bb qui selon l&rsquo;orientation se retrouve \u00e0 des endroits diff\u00e9rents mais reste identique, ce qui peut se r\u00e9gler avec un include<\/li>\n<li>Le bouton \u00ab\u00a0Throw\/Lancer\u00a0\u00bb<\/li>\n<\/ul>\n<h3>\u00c9tape 2 : Faire un include<\/h3>\n<p>Pour faire un include il faut cr\u00e9er un fichier xml contenant les objets que l&rsquo;on d\u00e9sire avec leur mise en page. Il fauit faire attention \u00e0 bien englober ceci dans un unique \u00e9l\u00e9ment, par exemple pour mon ent\u00eate avec le logo :<\/p>\n<pre class=\"brush:xml\">&lt;FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"&gt;\r\n    &lt;ImageView\r\n        android:id=\"@+id\/logoSR\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:clickable=\"false\"\r\n        android:contentDescription=\"@string\/logo\"\r\n        android:cropToPadding=\"true\"\r\n        android:src=\"@drawable\/srlogo\" \/&gt;\r\n\r\n&lt;\/FrameLayout&gt;<\/pre>\n<p>Et dans le layout qui appelle l&rsquo;inclusion :<\/p>\n<pre class=\"brush:xml\">    &lt;include android:id=\"@+id\/head_inc\" \r\n        layout=\"@layout\/srd_title\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\/&gt;<\/pre>\n<p>Note importante : le fichier contenant ce qu&rsquo;il y a \u00e0 inclure s&rsquo;appelle ici srd_title.xml, il se trouve dans le dossier layout.<\/p>\n<p>Pour l&rsquo;englobage : LinearLayout, RelativeLayout, FrameLayout sont possibles. Et dans mon cas r\u00e9agissent pareil (Pour Linear et Relative : normale, \u00e7a ne contient qu&rsquo;un seul \u00e9l\u00e9ment, et la diff\u00e9rence est sur l&rsquo;agencement \u00e0 l&rsquo;int\u00e9rieur). Pour le FrameLayout&#8230; je ne sais pas encore trop quel est sa particularit\u00e9 et le meilleur moyen de l&rsquo;utiliser&#8230;<\/p>\n<p>On a aussi moyen d&rsquo;englober avec la balise &lt;merge&gt; :<\/p>\n<pre class=\"brush:xml\">&lt;merge xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"wrap_content\" &gt;\r\n\r\n    &lt;ImageView\r\n        android:id=\"@+id\/logoSR\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:clickable=\"false\"\r\n        android:contentDescription=\"@string\/logo\"\r\n        android:cropToPadding=\"true\"\r\n        android:src=\"@drawable\/srlogo\" \/&gt;\r\n\r\n&lt;\/merge&gt;<\/pre>\n<p>L\u00e0 part contre attention&#8230;<\/p>\n<div style=\"text-align: center; width: 100%;\">\n<table style=\"text-align: center; width: 80%;\">\n<tbody>\n<tr>\n<td>Sans Merge :<\/td>\n<td>Avec Merge :<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-sans-merge.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-199\" title=\"include-sans-merge\" alt=\"\" src=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-sans-merge.jpg\" width=\"327\" height=\"291\" srcset=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-sans-merge.jpg 327w, https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-sans-merge-300x266.jpg 300w, https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-sans-merge-150x133.jpg 150w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-avec-merge.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-200\" title=\"include-avec-merge\" alt=\"\" src=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-avec-merge.jpg\" width=\"331\" height=\"302\" srcset=\"https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-avec-merge.jpg 331w, https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-avec-merge-300x273.jpg 300w, https:\/\/cyol.fr\/blog\/wp-content\/uploads\/billets\/dev-android-srdice-mutualisation-des-layouts\/include-avec-merge-150x136.jpg 150w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Cela peut \u00eatre utile, mais dans d&rsquo;autres occasions&#8230;<\/p>\n<h3>\u00c9tape 3 : appliquer<\/h3>\n<p>Comme lors de la mutualisation du code Java, dans un premier temps je m&rsquo;applique \u00e0 faire en sorte que les rendus verticaux et horizontaux de SRDice V1 soient toujours fonctionnels.<\/p>\n<p>Au final, une fois ceci fait, je me retrouve avec des tailles de dossiers sensiblement identiques \u00e0 quelques octets pr\u00eats \u00e0 ce que j&rsquo;avais avec SRDice V1. Et de quoi gagner \u00e9norm\u00e9ment sur la cr\u00e9ation des \u00e9crans pour les Tests \u00c9tendus !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s avoir mutualis\u00e9 le code Java, il est temps de se pencher les \u00e9l\u00e9ments visuels composant les vues : les layouts. En d\u00e9veloppement Android on a la possibilit\u00e9 d&rsquo;inclure des layouts dans d&rsquo;autres avec le mot cl\u00e9 include. \u00c9tape 1 : Etude de l&rsquo;existant : J&rsquo;\u00e9tudie donc la vue de mon application pour d\u00e9finir les ensembles d&rsquo;\u00e9l\u00e9ments qui peuvent (doivent) \u00eatre modulaire. [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,2,4],"tags":[114,15,62,25,18,57,112,32],"class_list":["post-18","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-developpement","category-srdice","tag-android","tag-des","tag-developpement-2","tag-edge","tag-java","tag-layout","tag-srdice","tag-tests-etendus","odd"],"_links":{"self":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":5,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":1082,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/posts\/18\/revisions\/1082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media\/124"}],"wp:attachment":[{"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cyol.fr\/blog\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}