[Resolu] Responsive design (explications sur l'utilisation des styles)

[pierrow]

Bonjour,

j'essaye d'adapter ma vue aux tablettes comme aux téléphones. J'ai appris l'utilisation de l'attribut "android:Layout_weight" que j'ai spécifié à 0.15 pour mon menu de gauche. Comme vous pouvez le constater, mes pastilles se déforment. Je suis ravi pour leur hauteur mais j'aimerais que leur largeur s'adapteur également.

Voici mon code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_600_1024"
android:orientation="vertical"
android:gravity="center_horizontal" >
<TextView
	android:id="@+id/titre"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center_horizontal"
	android:text="@string/titre"
	android:textColor="#DDD"
	android:textSize="45dp"
	android:shadowColor="#000000"
	android:shadowRadius="3"
	android:shadowDx="1"
	android:shadowDy="1"  />
  <LinearLayout
   android:id="@+id/linearLayout1"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="0dp"
   android:layout_weight="0.82"
   android:baselineAligned="false"
   android:orientation="horizontal"
   android:weightSum="1.0" >
   <LinearLayout
	   android:id="@+id/linearLayout2"
	   android:layout_width="wrap_content"
	   android:layout_height="match_parent"
	   android:layout_weight="0.5"
	   android:gravity="center_horizontal"
	   android:orientation="vertical" >
	   <TextView
		   android:id="@+id/cat_level1"
		   android:layout_width="match_parent"
		   android:layout_height="wrap_content"
		   android:gravity="center_horizontal"
		   android:text="@string/cat_level1"
		   android:textColor="#DDD"
		   android:textSize="25dp"
		   android:shadowColor="#000000"
	 android:shadowRadius="3"
	 android:shadowDx="1"
	 android:shadowDy="1"
	 android:layout_weight="0.15" />

		<Button
android:id="@+id/Button01"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginLeft="30dp"
			android:layout_marginTop="5dp"
android:text="1"
android:textColor="#fff"
android:background="@drawable/badges"
android:layout_weight="0.15"/>

  <Button
android:id="@+id/Button02"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginLeft="0dp"
			android:layout_marginTop="5dp"
android:text="2"
android:textColor="#fff"
android:background="@drawable/badges"
android:layout_weight="0.15" />

  <Button
android:id="@+id/Button03"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginRight="30dp"
			android:layout_marginTop="5dp"
android:text="3"
android:textColor="#fff"
android:background="@drawable/badges"
android:layout_weight="0.15" />
  <Button
android:id="@+id/Button04"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginRight="0dp"
			android:layout_marginTop="5dp"
android:text="4"
android:textColor="#fff"
android:background="@drawable/badges"
android:layout_weight="0.15" />

  <Button
android:id="@+id/Button05"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginLeft="30dp"
			android:layout_marginTop="5dp"
android:text="5"
android:textColor="#fff"
android:background="@drawable/badges"
android:layout_weight="0.15" />
   </LinearLayout>
	<LinearLayout
		android:id="@+id/linearLayout3"
		android:layout_width="wrap_content"
		android:layout_height="match_parent"
		android:gravity="center_horizontal"
		android:orientation="vertical"
		android:layout_weight="0.5" >
	  <!-- avant wrap_content pour width et height -->
		<TextView
			android:id="@+id/cat_level2"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:gravity="center_horizontal"
			android:text="@string/cat_level2"
			android:textColor="#DDD"
			android:textSize="25dp"
			android:shadowColor="#000000"
	  android:shadowRadius="3"
	  android:shadowDx="1"
	  android:shadowDy="1" />
		<Button
android:id="@+id/Button11"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginRight="30dp"
			android:layout_marginTop="5dp"
android:text="1"
android:textColor="#fff"
android:background="@drawable/badges" />

  <Button
android:id="@+id/Button12"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginLeft="0dp"
			android:layout_marginTop="5dp"
android:text="2"
android:textColor="#fff"
android:background="@drawable/badges" />

  <Button
android:id="@+id/Button13"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginLeft="30dp"
			android:layout_marginTop="5dp"
android:text="3"
android:textColor="#fff"
android:background="@drawable/badges" />
  <Button
android:id="@+id/Button14"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginRight="0dp"
			android:layout_marginTop="5dp"
android:text="4"
android:textColor="#fff"
android:background="@drawable/badges" />

  <Button
android:id="@+id/Button15"
android:layout_width="50dp"
android:layout_height="50dp"
			android:layout_marginRight="30dp"
			android:layout_marginTop="5dp"
android:text="5"
android:textColor="#fff"
android:background="@drawable/badges" />
	</LinearLayout>
</LinearLayout>

  <Button
   android:id="@+id/BoutonInfo"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/info" />
</LinearLayout>

D'avance merci à celui ou celle qui pourrais me dire comment avoir des pastilles rondes dans le menu de gauche. ;)

[Bismuth76]

Salut !

Pour répondre à la question en elle-même, je pense (mais je ne suis pas sûr) qu'il faudrait que chaque bouton soit dans un layout. Du coup, c'est ce layout qui va adapter sa taille pour remplir l'espace nécessaire et il hébergera son bouton en le centrant afin qu'il ne se redimensionne pas n'importe comment.

Maintenant, si je peux me permettre de te donner un ou deux conseils, tu devrais vraiment factoriser ton code. C'est peut-être plus chiant à faire au début (encore que) mais tu vas gagner un temps fou. Si tu ne vois pas bien ce que je veux dire, j'explicite :

1) Tu as 2 structures de menu strictement identiques, tu devrais donc créer un layout "menu" qui implémente les boutons, etc puis, dans ton layout principal, tu fais un include du nombre de menus que tu veux.

2) Dans chaque menu, tu as 5 boutons dont les attributs sont identiques. Tu devrais créer un style "mesBoutonsMenu" (le nom est un exemple hein ^^) que tu appliquerais à chacun de tes boutons. Comme ça, si tu veux changer la valeur d'un attribut de bouton, tu le change à un seul endroit et c'est répercuté sur tous les boutons de tous tes menu ;) (Si tu veux plus d'infos sur les styles : http://developer.android.com/guide/topics/resources/style-resource.html). Et un petit truc en plus, si tu as un bouton (par exemple, le premier ou le dernier) sur lequel tu souhaites ajouter ou modifier un attribut, créé un nouveau style qui hérite du style "mesBoutonsMenu" ^^.

Bref, ce ne sont que quelques conseils, peut-être les connais tu déjà et as-tu préférer ne pas les utiliser. Quoiqu'il en soit, ce sont des pratiques qui te permettent d'y voir plus clair dans ton code, de pouvoir réutiliser ton code ailleurs avec peu de modifications et ça facilite la maintenance (si tu retournes voir ton code dans 3 mois, tout devrait te sembler limpide ^^).

A plus ;)

[pierrow]

Merci beaucoup pour ta réponse. En effet je n'avais jamais entendu parlé des styles. J'ai pris le temps de créer des styles pour mes boutons ainsi que pour les layout dans lequel j'ai placé mes boutons. Je continue à essayer ça et reposte un message pour voir si cela fonctionne ;)

[Invité]

Avec un [Resolu] si ca marche ;-)