web-dev-qa-db-fra.com

Comment changer la taille d'un widget de commutateur

Dans le sandwich à la crème glacée, un widget Switch a été introduit qui affiche un curseur On Off.

J'ai ajouté le Switch comme ceci:

<Switch 
    Android:layout_width="fill_parent"
    Android:layout_height="48dp"
    Android:textStyle="bold"
    Android:thumb="@drawable/switch_thumb_selector"
    Android:track="@drawable/switch_bg_selector" />

Les dessinables de la piste et du pouce sont neuf images de patch qui devraient évoluer à toutes les tailles possibles. J'espérais que le commutateur évoluerait à la taille maximale à l'intérieur des limites données, mais il semble que les tirables soient juste centrés à l'intérieur de l'espace fourni.

Est-il possible d'augmenter la taille du Switch pour le faire paraître plus grand?

51
Janusz

Je pense que j'ai finalement compris cela:

  1. La taille des sous-titres est contrôlée par <switch Android:textSize=""... />
  2. Changer la taille du texte du pouce est contrôlé par <switch Android:switchTextAppearance="".../>. Préparez votre propre style. Ce style est important car il contrôle la largeur totale du pouce (plus d'informations à ce sujet plus tard).
  3. La hauteur globale de l'interrupteur est contrôlée par <switch Android:track="@drawable/shape_mythumb".../>. Vous avez utilisé un patch neuf, ce qui, je suppose, est la raison pour laquelle vous rencontrez un problème. J'ai utilisé un <shape Android:shape="rectangle"...></shape> et a réussi.
  4. La hauteur du pouce tirable <switch Android:thumb="".../> est ajusté pour correspondre à la hauteur de la piste. La hauteur de l'étirage du pouce n'est importante que pour la forme du pouce. Cela n'affecte pas la hauteur du commutateur.

Voici donc ce que j'ai trouvé:

  1. Utilisation <shape>...</shape> drawables pour le pouce du commutateur et la piste du commutateur.
  2. La largeur des deux tirables est irrelavant. J'ai mis le mien à "0dp"
  3. La hauteur de la piste détermine la hauteur totale du commutateur.
  4. La plus longue chaîne de Android:textOff ou Android:textOn déterminera la largeur du pouce. Cela détermine la largeur de l'ensemble du commutateur. La largeur du commutateur est toujours le double de la largeur du pouce.
  5. Si la largeur du texte du pouce est inférieure à la hauteur de la piste, la forme du pouce sera réduite. Cela peut déformer la forme du pouce. Si cela se produit, ajoutez des espaces pour augmenter la largeur de votre texte "off" ou "on" jusqu'à ce qu'il soit au moins aussi large que votre piste est grande.

Ces informations sont suffisantes pour au moins commencer à concevoir des commutateurs à la taille et à la forme souhaitées. Faites-moi savoir si vous comprenez autre chose.

89
Quantium

L'utilisation de la propriété scale pour changer la taille a fonctionné pour moi.

Ajoutez ces lignes à votre <switch/> tag dans le fichier xml.

Android:scaleX="2"
Android:scaleY="2"

Vous pouvez modifier la valeur de l'échelle selon vos besoins. Ici, la valeur 2 fait doubler de taille, de même la valeur 0,5 le fait à moitié.

Exemple:

       <Switch
            Android:id="@+id/switchOnOff"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:scaleX="2"
            Android:scaleY="2"/>
75
Gaurav

La réponse ci-dessus est juste. voici un petit exemple comment changer la largeur de votre switch en utilisant la forme drawable j'espère que ça va aider quelqu'un ..

1) Utilisez votre couleur pour le pouce (color_thumb.xml)

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <size Android:height="40dp"  />
    <gradient Android:height="40dp" Android:startColor="#FF569BDA" Android:endColor="#FF569BDA"/>
</shape>

2) couleur grise pour la piste (gray_track.xml)

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <size Android:height="40dp"  />
    <gradient Android:height="40dp" Android:startColor="#dadadada" Android:endColor="#dadadada"/>
</shape>

3) Sélecteur pour le pouce (thumb.xml)

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_enabled="false" Android:drawable="@drawable/gray_track" />
    <item Android:state_pressed="true"  Android:drawable="@drawable/color_thumb" />
    <item Android:state_checked="true"  Android:drawable="@drawable/color_thumb" />
    <item                               Android:drawable="@drawable/gray_track" />
</selector>

4) Sélecteur de piste (track.xml)

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true"  Android:drawable="@drawable/color_thumb" />
     <item                               Android:drawable="@drawable/gray_track" />
</selector>

et enfin en switch

utilisation

Android:switchMinWidth="56dp"
Android:thumb="@drawable/thumb"
Android:track="@drawable/track"
44
Asthme

J'ai traité un problème similaire aujourd'hui et j'ai découvert qu'à partir de Jelly bean, vous pouvez utiliser setSwitchMinWidth(width); pour définir la largeur minimale du commutateur complet. J'ai également pensé cependant que si vos textes sont trop gros, le widget est juste coupé dans la partie gauche. La modification du remplissage de texte par défaut sur le pouce peut être utile ici, avec setThumbTextPadding(num); vous pouvez le modifier.

Le seul problème - et c'est un bloqueur en fait - j'ai trébuché jusqu'à présent est que l'on devrait bien sûr étendre le commutateur en fonction de la taille du conteneur parent. Pour cela, j'ai enveloppé le commutateur dans une disposition linéaire personnalisée (qui fournit également un repli pour l'API <= 15) et j'ai essayé ceci:

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    if (Android.os.Build.VERSION.SDK_INT >= 16) {
        adaptSwitchWidth(w);
    }
}

@TargetApi(16)
private void adaptSwitchWidth(int containerWidth) {
    Switch sw = (Switch) compoundButton;
    sw.setSwitchMinWidth(containerWidth);
}

Malheureusement - pour une raison stupide - le widget de commutateur ne réagit pas à cela. J'ai essayé de le faire dans un OnLayoutChangeListener sans succès non plus. Idéalement, la taille actuelle du commutateur devrait également être connue à cet état et je voulais "distribuer" l'espace libre au rembourrage comme ceci:

int textPadding = Math.max(0, (sw.getWidth() - containerWidth) / 4);
sw.setThumbTextPadding(textPadding);

mais sw.getWidth() renvoie toujours 0 dans onSizeChanged(), probablement parce qu'il n'est toujours pas disposé correctement. Oui, nous y sommes presque ... si vous tombez sur quelque chose, faites le moi savoir :)

8
Thomas Keller

La hauteur de la piste n'a pas à déterminer visuellement la hauteur totale du pouce/interrupteur. J'ai ajouté un trait transparent à ma forme dessinable de piste, ce qui entraîne un rembourrage autour de la piste:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:shape="rectangle">
    <solid Android:color="@color/track_color"/>
    <size Android:height="@dimen/track_height"  />
    <size Android:width="@dimen/track_width"  />

    <!-- results in the track looking smaller than the thumb -->
    <stroke
        Android:width="6dp"
        Android:color="#00ffffff"/>
</shape>
7
stevenp