devstory

Le Tutoriel de Android Switch

View more Tutorials:

  1. Android Switch
  2. Switch Styles
  3. Switch Events
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- Android Switch

Sous Android, Switch est un contrôle d'interface utilisateur (user interface control) avec deux états ON/OFF. Bien que ses fonctions ressemblent beaucoup à CheckBox et ToggleButton, leurs interfaces sont différents.
 
Switch ressemble beaucoup à CheckBox et ToggleButton en termes de fonction et de mode d'utilisation. Tous les trois sont sous-classes de CompoundButton qui se différencient au niveau de leur interface.
Image (Icon)
Switch est une sous-classe de Button qui permet d'afficher au maximum quatre icônes dans les quatre bords en utilisant les attributs android:drawableLeft, android:drawableTop, android:drawableRight, android:drawableBottom, android:drawableStart, android:drawableEnd.

<Switch
    android:id="@+id/switch13"
    android:drawableLeft="@drawable/icon_bus"
    android:drawableTop="@drawable/icon_car"
    android:drawableBottom="@drawable/icon_boat"
    android:text="Switch"
    ... />
android:gravity
L'attribut android:gravity est utilisé pour définir la position d'affichage du texte d'un Switch. Sa valeur est une combinaison des valeurs suivantes:
Constant in Java Value Description
Gravity.LEFT left  
Gravity.CENTER_HORIZONTAL center_horizontal  
Gravity.RIGHT right  
Gravity.CLIP_HORIZONTAL clip_horizontal  
Gravity.FILL_HORIZONTAL fill_horizontal  
     
Gravity.TOP top  
Gravity.CENTER_VERTICAL center_vertical  
Gravity.BOTTOM bottom  
Gravity.CLIP_VERTICAL clip_vertical  
Gravity.FILL_VERTICAL fill_vertical  
     
Gravity.START start  
Gravity.END end  
Gravity.CENTER center  
Gravity.FILL fill   

<Switch
    android:id="@+id/switch13"
    android:text="Switch"
    android:gravity="bottom|center"
    ... />
android:switchPadding
L'attribut android:switchPaddiing permet d'installer un espace entre le track et le text de Switch.

<Switch
    android:id="@+id/switch1"
    android:drawableLeft="@drawable/icon_alarm"
    android:switchPadding="10dp"
    android:text="Alarm"
    ... />
android:layoutDirection = "rtl"
L'attribut android:layoutDirection est assisté à partir d Android 4.2 (API Level 17) qui permet de définir la direction de la disposition (Layout direction) d'un View. Par défaut, la valeur de cet attribut est "ltr" (Left to Right).
Afin d'utiliser l'attribut android:layoutDirection, ili faut ouvrir le fichier build.gradle (Module: app) et modifier la valeur de minSdkVersion, et s'assurer que sa nouvelle valeur est égale ou supérieure à 17.

<!-- Layout Direction Default: Left to Right -->
<Switch
    android:id="@+id/switch41"
    android:switchPadding="5dp"
    android:text="Alarm"
    ... />

<!-- Layout Direction: Right to Left -->
<Switch
    android:id="@+id/switch42"
    android:layoutDirection="rtl"
    android:switchPadding="5dp"
    android:text="Alarm"
    ... />
textOn/textOff
Android 5.0 (API Level 21) permet d'afficher textOn/textOff correspondant aux états ON/OFF de Switch.

<!-- textOn/textOff = ON/OFF (Default) -->
<Switch
    android:id="@+id/switch51"
    android:text="Alarm"

    android:showText="true"
    ... />


<!-- textOn/textOff = Enabled/Disabled -->    
<Switch
    android:id="@+id/switch52"  
    android:text="Alarm"

    android:showText="true"
    android:textOff="Disabled"
    android:textOn="Enabled"
    ... />
toggle()
ToggleButton, CheckBox, RadioButton, Switch sont toutes des sous-classes de CompoundButton. Elles héritent donc de la méthode toggle(). C'est la méthode la plus utilisée pour changer leur état de ON (Checked) à OFF (Unchecked) et inversement.

CompoundButton button = (Switch) findViewById(R.id.switch);

button.toggle();

2- Switch Styles

L'attribut style est une option de Switch qui permet de définir le style pour Switch. Vous pouvez utiliser certains styles disponibles dans la bibliothèque d'Android.
Remarque: Actuellement, le nombre de style(s) disponible dans la bibliothèque sont limités et ils ne sont pas vraiement différents des styles par défaut. Il s'agit effectivement d'un point assez décevant.
Switch Styles Example

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView61"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="TextAppearance.AppCompat.Widget.Switch"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Switch
        android:id="@+id/switch61"
        style="@style/TextAppearance.AppCompat.Widget.Switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:showText="false"
        android:text="Alarm"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView61" />

    <TextView
        android:id="@+id/textView62"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="Widget.AppCompat.CompoundButton.Switch"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch61" />

    <Switch
        android:id="@+id/switch62"
        style="@style/Widget.AppCompat.CompoundButton.Switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:showText="false"
        android:text="Alarm"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView62" />

    <TextView
        android:id="@+id/textView63"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="Widget.Material.CompoundButton.Switch"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch62" />

    <Switch
        android:id="@+id/switch63"
        style="@android:style/Widget.Material.CompoundButton.Switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:showText="false"
        android:text="Alarm"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView63" />

    <TextView
        android:id="@+id/textView64"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="Widget.Material.Light.CompoundButton.Switch"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch63" />

    <Switch
        android:id="@+id/switch64"
        style="@android:style/Widget.Material.Light.CompoundButton.Switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:showText="false"
        android:text="Alarm"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView64" />

</androidx.constraintlayout.widget.ConstraintLayout>

3- Switch Events

Il existe beaucoup d'évènements relatifs à un Switch, et les deux ci-dessous sont les plus utilisés:
  • setOnClickListener(View.OnClickListener)
  • setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)
On Click Event:
L'évènement se produit quand l'utilisateur clique (click) sur Switch. Cela donne le même effet que quand l'utilisateur clique sur un Button.

Switch switch1 = (Switch) findViewById(R.id.switch1);

switch1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        boolean checked = ((Switch) v).isChecked();
        if (checked){
            // Your code  
        }
        else{
            // Your code
        }
    }
});
On Checked Change Event:
L'évènement se produit quand Switch change d'état en raison d'une action de l'utilisateur ou sous l'effet de la méthode setChecked(newState), etc.

Switch switch1 = (ToggleButton) findViewById(R.id.switch1);

switch1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked)  {
           // Your code
        } else {
           // Your code
        }
    }
});

View more Tutorials:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.