Discussion :

[Mario Cayer]

Salut à tous
J'essai de mettre 5 radio-boutons en horizontal avec mes propres thèmes et images.
J'ai une question concernant la grosseur de l'images de mes boutons que je ne suis pas capable d'adapter automatiquement.

Mon Smartphone est un HTC One V avec un écran 800 x 480 (WVGA)
Si je calcule la grosseur de mon image en mode paysage, j'ai donc environ 800/6=133 pixels disponibles par image en tenant compte que je me garde une distance d'une image divisée par deux pour un padding de chaque côté.
Donc, si je fais une image de 132 pixels X 66 pixels, je devrais me retrouver avec une icone rectangulaire qui remplira tout l'espace nécessaire.
Aussi, j'insert directement mes écritures dans l'image avec différentes couleurs puisque je me sert des états du bouton (radio_hover,radio_normal,radio_active,radio_normal_off).
J'assume aussi que tous les boutons sont collés.
Malheureusement, mes calculs ne sont pas bons puisque l'image obtenue est celle qui est ci-dessous.



Celle que je veux obtenir et qui est ci-dessous est plutôt obtenue avec des images de 96 pixels X 46 pixels !!!???


Si du même coup, je calcule la grosseur de mon image en mode portrait, je devrais avoir une image d'environ 480/6=80 pixels.
Donc, je devrais me retrouver avec des images d'environ 80 pixels X 40 pixels en mode portrait mais ce n'est pas non plus le cas.
Je me retrouve avec seulement trois images et je ne trouve pas la solution du recadrement automatique.


Voici mon fichier activity_main.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mario.radiogroup.MainActivity" >
 
    <TextView
        android:id="@+id/textResultat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="@string/txt_TextResultat" />
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="vertical" >
 
        <TextView
            android:id="@+id/textRapidite"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/txt_TextResultat" />
 
        <RadioGroup
            android:id="@+id/radioRapidite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
 
            <RadioButton
                android:id="@+id/radioRapidite1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@drawable/radio" />
 
            <RadioButton
                android:id="@+id/radioRapidite2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:button="@drawable/radio"/>
 
            <RadioButton
                android:id="@+id/radioRapidite3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true" 
                android:button="@drawable/radio"/>
 
            <RadioButton
                android:id="@+id/radioRapidite4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
            	android:button="@drawable/radio"/>
 
            <RadioButton
                android:id="@+id/radioRapidite5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:button="@drawable/radio"/>
        </RadioGroup>
    </LinearLayout>
 
</RelativeLayout>

Et ici, mon fichier radio.xml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false"
        android:drawable="@drawable/radio_hover" />
    <item android:state_checked="false" android:state_window_focused="false"
        android:drawable="@drawable/radio_normal" />
    <item android:state_checked="true" android:state_pressed="true"
        android:drawable="@drawable/radio_active" />
    <item android:state_checked="false" android:state_pressed="true"
        android:drawable="@drawable/radio_active" />
    <item android:state_checked="true" android:state_focused="true"
        android:drawable="@drawable/radio_hover" />
    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/radio_normal_off" />
    <item android:state_checked="false" android:drawable="@drawable/radio_normal" />
    <item android:state_checked="true" android:drawable="@drawable/radio_hover" />
    </selector>

Ici, mon fichier style.xlm

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <!--
        Thème de l'application de base, en fonction du niveau de l'API. Ce thème est remplacé
******** par AppBaseTheme de res/values-vXX/styles.xml sur les appareils les plus récents.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!-- Personnalisations de thème disponible dans les niveaux de l'API peuvent aller dans les nouveaux            
            res/values-vXX/styles.xml, tandis personnalisations liées à rétrocompatibilité peut aller ici. -->        
    </style>
 
    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- Toutes les personnalisations qui ne sont pas spécifiques à un niveau API particulier peuvent aller ici. -->
    </style>
 
	<style name="CustomTheme" parent="android:Theme">
   		<item name="android:radioButtonStyle">@style/RadioButton</item>
	</style>
 
	<style name="RadioButton" parent="@android:style/Widget.CompoundButton.RadioButton">
   		<item name="android:button">@drawable/radio_interminable</item>
	</style>
 
</resources>

QUESTIONS:
1- Dois-je me faire obligatoirement deux fichiers différents dans le répertoire des Layouts pour le mode Paysage et Portrait et modifier les wrap_content par des valeurs en DP pour chacun?

2- Étant donné que mes écritures sont à même l'image, dois-je me faire un fichier radio pour chacun des boutons?

3- Pourquoi le calcul de mes images de 132 pixels n'est pas la bonne solution? Je n'ai que trois boutons qui apparaissent à l'écran?

4- Existe-t'il une commande pour l'auto-recadrement des images des boutons lorsque je flippe l'écran?

5- Si mon image de base est plus grosse que le maximum calculé (exemple 512x512pixels), elle ne se recadre pas automatiquement en utilisant des valeurs en DP pour layout_width et layout_height.
Les images sont plutôt tronquées à la dimension désirée en DP au lieu de se réajuster. Pourquoi les images ne se readrent pas?

Vos commentaires sont appréciés merci.

[nicroman]

layout_width=0 et layout_weight=1 devraient bien marcher aussi (sans avoir à calculer).

Sinon, fait tous les calculs en "dp", c'est la seule unité viable.

Et oui un fichier xml de layout par orientation (avec le même nom, mais dans les répertoires correct).

[Mario Cayer]

