2.3.5.RadioButton (bouton radio) et Checkbox (case à cocher)

Introduction à cette section :

Cette section vous présente les RadioButton et Checkbox parmi les contrôles d'interface utilisateur de base d'Android. Tout d'abord, parlons de ce que cette section va couvrir : concernant RadioButton et Checkbox
1. Utilisation de base
2. Gestion des événements ;
3. Effets de clic personnalisés ;
4. Modification de la position relative du texte et de la case de sélection ;
5. Modification de la distance entre le texte et la case de sélection

En fait, ces deux contrôles se ressemblent à bien des égards. En dehors de la sélection unique par rapport à la sélection multiple et de la gestion des événements, tout le reste est similaire ! De plus, il y a le problème du désalignement des Checkbox dans ListView. Nous résoudrons ce problème dans le chapitre ListView. Très bien, commençons cette section~ Documentation officielle de l'API pour cette section :RadioButton；CheckBox；

1. Utilisation de base et gestion des événements :

1) RadioButton (bouton radio)

Comme son nom l'indique, un RadioButton ne peut avoir qu'une seule sélection, nous devons donc placer les RadioButton dans un groupe de boutons RadioGroup pour obtenir la fonctionnalité de sélection unique ! D'abord, familiarisons-nous avec l'utilisation de RadioButton à l'aide d'un simple exemple de sélection de genre : De plus, nous pouvons définir la propriété orientation sur le RadioGroup externe pour définir la disposition des RadioButton, qu'ils soient verticaux ou horizontaux~

Capture d'écran du résultat :

PS : Le téléphone de l'auteur fonctionne sous Android 5.0.1. Le RadioButton ici est légèrement plus beau que l'ancienne version de RadioButton~

Le code de mise en page est le suivant :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请选择性别"
        android:textSize="23dp"
        />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/btnMan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="男"
            android:checked="true"/>

        <RadioButton
            android:id="@+id/btnWoman"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女"/>
    </RadioGroup>

    <Button
        android:id="@+id/btnpost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提交"/>

</LinearLayout>

Obtention de la valeur sélectionnée :

Il y a deux méthodes ici,

La premièreconsiste à définir un écouteur d'événement setOnCheckChangeListener pour le RadioButton

L'exemple de code est le suivant :

RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
        //第一种获得单选按钮值的方法  
        //为radioGroup设置一个监听器:setOnCheckedChanged()  
        radgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radbtn = (RadioButton) findViewById(checkedId);
                Toast.makeText(getApplicationContext(), "按钮组值发生改变,你选了" + radbtn.getText(), Toast.LENGTH_LONG).show();
            }
        });

Capture d'écran de l'effet d'exécution :

PS : Aussi, une chose à retenir : vous devez ajouter un id à chaque RadioButton, sinon la fonctionnalité de sélection unique ne fonctionnera pas !!!

La secondeméthode consiste à obtenir la valeur du bouton radio sélectionné en cliquant sur un autre bouton. Bien sûr, nous pouvons aussi l'obtenir directement ; cela dépend des besoins~

L'exemple de code est le suivant :

Button btnchange = (Button) findViewById(R.id.btnpost);
        RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
        //为radioGroup设置一个监听器:setOnCheckedChanged()  
        btnchange.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                for (int i = 0; i < radgroup.getChildCount(); i++) {
                    RadioButton rd = (RadioButton) radgroup.getChildAt(i);
                    if (rd.isChecked()) {
                        Toast.makeText(getApplicationContext(), "点击提交按钮,获取你选择的是:" + rd.getText(), Toast.LENGTH_LONG).show();
                        break;
                    }
                }
            }
        });

Capture d'écran de l'effet d'exécution :

Analyse du code :Ici, nous définissons un écouteur d'événement setOnClickListener pour le bouton d'envoi. Chaque fois qu'il est cliqué, il parcourt le RadioGroup une fois pour déterminer quel bouton est sélectionné. Nous pouvons obtenir les informations pertinentes du RadioButton grâce aux méthodes suivantes !

getChildCount( ) Obtenir le nombre de boutons radio dans le groupe de boutons ;
getChinldAt(i) Obtenir notre bouton radio en fonction de la valeur de l'index
isChecked( ) Détermine si le bouton est sélectionné

2) CheckBox (case à cocher)

