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?
Je cherche aussi quelque chose comme un ToggleButtonBar
pendant un certain temps.
J'ai réussi à y parvenir en abusant de Radio-boutons:
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'
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'
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"/>
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