CheckBox

Explicación del concepto de CheckBox.

CheckBox  |  Android DevelopersAndroid Developers

Fuente: developer.android

DEFINICIÓN

Hereda de:

Herencia CheckBox

Un CheckBox es un tipo concreto de botón que tiene dos estados, puede encontrarse marcado (checked) o desmarcado (unchecked).

Al contrario que los RadioButton, los CheckBox no se suelen utilizar en ningún ViewGroup específico y, por tanto, pueden encontrarse varios de ellos en la misma aplicación y el estado de uno no afecta al estado de los demás.

USO DESDE XML

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="30dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Seleccione sus gustos musicales:"
        android:paddingBottom="30dp"/>

    <CheckBox
        android:id="@+id/cbPop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Pop"/>
    <CheckBox
        android:id="@+id/cbRock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Rock"/>
    <CheckBox
        android:id="@+id/cbRap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Rap"/>
    <CheckBox
        android:id="@+id/cbTrap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Trap."/>
    <CheckBox
        android:id="@+id/cbClassic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Clásica"/>
</LinearLayout>

ATRIBUTOS

android:checked

Heredado de TextView.

indica que el CheckButton se encuentra en el estado de marcado.

android:enabled

Heredado de TextView.

Indica que el CheckButton se ve y se puede pulsar o se vé pero no se puede pulsar.

PROGRAMAR EVENTOS DESDE CÓDIGO

La programación de eventos para los CheckBox no tiene ninguna dificultad con respecto a los que hemos visto anteriormente por lo que solamente vamos a ver el código:

MainActivity.kt

package com.example.android.appdeejemplo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.CheckBox
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val cbList: List<CheckBox> = listOf(
            findViewById(R.id.cbPop),
            findViewById(R.id.cbRock),
            findViewById(R.id.cbRap),
            findViewById(R.id.cbTrap),
            findViewById(R.id.cbClassic)
        )
        for (i in cbList) {
            i.setOnClickListener{
                onCheckBoxClicked(it)
            }
        }
    }
    fun onCheckBoxClicked(view: View){
        val cb = view as CheckBox
        if (cb.isChecked) {
            Toast.makeText(this, "Le gusta la ${cb.text}", Toast.LENGTH_SHORT).show()
        } else {
            Toast.makeText(this, "No le ha convencido la ${cb.text}", Toast.LENGTH_SHORT).show()
        }
    }
}

Como ven, también se pueden utilizar estructuras de datos como listas de Kotlin para hacer referencia a varias Views aunque no se encuentren en el mismo ViewGroup.

PERSONALIZACIÓN

Personalizar botón

cb_music_off / cb_music_on

Para personalizar un CheckBox podemos hacer uso de las listas de estados para crear un drawable que se ejecute cuando el CheckBox se encuentre en estado checked y otro cuando se encuentre en el estado unchecked.

Esto ya se ha explicado anteriormente así que vamos directamente a ver el código:

cb_music.xml

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

cb_music_off.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportHeight="48"
    android:viewportWidth="48">

    <group
        android:scaleX=".2"
        android:scaleY=".2"
        android:translateX="6"
        android:translateY="6">
        <group
            android:scaleX="7.5"
            android:scaleY="7.5">
            <path
                android:fillColor="#6E6E6E"
                android:pathData="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
        </group>
    </group>
</vector>

cb_music_on.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportHeight="48"
    android:viewportWidth="48">

    <group
        android:scaleX=".2"
        android:scaleY=".2"
        android:translateX="6"
        android:translateY="6">
        <group
            android:scaleX="7.5"
            android:scaleY="7.5">
            <path
                android:fillColor="#45D0BB"
                android:pathData="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />

        </group>
        <group
            android:translateY="17"
            android:scaleX="7"
            android:scaleY="6">
            <path
                android:fillColor="#45D0BB"
                android:pathData="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V7H18V3H12Z" />
        </group>
    </group>
</vector>

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="30dp"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Seleccione sus gustos musicales:"
        android:paddingBottom="30dp"/>
    <CheckBox
        android:id="@+id/cbPop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Pop"
        android:checked="true"
        android:button="@drawable/cb_music"/>
    <CheckBox
        android:id="@+id/cbRock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Rock"
        android:button="@drawable/cb_music"/>
    <CheckBox
        android:id="@+id/cbRap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Rap"
        android:button="@drawable/cb_music"/>
    <CheckBox
        android:id="@+id/cbTrap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Trap"
        android:button="@drawable/cb_music"/>
    <CheckBox
        android:id="@+id/cbClassic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="música Clásica"
        android:button="@drawable/cb_music"/>
</LinearLayout>