Comme son nom l'indique, une case à cocher permet de sélectionner plusieurs options en même temps. Pour obtenir les valeurs sélectionnées, il existe également deux façons : 1. Ajouter un écouteur d'événement pour chaque CheckBox : setOnCheckedChangeListener 2. Créer un bouton, puis après avoir cliqué dessus, vérifier chaque case à cocher avec isChecked();

Capture d'écran de l'effet d'exécution :

Code d'implémentation :

public class MainActivity extends AppCompatActivity implements View.OnClickListener,CompoundButton.OnCheckedChangeListener{

    private CheckBox cb_one;
    private CheckBox cb_two;
    private CheckBox cb_three;
    private Button btn_send;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cb_one = (CheckBox) findViewById(R.id.cb_one);
        cb_two = (CheckBox) findViewById(R.id.cb_two);
        cb_three = (CheckBox) findViewById(R.id.cb_three);
        btn_send = (Button) findViewById(R.id.btn_send);

        cb_one.setOnCheckedChangeListener(this);
        cb_two.setOnCheckedChangeListener(this);
        cb_three.setOnCheckedChangeListener(this);
        btn_send.setOnClickListener(this);

    }

    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
       if(compoundButton.isChecked()) Toast.makeText(this,compoundButton.getText().toString(),Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onClick(View view) {
        String choose = "";
        if(cb_one.isChecked())choose += cb_one.getText().toString() + "";
        if(cb_two.isChecked())choose += cb_two.getText().toString() + "";
        if(cb_three.isChecked())choose += cb_three.getText().toString() + "";
        Toast.makeText(this,choose,Toast.LENGTH_SHORT).show();
    }
}

2. Effets de clic personnalisés

Bien que les RadioButton et Checkbox après 5.0 semblent un peu plus beaux que les anciennes versions, il se peut que nous ne les aimions toujours pas ou que les exigences demandent des effets de clic personnalisés ! C'est très simple à implémenter. Tout d'abord, écrivez une ressource de sélecteur personnalisée, en définissant les images de bascule pour les états sélectionné et non sélectionné~!

La capture d'écran de l'effet d'implémentation est la suivante :

PS : En raison du matériau utilisé ici, c'est un peu petit...

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_checked="true"
        android:drawable="@mipmap/ic_checkbox_checked"/>
    <item
        android:state_enabled="true"
        android:state_checked="false"
        android:drawable="@mipmap/ic_checkbox_normal" />
</selector>

Une fois écrit, nous avons deux façons de le définir, ou on pourrait dire une seule façon ! Vous verrez en regardant~

① Définir l'attribut android:button sur le sélecteur mentionné précédemment

android:button="@drawable/rad_btn_selctor"

② Définir un attribut dans le style, puis le définir via l'attribut android:style. Tout d'abord, ajoutez le code suivant au style :

    <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/rad_btn_selctor</item>
    </style>

Puis dans la mise en page :

style="@style/MyCheckBox"

3. Modification de la position relative du texte et de la case de sélection

C'est aussi très simple à implémenter. Vous vous souvenez du drawableXxx que nous avons utilisé en apprenant TextView plus tôt ? Pour contrôler la position de la case de sélection, deux étapes suffisent ! Définissez :

Étape 1. android:button="@null"
Étape 2. android:drawableTop="@android:drawable/btn_radio"
Bien sûr, nous pouvons remplacer drawableXxx par notre propre effet préféré !

4. Modification de la distance entre le texte et la case de sélection

Parfois, nous pouvons avoir besoin d'ajuster la distance entre le texte et la case de sélection pour qu'ils paraissent moins serrés. Nous pouvons :
1. Le contrôler dans le code XML : Utilisez android:paddingXxx = "xxx" pour contrôler la distance
2. Dans le code Java, ce qui est un peu mieux, calculer dynamiquement paddingLeft !

L'exemple de code est le suivant :

rb.setButtonDrawable(R.drawable.rad_btn_selctor);
int rb_paddingLeft = getResources().getDrawable(R.mipmap.ic_checkbox_checked).getIntrinsicWidth()+5; 
rb.setPadding(rb_paddingLeft, 0, 0, 0);

Résumé de cette section :

Bon, c'est tout à propos de RadioButton et Checkbox. Si quelque chose est mal écrit ou pas bien, ou si vous avez de bonnes suggestions, n'hésitez pas à les signaler. Je vous en serais extrêmement reconnaissant~ Merci...