Merci pour ta réponse nicroman
Effectivement, mettre un poids similaire pour les 5 boutons réparti également les images mais j'ai toujours le même problème.
Après avoir réparti le poids de 20 pour avoir un total de 100%, mes images sont encore tronquées.



J'ai gardé les dimensions originales de 132px x 66px pour l'image puisque je ne suis quand même pas pour modifier chacune des images pour les fitter dans l'écran.
J'ai tenté de modifier les valeurs de android:layout_width="80" qui rapetisse proportionnellement les images tout en les laissant tronquées.


Puis j'ai aussi tenté pour un android:layout_width="30" qui me donne ceci:


Je tourne en rond...

Voici mon nouveau activity_main.xml:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mario.radiogroup.MainActivity" >
 
    <TextView
        android:id="@+id/textResultat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="@string/txt_TextResultat" />
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="vertical" >
 
        <TextView
            android:id="@+id/textAcceuil"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/txt_TextAcceuil" />
 
        <RadioGroup
            android:id="@+id/radioAcceuil"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
 
            <RadioButton
                android:id="@+id/radioAcceuil1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="20"
                android:button="@drawable/radio_interminable" />
 
            <RadioButton
                android:id="@+id/radioAcceuil2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_weight="20"
                android:button="@drawable/radio_interminable"/>
 
            <RadioButton
                android:id="@+id/radioAcceuil3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="20"
                android:checked="true" 
                android:button="@drawable/radio_interminable"/>
 
            <RadioButton
                android:id="@+id/radioAcceuil4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_weight="20"
            	android:button="@drawable/radio_interminable"/>
 
            <RadioButton
                android:id="@+id/radioAcceuil5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" 
                android:layout_weight="20"
                android:button="@drawable/radio_interminable"/>
        </RadioGroup>
	</LinearLayout>
 
</RelativeLayout>

Aussi, lorsque tu me dis: Sinon, fait tous les calculs en "dp", c'est la seule unité viable. j'ai toujours pensé que le dp était comparable pour les calculs au px (mis à part que physiquement pour une imprimante, cela est différent). Mais comment faire un calcul différemment? Le fabriquant me donne seulement une valeur fixe de 800x600 pixels. Sur quelle autre valeur puis-je me baser pour calculer? As-tu un petit exemple?

[Mario Cayer]

Je crois qu le problème est plus complexe qu'il ne parait:
1_ Est-ce possible que les radio-boutons ne puissent afficher du texte à l'intérieur (de la même manière qu'un bouton ordinaire?
Je me pose cette question puisque lorsque je tente d'ajouter du texte par dessus le bouton, il s'écrit inévitablement à côté et non dessus.

2- Mon but principal est d'avoir deux ou trois séries différentes de radio-boutons.
Je me suis aperçu que le style de radio-bouton que j'ai créé s'applique de la même manière à tous les radio-boutons ce que je ne veux pas.
Je pense à mettre des boutons rectangulaires de couleur différentes pour chacune des séries et si possible y ajouter du texte par dessus.

Suis-je donc dans l'erreur en pensant que je devrai programmer chacun des boutons de la manière d'un clavier numérique au lieu de me servir du format radio-bouton.
Si oui, je devrai donc programmer du côté JAVA pour gérer chacun des événements de chacun des boutons?

Un gros merci pour vos conseils et réponses dans cette aventure puisque j'ai beaucoup de temps investi dans cette section.

[nicroman]

Le "dp" est la seule unité qui sera viable (et réutilisable entre un Note4 en 4K et un S2 en 720 pixel de haut).
(paf, je me fais un peu de pub: http://nicroman.developpez.com/tutor...nites-mesures/ )

Moi ce que je ferait, c'est trouver une taille "minimal" en dp pour que les 5 boutons apparaissent correctement et faire un layout par exemple en w720dp (donc quand on a 720dp en largeur, ce layout sera utilisé), et un layout "normal" (sans décoration donc) qui sera lui vertical....

Sinon, je ne crois pas que RadioButton change fondamentalement par rapport à un autre type de bouton. Sauf que le "background" du bouton padding/marging est adapté pour avoir le texte à coté d'une image fixe.
Si décidément RadioButton ne marche pas, utilise un simple Button (tu peux gérer les clicks / déclicks toi-même assez simplement).

132px x 66px ok... mais dans quelle résolution ? ldpi ? mdpi ? hdpi ? xxxhdpi ?


Pour le style, oui, tu surcharge le style des boutons "android", c'est effectivement la manière de faire pour remplacer *tous* les boutons du système... mais ce n'est pas ce que tu veux.
Donc, crée toi un simple "style" (qui n'hérite pas d'un "theme", pas besoin), et fait en sorte que tes boutons aient "android:style=xxxxxx".

Et pour finir, le téléphone ne donne pas juste "800x600" pixels... ca c'est la résolution de la dalle... il fixe aussi dans le système une "densité" (ldpi, mdpi, hdpi,xhdpi, xxhdpi, xxxhdpi), dont vont dépendre les DPs.
Là tu peux avoir 800x600dp, ou bien 533x400dp (par exemple un S2 je crois), ou encore 266x200dp (un wearable).
Dans tous les cas, l'idée est de respecter les 48dp pour un bouton.
http://developer.android.com/design/style/metrics-grids.html

[Mario Cayer]

WOW! Très bon travail ton site sur les unités de mesures!
J'étudie le tout et je reviens...

J'avais finalement décidé d'abandonner les radio-group puisqu'ils sont réellement formatés pour ne rien modifier.
Je reprend donc le chemin des boutons en séries.

J'aurai aussi quelques questions sur les styles ...
Merci pour la bonne référence.