Die Anleitung zu Android ToggleButton

View more Tutorials:

Anleitungen Android

Android ToggleButton
ToggleButton Styles
ToggleButton Events

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.

Facebook

1- Android ToggleButton

In Android ist ToggleButton eine Benutzerinterface (user interface control) mit den 2 Zuständen ON/OFF. ToggleButton ist die Unterklasse von Button, sodass auch Symbols und Text angezeigt werden können.

ToggleButton ist CheckBox, Switch in Bezug auf Funktion und Verwendung ziemlich ähnlich. Alle drei Klassen sind Unterklassen vonn CompoundButton, und der Unterschied liegt in ihrer Interface.

Android Checkbox

Android Switch

Text, Text On, Text Off

Standardmäßig zeigt ToggleButton den Text "OFF" an wenn er OFF ist und den Text "ON" wenn er ON ist. Das Attribut android:text funktioniert nicht. Stattdessen können Sie 2 andere Attribute verwenden, android:textOff und android:textOn um den Text für ToggleButton in verschiedenen Zuständen festzulegen.


<!-- Default ON/OFF Text -->
<ToggleButton
    android:id="@+id/toggleButton"
    android:drawableLeft="@drawable/icon_alarm"
    android:text="ToggleButton"
    ... />

<!-- Custom ON/OFF Text -->
<ToggleButton
    android:id="@+id/toggleButton2"
    android:drawableLeft="@drawable/icon_alarm"
    android:text="ToggleButton"
    android:textOff="DISABLED"
    android:textOn="ENABLED"
    ... />

Image (Icon)

Wie oben erwähnt, ist ToggleButton eine Unterklasse von Button, sodass Sie mithilfe der Attribute android:drawableLeft, android:drawableTop, android:drawableRight, android:drawableBottom, android:drawableStart, android:drawableEnd maximal vier Symbole in der Nähe der vier Kanten anzeigen können.


<ToggleButton
    android:id="@+id/toggleButton"
    android:drawableLeft="@drawable/icon_boat"
    android:drawableTop="@drawable/icon_car"
    android:drawableRight="@drawable/icon_bus"
    android:drawableBottom="@drawable/icon_bus"
    ... />

toggle()

Alle vier Klassen von ToggleButton, CheckBox, RadioButton, Switch sind Unterklassen von CompoundButton, daher erben sie die Methode toggle(). Dies ist die häufig verwendete Methode zur Umwandlung zwischen zwei Zuständen, von ON (Checked) auf OFF (Unchecked), und umgekehrt.


CompoundButton button = (ToggleButton) findViewById(R.id.toggleButton);

button.toggle();

Android Switch

Android Checkbox

Android RadioButton

2- ToggleButton Styles

Das Attribut style ist eine Option von ToggleButton, mit der Sie den Stil für den ToggleButton festlegen können. In der Bibliothek von Android stehen die verschiedenen Stile zur Verfügen, die wahrscheinlich einsatzbereit sind.

ToggleButton 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/textView24"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.AppCompat.DrawerArrowToggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ToggleButton
        android:id="@+id/toggleButton23"
        style="@style/Widget.AppCompat.DrawerArrowToggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView24" />

    <TextView
        android:id="@+id/textView25"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Button.Toggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton23" />

    <ToggleButton
        android:id="@+id/toggleButton24"
        style="@android:style/Widget.Button.Toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView25" />

    <TextView
        android:id="@+id/textView26"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Holo.Button.Toggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton24" />

    <ToggleButton
        android:id="@+id/toggleButton25"
        style="@android:style/Widget.Holo.Button.Toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView26" />

    <TextView
        android:id="@+id/textView27"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Widget.Holo.Light.Button.Toggle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleButton25" />

    <ToggleButton
        android:id="@+id/toggleButton26"
        style="@android:style/Widget.Holo.Light.Button.Toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:drawableLeft="@drawable/icon_alarm"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView27" />

</androidx.constraintlayout.widget.ConstraintLayout>

3- ToggleButton Events

Es gibt einige Ereignisse im Zusammenhang mit einem ToggleButton. Die folgenden zwei Ereignisse werden jedoch am häufigsten verwendet:

setOnClickListener(View.OnClickListener)
setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)

On Click Event:

Das Ereignis tritt ein, wenn der Benutzer auf ToggleButton klickt. Dies entspricht der Aktion des Benutzers, der auf eine Button klickt.


ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);

toggleButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        boolean checked = ((ToggleButton) v).isChecked();
        if (checked){
            // Your code  
        }
        else{
            // Your code
        }
    }
});

On Checked Change Event:

Das Ereignis tritt auf, wenn ToggleButton seinen Status aufgrund der Aktion des Benutzers oder der Auswirkung des Aufrufs der Methode toggleButton.setChecked(newState), usw ändert.


ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggleButton);

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

View more Tutorials:

Anleitungen Android