Le Tutoriel de Android Switch

Android Switch
Switch Styles
Switch Events

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
        }
    }
});

Tutoriels de programmation Android

Tutoriels de programmation Flutter

Le Tutoriel de Android Switch

1. Android Switch

2. Switch Styles

3. Switch Events

Tutoriels de programmation Android

Tutoriels de programmation Android

Articles les plus récents