Elementos gráficos – CheckBox, RadioButton y otros
Existen una serie de elementos que son básicos a la hora de realizar formularios. En esta entrada se tratarán los checkbox, los radiobutton y otro tipo de componentes de funcionalidad muy parecida
Checkbox
Los checkbox o casillas de verificación son componentes utilizados para poner un elemento en verdadero o falso. Este tipo de elemento es muy utilizado en pantallas de configuraciones. Para poder utilizar un checkbox, su parte gráfica se define de la siguiente forma:
|
1 2 3 4 5 |
<CheckBox android:layout_height="wrap_content" android:text="Opción" android:checked="false" android:id="@+id/checkbox"/> |
Si llevamos el componente a código java, los métodos más utilizados serían:
|
1 2 3 4 |
//para comprobar si está o no chequeado checkBox.isChecked(); //para poner o no chequeado checkBox.setChecked(true); |
Escuchadores para CheckBox
Para poder trabajar con los eventos asociados a un checkbox primero hay que saber cuando se evalúa el valor: en el mismo instante de la pulsación, cuando cambie el valor o cuando un botón del formulario sea pulsado. De forma general. se podrán utilizar los listener setOnClickListener() con el método asociado onClick() o el listener setOnFocusChangeListener con el método asociado onFocusChanged al igual que se realiza con un botón. Si se quiere tratar de forma correcta un checkbox se evaluará el momento del cambio del estado mediante la interfaz OnCheckedChangeListener
|
1 2 3 4 5 6 7 8 9 10 |
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked){ Toast.makeText(getApplicationContext(),"Check seleccionado",Toast.LENGTH_SHORT).show(); } else Toast.makeText(getApplicationContext(),"Check seleccionado",Toast.LENGTH_SHORT).show(); } }); |
El método asociado onCheckedChanged se ejecutará en el instante que se modifique la selección. Dicho método trae como parámetros:
- buttonView: el componente que ha generado en evento
- isCheked: el estado al que ha pasado la selección del checkbox
En el caso que tengamos más de un check para evaluar su evento se utilizará el primer parámetro con un switch
Documentación oficial de OnCheckedChangeListener
RadioButton
El componente radiobutton es muy parecido al anterior, con la diferencia que se trata de una selección única, es decir en el momento en el que se selecciona no podrá ser deseleccionado a no ser que esté dentro de un grupo. La codificación gráfica sería:
|
1 2 3 4 5 6 7 |
<RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Opción" android:id="@+id/radio_button" android:checked="true" /> |
Si llevamos el componente a código java los métodos más utilizados serían los mismos que en el apartado anterior:
|
1 2 3 4 |
//para comprobar si está o no chequeado radioButton.isChecked(); //para poner o no chequeado radioButton.setChecked(true); |
Escuchadores para RadioButton
En el caso de los radiobutton los escuchadores no tienen mucho sentido si los radios van solos, ya que no se suelen utilizar. En el caso de tener la necesidad de utilizarlo estaría disponible el escuchador que se ha explicado antes OnCheckedChangeListener
Grupos
El componente grupo tienen un comportamiento especial, ya que se trata de un contenedor de los dos anteriores elementos. Esto marca la funcionalidad que tan solo un elemento puede estar seleccionado al mismo tiempo, pudiendo marcar un grupo de opciones con respuesta única. la codificación gráfica sería la siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/radio_group"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/radio1_grupo" android:text="Opción 1" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/radio2_grupo" android:text="Opción 2"/> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/radio3_grupo" android:text="Opción 3"/> </RadioGroup> |
Si llevamos el componente a código java, los métodos más utilizados son
|
1 2 3 4 5 6 7 |
radioGroup = (RadioGroup) findViewById(R.id.check_group); //para seleccionar un elemento del grupo radioGroup.check(R.id.radio1_grupo); //obtiene el id del elemento seleccioando int i = radioGroup.getCheckedRadioButtonId(); //para borrar cualquier seleccion radioGroup.clearCheck(); |
El método getCheckedRadioButonId() devuelve el id del elemento seleccionado del grupo, por lo que se podrá reconstruir el elemento y sacar información de el:
|
1 2 3 |
int i = radioGroup.getCheckedRadioButtonId(); RadioButton seleccionado = (RadioButton) findViewById(i); System.out.println(seleccionado.getText()); |
Escuchadores para RadioGroup
Al igual que pasaba con el checkbox, el momento de evaluar el elemento seleccionado del radiogroup va a definir la utilización de un escuchador u otro. En el caso de evaluar el elemento seleccionado cuando se pulse el botón de un formulario se podrá obtener el elemento con el código explicado más arriba. Si hubiese varias opciones de selección el código sería el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
radioGroup = (RadioGroup) findViewById(R.id.radio_group); switch (radioGroup.getCheckedRadioButtonId()){ case R.id.radio1_grupo: //accion cuando el radio1 esta seleccionado break; case R.id.radio2_grupo: //accion cuando el radio2 esta seleccionado break; case R.id.radio3_grupo: //accion cuando el radio3 esta seleccionado break; }; |
Si lo que se quiere es realizar una acción nada más cambiar la selección del grupo, entonces se utilizará el listener setOnCheckedChangeListener, con el método asociado onCheckedChanded(). La codificación sería la siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId){ case R.id.radio1_grupo: //accion cuando el radio1 esta seleccionado break; case R.id.radio2_grupo: //accion cuando el radio2 esta seleccionado break; case R.id.radio3_grupo: //accion cuando el radio3 esta seleccionado break; }; } }); |
El método asociado onCheckedChanged se ejecutará en el instante que se modifique la selección. Dicho método trae como parámetros:
- group: el componente que ha generado el evento
- checkedId: la id del componente que está seleccionado
Documentación oficial de OnCheckedChangeListener para grupos
SeekBar
el componente seekbar se puede definir como un spider que guarda un valor numérico. La codificación visual del este elemento será:
|
1 2 3 4 |
<SeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/seek"/> |
Si llevamos el componente a código java, los métodos más utilizados serían:
|
1 2 3 4 5 6 |
//pone un valor máximo para la barra seekBar.setMax(10); //pone el marcador de la barra en el prograso seleccionado seekBar.setProgress(5); //obtienen un int con el valor seleccionado en la barra seekBar.getProgress(); |
Escuchadores para SeekBar
La seekbar tiene un escuchador propio para cuando cambia el valor actual del elemento. Este listener es OnSeekBarChangeListener con los métodos asociados onProgressChanged, onStartTrackingTouch y onStopTrackingTouch
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { Toast.makeText(getApplicationContext(),"El progreso es: "+String.valueOf(progress),Toast.LENGTH_SHORT).show(); } @Override public void onStartTrackingTouch(SeekBar seekBar) { Toast.makeText(getApplicationContext(),"Se ha empezaso a mover",Toast.LENGTH_SHORT).show(); } @Override public void onStopTrackingTouch(SeekBar seekBar) { Toast.makeText(getApplicationContext(),"Se ha pasado el movimiento",Toast.LENGTH_SHORT).show(); } }); |
El método onProgressChanged se ejecutará en cuanto el progreso cambie. Los parámetros que trae el método son:
- seekBar: el componente que ha generad el evento
- progress: el nuevo progreso que marca el componente
- fromUser: indica que el cambio lo ha producido el usuario
Documentación oficial de OnSeekBarChangeListener
RatingBar
El componente ratingbar se trata de una “barra” de puntuación representada por estrellas. La codificación gráfica sería:
|
1 2 3 4 5 6 |
<RatingBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:stepSize="1" android:id="@+id/rating"/> |
Donde la propiedad numStart representa el número de estrellas que formarán parte del elemento y stepSize representa el intervalo que puede haber entre cada selección. Si llevamos el elemento a código java, los métodos más utilizados serían:
|
1 2 3 4 5 6 |
//pone un valor máximo para la barra ratingBar.setMax(10); //pone el marcador de la barra en el prograso seleecionado ratingBar.setRating(10); //obtienen un float con el valor seleccionado en la barra ratingBar.getRating(); |
Escuchadores para RatingBar
Al igual que pasa con seekbar, el componente ratingbar tienen un escuchador propio para evaluar el momento del cambio. Este listener OnRatingBarChangedListener con el método asociado onRatingChanged
|
1 2 3 4 5 6 |
ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() { @Override public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) { Toast.makeText(getApplicationContext(),"La nueva calificacion es: "+String.valueOf(rating),Toast.LENGTH_SHORT).show(); } }); |
El método onRatingChanged se ejecutará tras seleccionar un nuevo valor en la barra. Los parámetros que trae el método son:
- ratingBar: el componente que ha generad el evento
- rating: el nuevo progreso que marca el componente
- fromUser: indica que el cambio lo ha producido el usuario