web-dev-qa-db-fra.com

Bouton bascule Android - Conception matérielle

Comment implémenter les boutons bascule comme spécifié dans les directives de conception de matériel ici ?

Est-il disponible directement à partir de la bibliothèque de support Android Design ou existe-t-il une bibliothèque tierce disponible?

androidbuttonmaterial-designandroid-togglebutton
13
jaibatrik

Je cherche aussi quelque chose comme un ToggleButtonBar pendant un certain temps.

Directives matérielles:  sample Material toggle button

J'ai réussi à y parvenir en abusant de Radio-boutons:

 enter image description here

Pour réaliser cette sélection unique ButtonBar, j'ai créé un style ToggleButton pour les boutons radio et créé un groupe Radio.

Ajoutez ceci à vos res/values ​​/ styles.xml:

<style name="ToggleButton" parent="@Android:style/Widget.CompoundButton.RadioButton">
    <item name="Android:foreground">?android:attr/selectableItemBackground</item>
    <item name="Android:layout_width">match_parent</item>
    <item name="Android:layout_height">32dp</item>
    <item name="Android:background">@drawable/toggle_background</item>
    <item name="Android:button">@null</item>
    <item name="Android:paddingLeft">8dp</item>
    <item name="Android:textAllCaps">true</item>
    <item name="Android:paddingRight">8dp</item>
</style>

Pour l’arrière-plan, ColorStateList crée un fichier res/drawable/toogle_background.xml:

<?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">
        <color Android:color="@color/toggle_hover" />
    </item>
    <item Android:state_checked="false" Android:state_window_focused="false">
        <color Android:color="@color/toggle_normal" />
    </item>
    <item Android:state_checked="true" Android:state_pressed="true">
        <color Android:color="@color/toggle_active" />
    </item>
    <item Android:state_checked="false" Android:state_pressed="true">
        <color Android:color="@color/toggle_active" />
    </item>
    <item Android:state_checked="true" Android:state_focused="true">
        <color Android:color="@color/toggle_hover" />
    </item>
    <item Android:state_checked="false" Android:state_focused="true">
        <color Android:color="@color/toggle_normal_off" />
    </item>
    <item Android:state_checked="false">
        <color Android:color="@color/toggle_normal" />
    </item>
    <item Android:state_checked="true">
        <color Android:color="@color/toggle_hover" />
    </item>
</selector>

Ajoutez vos res/values ​​/ colors.xml en:

<color name="toggle_hover">@color/gray</color>
<color name="toggle_normal">@color/gainsboro</color>
<color name="toggle_active">@color/silver</color>
<color name="toggle_normal_off">@color/darkgray</color>

<color name="gainsboro">#DCdCdC</color>
<color name="silver">#C0C0C0</color>
<color name="darkgray">#a9a9a9</color>
<color name="gray">#808080</color>

Dans votre fichier de mise en page, utilisez cet extrait de code pour créer un groupe de boutons de basculement de matériau. Dans mon cas, c'est le activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="center"
    Android:orientation="vertical">

    <Android.support.v7.widget.CardView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp">

        <RadioGroup
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:orientation="horizontal">

            <RadioButton
                style="@style/ToggleButton"
                Android:text="First" />

            <RadioButton
                style="@style/ToggleButton"
                Android:text="Second" />

            <RadioButton
                style="@style/ToggleButton"
                Android:text="Third" />

        </RadioGroup>

    </Android.support.v7.widget.CardView>
</LinearLayout>

J'ai utilisé un CardView comme enveloppe pour que le groupe réalise les angles arrondis. Malheureusement, sur les versions Android inférieures à Lollipop, les coins arrondis entraînent un rembourrage du CardView. Vous pouvez bien sûr appliquer ici votre propre style avec d'autres couleurs ou icônes au lieu de texte ou les deux. Créez simplement vos propres StateLists pour ces cas.

Activer/désactiver les boutons:

  • Avoir au moins trois boutons dans un groupe 
  • Étiqueter des boutons avec du texte, une icône ou les deux

Les combinaisons suivantes sont recommandées:

  • Multiple et non sélectionné
  • Exclusif et non sélectionné
  • Exclusif seulement

NOTE: pour utiliser CardView, vous devez ajouter sa dépendance au fichier build.gradle de votre application:

compile 'com.Android.support:cardview-v7:25.0.1'
9
Forke

J'ai créé une bibliothèque ToggleButton qui respecte les directives de conception de matériel:

https://github.com/rcketscientist/ToggleButtons

compile 'com.anthonymandra:ToggleButtons:2.0.0'

 enter image description here

5
Anthony

J'espère que cela pourra vous aider!

http://takeoffandroid.com/Android-views/material-toggle-switch-using-appcompat-v7/

importation:

import Android.support.v7.widget.SwitchCompat;
import Android.widget.CompoundButton;

swt = (SwitchCompat)findViewById(R.id.Switch);
swt.setOnCheckedChangeListener (this);
swt.setChecked (true);

Auditeur:

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    switch (buttonView.getId()) {

        case R.id.Switch:

            if(!isChecked){

                Toast.makeText (SwitchActivity.this,"Err Switch is off!!",Toast.LENGTH_SHORT).show ();
            }else{
                Toast.makeText (SwitchActivity.this,"Yes Switch is on!!",Toast.LENGTH_SHORT).show ();

            }
            break;

        default:
            break;
    }
}

xml:

<Android.support.v7.widget.SwitchCompat
    Android:id="@+id/Switch"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:textOff=""
    Android:text="Toggle Switch"
    Android:background="@Android:color/transparent"
    Android:textColor="@color/secondary_text"
    Android:textOn=""
    Android:button="@null"
    Android:padding="20dp"/>
4
Alejandro Liébana

Vous pouvez utiliser SwitchCompat si votre activité présente une compatibilité ascendante.Voir l'exemple ci-dessous.

<Android.support.v7.widget.SwitchCompat
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:checked="true"/>

Code heureux: D

0
Piyush Kumar