Diferencia entre revisiones de «CheckBox»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 9 ediciones intermedias de 2 usuarios)
Línea 27: Línea 27:
 
**Introdución ao CheckBox: http://developer.android.com/guide/topics/ui/controls/checkbox.html
 
**Introdución ao CheckBox: http://developer.android.com/guide/topics/ui/controls/checkbox.html
  
 +
<br />
 
==Caso práctico 1==
 
==Caso práctico 1==
  
Línea 35: Línea 36:
  
 
<br />
 
<br />
−
* Dentro do paquete '''Checkboxes''' crear unha nova 'Empty Activity' de nome: '''UD02_01_CkeckBox''' de tipo Launcher e sen compatibilidade.
+
* Dentro do paquete '''Checkboxes''' crear unha nova 'Empty Activity' de nome: '''UD02_01_CkeckBox''' de tipo Launcher.
 
: Modifica o arquivo '''AndroidManifiest.xml''' e engade unha label á activity como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
 
: Modifica o arquivo '''AndroidManifiest.xml''' e engade unha label á activity como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
  
 
   
 
   
  
−
*Imos crear unha aplicación na que o usuario indique as súas afeccións ("Aficiones").
+
* Imos crear unha aplicación na que o usuario indique as súas afeccións ("Aficiones").
 +
: Como aínda non sabemos xestionar os eventos, no método onCreate faremos referencia aos tres checkbox e modificaremos varias propiedades.
  
 
<gallery caption="CheckBox" widths="350" heights="300px" perrow="2">
 
<gallery caption="CheckBox" widths="350" heights="300px" perrow="2">
−
Image:PDM_checkbox_1.jpg | Ao entrar na aplicación non hai ningunha marcada.  
+
Image:PDM_checkbox_base_1.jpg | Arrastramos un chechbox.
−
Image:PDM_checkbox_2.jpg | Cando se selecciona unha afección aparece unha mensaxe nunha caixa de texto indicando o que se seleccionou.
+
Image:PDM_checkbox_base_2.jpg | Cambiamos o texto. Podemos ver outras propiedades do View. O símbolo con guión indica que ten asinado o valor por defecto. Se prememos o cambiamos a true / false.
−
Image:PDM_checkbox_3.jpg | Cando se deselecciona unha afección aparece unha mensaxe nunha caixa de texto indicando o que se deseleccionou.  
+
Image:PDM_checkbox_base_4.jpg | Colocamos os tres CheckBox´s ao noso gusto.
 +
Image:PDM_checkbox_base_3.jpg | Ao executar a activity aparecerán algunhas propiedadades cambiadas e unha mensaxe.
 
</gallery>
 
</gallery>
  
 +
===Código do Layout===
  
−
* Indicar que neste exemplo a xestión de eventos faise asociando no Layout un método da activity ao que vai chamar cando o usuario prema no CheckBox.
+
<syntaxhighlight lang="xml" enclose="div" highlight="">
−
: Esta forma non é aconsellable xa que estamos mesturando o deseño coa programación de eventos. Mirar o <u>Caso Práctico 2</u> para unha correcta xestión do evento.
 
−
 
 
−
<br />
 
−
===Layout xml===
 
−
 
 
−
* <u>Nota:</u> Lembrar que o deseño pódese facer graficamente dende o Android Studio.
 
−
 
 
−
*Cada '''CheckBox''' chama a un método cando se marca ou desmarca ese CheckBox.
 
−
*O método é o mesmo para os tres.
 
−
 
 
−
<syntaxhighlight lang="xml" line highlight="11,18,25">
 
 
<?xml version="1.0" encoding="utf-8"?>
 
<?xml version="1.0" encoding="utf-8"?>
−
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 +
    xmlns:app="http://schemas.android.com/apk/res-auto"
 +
    xmlns:tools="http://schemas.android.com/tools"
 
     android:layout_width="match_parent"
 
     android:layout_width="match_parent"
 
     android:layout_height="match_parent"
 
     android:layout_height="match_parent"
−
     android:orientation="vertical" >
+
     tools:context="cifprodolfoucha.cursoandroid.aprendiendo.UI.Checkboxes.UD02_01_CkeckBox">
  
 
     <CheckBox
 
     <CheckBox
−
         android:id="@+id/chkInformatica_UD02_01_check"
+
         android:id="@+id/chkInformatica"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
−
         android:onClick="controlarAfeccions"
+
         android:layout_marginStart="8dp"
−
         android:text="Informática" />
+
        android:layout_marginTop="8dp"
 +
         android:text="Informática"
 +
        app:layout_constraintStart_toStartOf="parent"
 +
        app:layout_constraintTop_toTopOf="parent" />
  
 
     <CheckBox
 
     <CheckBox
−
         android:id="@+id/chkLer_UD02_01_check"
+
         android:id="@+id/chkLer"
−
        android:layout_width="wrap_content"
 
−
        android:layout_height="wrap_content"
 
−
        android:onClick="controlarAfeccions"
 
−
        android:text="Ler" />
 
−
 
 
−
    <CheckBox
 
−
        android:id="@+id/chkDeporte_UD02_01_check"
 
−
        android:layout_width="wrap_content"
 
−
        android:layout_height="wrap_content"
 
−
        android:onClick="controlarAfeccions"
 
−
        android:text="Deportes" />
 
−
 
 
−
    <EditText
 
−
        android:id="@+id/txtResultado_UD02_01_check"
 
−
        android:layout_width="match_parent"
 
−
        android:layout_height="wrap_content"
 
−
        android:hint="Resultado" />
 
−
 
 
−
</LinearLayout>
 
−
</syntaxhighlight>
 
−
 
 
−
<br />
 
−
===Código Java===
 
−
<syntaxhighlight lang="java" line highlight="13-21">
 
−
package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.CheckBoxes;
 
−
 
 
−
import android.app.Activity;
 
−
import android.os.Bundle;
 
−
import android.view.View;
 
−
import android.widget.CheckBox;
 
−
import android.widget.EditText;
 
−
 
 
−
import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
 
−
 
 
−
public class UD02_01_CkeckBox extends Activity {
 
−
 
 
−
    public void controlarAfeccions(View view) {
 
−
        CheckBox check = (CheckBox) view;
 
−
 
 
−
        EditText caixa = (EditText) findViewById(R.id.txtResultado_UD02_01_check);
 
−
        if (check.isChecked())
 
−
            caixa.setText("Marcaches: "  + check.getText());
 
−
        else
 
−
            caixa.setText("Desmarcaches: "  + check.getText());
 
−
    }
 
−
 
 
−
    @Override
 
−
    protected void onCreate(Bundle savedInstanceState) {
 
−
        super.onCreate(savedInstanceState);
 
−
        setContentView(R.layout.activity_ud02_01__ckeck_box);
 
−
    }
 
−
}
 
−
 
 
−
</syntaxhighlight>
 
−
*'''Liña 13''', recibimos a Vista do elemento pulsado hai que facer un casting para convertelo ao tipo CheckBox.
 
−
*'''Liña 17''', comprobamos se se marcou ou desmarcou o control.
 
−
 
 
−
 
 
−
 
 
−
'''<u>Nota:</u>''' Nos vosos proxectos ides controlar a xestión de eventos implementando a interface na activity.
 
−
 
 
−
 
 
−
 
 
−
<br />
 
−
 
 
−
==Caso práctico 2==
 
−
 
 
−
* Neste caso imos xestionar o evento de cambio de estado do CheckBox implementando a interface correspondente na Activity.
 
−
: Lembrar que [https://wiki.cifprodolfoucha.es/index.php?title=PDM_Xesti%C3%B3n_de_Eventos xa vimos nesta Wiki] as diferentes formas de implementar as interfaces.
 
−
 
 
−
 
 
−
* Partimos que xa temos creado o proxecto inicial como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa indicamos anteriormente].
 
−
: Se non o temos creado antes, crea un paquete de nome '''UI''' como un subpaquete do teu paquete principal.
 
−
: Dentro do paquete UI, crearemos un novo paquete de nome: '''Checkboxes'''.
 
−
 
 
−
 
 
−
<br />
 
−
* Dentro do paquete '''Checkboxes''' crear unha nova 'Empty Activity' de nome: '''UD02_02_CkeckBox''' de tipo Launcher.
 
−
: Modifica o arquivo '''AndroidManifiest.xml''' e engade unha label á activity como [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Creando_proxecto_base xa vimos na creación do proxecto base].
 
−
 
 
−
 
−
* Imos xestionar o evento de Click sobre dúas Checkbox pero empregando a interface [https://developer.android.com/reference/android/widget/CompoundButton.OnCheckedChangeListener OnCheckedChangeListener].
 
−
 
 
−
<br />
 
−
===Layout XML===
 
−
'''Arquivo de Layout:'''
 
−
<syntaxhighlight lang="xml" line highlight="">
 
−
<?xml version="1.0" encoding="utf-8"?>
 
−
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
−
    xmlns:app="http://schemas.android.com/apk/res-auto"
 
−
    xmlns:tools="http://schemas.android.com/tools"
 
−
    android:layout_width="match_parent"
 
−
    android:layout_height="match_parent"
 
−
    tools:context=".UD2.UI.CheckBoxes.UD02_02_CkeckBox">
 
−
 
 
−
    <CheckBox
 
−
        android:id="@+id/chkbox2_UD02_01_Checkbox"
 
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
 +
        android:layout_marginStart="8dp"
 
         android:layout_marginTop="8dp"
 
         android:layout_marginTop="8dp"
−
        android:layout_marginEnd="8dp"
+
         android:text="Ler"
−
         android:text="CheckBox 2"
+
         app:layout_constraintStart_toStartOf="parent"
−
         app:layout_constraintEnd_toEndOf="parent"
+
         app:layout_constraintTop_toBottomOf="@+id/chkInformatica" />
−
         app:layout_constraintTop_toTopOf="parent" />
 
  
 
     <CheckBox
 
     <CheckBox
−
         android:id="@+id/chkbox1_UD02_01_Checkbox"
+
         android:id="@+id/chkDeporte"
 
         android:layout_width="wrap_content"
 
         android:layout_width="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_height="wrap_content"
 
         android:layout_marginStart="8dp"
 
         android:layout_marginStart="8dp"
 
         android:layout_marginTop="8dp"
 
         android:layout_marginTop="8dp"
−
         android:text="CheckBox 1"
+
         android:text="Deportes"
 
         app:layout_constraintStart_toStartOf="parent"
 
         app:layout_constraintStart_toStartOf="parent"
−
         app:layout_constraintTop_toTopOf="parent" />
+
         app:layout_constraintTop_toBottomOf="@+id/chkLer" />
−
</android.support.constraint.ConstraintLayout>
+
</androidx.constraintlayout.widget.ConstraintLayout>
−
</syntaxhighlight>
+
</syntaxhighlight>  
  
  
 
<br />
 
<br />
−
===Código Java===
+
===Código da Activity:===
−
'''Activity UD02_02_CkeckBox'''
 
−
<syntaxhighlight lang="java" line highlight="11,18,19,22-44">
 
  
−
package cifprodolfoucha.cursoandroid.aprendiendo.UD2.UI.CheckBoxes;
+
<syntaxhighlight lang="java" enclose="div" highlight="8-9,11,13-16">
−
 
+
public class UD02_01_CkeckBox extends AppCompatActivity {
−
import android.support.v7.app.AppCompatActivity;
 
−
import android.os.Bundle;
 
−
import android.widget.CheckBox;
 
−
import android.widget.CompoundButton;
 
−
import android.widget.Toast;
 
−
 
 
−
import cifprodolfoucha.cursoandroid.aprendiendo.R;
 
−
 
 
−
public class UD02_02_CkeckBox extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
 
  
 
     @Override
 
     @Override
 
     protected void onCreate(Bundle savedInstanceState) {
 
     protected void onCreate(Bundle savedInstanceState) {
 
         super.onCreate(savedInstanceState);
 
         super.onCreate(savedInstanceState);
−
         setContentView(R.layout.activity_ud02_02__ckeck_box);
+
         setContentView(R.layout.activity_u_d02_01__ckeck_box);
−
 
 
−
        ((CheckBox)findViewById(R.id.chkbox1_UD02_01_Checkbox)).setOnCheckedChangeListener(this);
 
−
        ((CheckBox)findViewById(R.id.chkbox2_UD02_01_Checkbox)).setOnCheckedChangeListener(this);
 
−
    }
 
−
 
 
−
    @Override
 
−
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
 
−
 
 
−
        switch (buttonView.getId()){
 
  
−
            case R.id.chkbox1_UD02_01_Checkbox:    // Aquí iría o código específico para o primeiro checkbox.
+
        CheckBox checkLer = findViewById(R.id.chkLer);    // Obtemos unha referencia ao checbox ler.
−
                if (isChecked){
+
        Toast.makeText(this,checkLer.getText().toString() + " " + String.valueOf(checkLer.isChecked()),Toast.LENGTH_SHORT).show(); // Amosamos unha mensaxe có seu texto e estado
−
                    Toast.makeText(this,"Se activou checkbox1" ,Toast.LENGTH_SHORT).show();
 
−
                }
 
−
                else{
 
−
                    Toast.makeText(this,"Se desactivou  checkbox1" ,Toast.LENGTH_SHORT).show();
 
−
                }
 
−
                break;
 
−
            case R.id.chkbox2_UD02_01_Checkbox:
 
−
                if (isChecked){
 
−
                    Toast.makeText(this,"Se activou  checkbox2" ,Toast.LENGTH_SHORT).show();
 
−
                }
 
−
                else{
 
−
                    Toast.makeText(this,"Se desactivou  checkbox2",Toast.LENGTH_SHORT).show();
 
−
                }
 
−
                break;
 
  
−
         }
+
         ((CheckBox)findViewById(R.id.chkInformatica)).setChecked(true); // Podemos non crear unha variable para gardar a referencia ao checkbox. Neste caso cambiamos o estado do checbox.
  
 +
        CheckBox chkDeportes = findViewById(R.id.chkDeporte);
 +
        chkDeportes.setBackgroundColor(Color.BLUE);  // Cambiamos outras propiedades. Podemos cambiar por programación calquera propiedade do deseñador.
 +
        chkDeportes.setTextColor(Color.RED);
 +
        chkDeportes.setText("NOVA AFICCION");
 
     }
 
     }
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 +
<br />
  
−
<br />
 
 
==Métodos mínimos a coñecer no manexo dos CheckBox==
 
==Métodos mínimos a coñecer no manexo dos CheckBox==
  
Línea 257: Línea 128:
 
:* Engadir novo texto a un existente.
 
:* Engadir novo texto a un existente.
 
:* Modificar propiedades básicas, como cor, tamaño, visibilidade,...
 
:* Modificar propiedades básicas, como cor, tamaño, visibilidade,...
−
:* Xestionar o evento de Click sobre calquera TextView e sabelo facer [https://wiki.cifprodolfoucha.es/index.php?title=PDM_Xesti%C3%B3n_de_Eventos#Xesti.C3.B3n_Eventos:_Empregando_Clases_an.C3.B3nimas
 
  
 
<syntaxhighlight lang="java" highlight="">
 
<syntaxhighlight lang="java" highlight="">
Línea 265: Línea 135:
  
 
         chk.setText("Novo texto Check");                                                                    // Cambiamos o texto do check
 
         chk.setText("Novo texto Check");                                                                    // Cambiamos o texto do check
−
 
−
        chk.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {                      // Asociamos a interface OnCheckedChangeListener
 
−
            @Override
 
−
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
 
−
                Toast.makeText(getApplicationContext(),String.valueOf(b),Toast.LENGTH_LONG).show();        // O parámetro b indica o novo estado do CheckBox
 
−
            }
 
−
        });
 
  
 
         chk.setChecked(true);                                                                              // Cambimos o estado de check (on/off) => Lanza o evento anterior por ter o setOnXXX antes
 
         chk.setChecked(true);                                                                              // Cambimos o estado de check (on/off) => Lanza o evento anterior por ter o setOnXXX antes
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
 +
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
 +
<br />
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
 +
<br />
  
  

Revisión actual del 17:00 15 nov 2020

Introdución

  • Un CheckBox permite ao usuario elixir unha ou máis opcións dentro dun conxunto.

00 checkboxes.png

  • Este control ao igual que ToggleButton e Switch herda da clase CompoundButton, quen, á súa vez, herda da clase Button.

00 Part of Android View Hierarchy.png



  • Por tanto, funcionan da mesma maneira:


  • Tamén podemos xestionar os eventos da mesma forma que nos botóns, coa interface OnClickListener.


  • Para usalo nun XML layout usar a etiqueta <CheckBox/>



Caso práctico 1

Se non o temos creado antes, crea un paquete de nome UI como un subpaquete do teu paquete principal.
Dentro do paquete UI, crearemos un novo paquete de nome: Checkboxes.



  • Dentro do paquete Checkboxes crear unha nova 'Empty Activity' de nome: UD02_01_CkeckBox de tipo Launcher.
Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.


  • Imos crear unha aplicación na que o usuario indique as súas afeccións ("Aficiones").
Como aínda non sabemos xestionar os eventos, no método onCreate faremos referencia aos tres checkbox e modificaremos varias propiedades.

Código do Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cifprodolfoucha.cursoandroid.aprendiendo.UI.Checkboxes.UD02_01_CkeckBox">

    <CheckBox
        android:id="@+id/chkInformatica"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Informática"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/chkLer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Ler"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chkInformatica" />

    <CheckBox
        android:id="@+id/chkDeporte"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Deportes"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chkLer" />
</androidx.constraintlayout.widget.ConstraintLayout>



Código da Activity:

public class UD02_01_CkeckBox extends AppCompatActivity {

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

        CheckBox checkLer = findViewById(R.id.chkLer);    // Obtemos unha referencia ao checbox ler.
        Toast.makeText(this,checkLer.getText().toString() + " " + String.valueOf(checkLer.isChecked()),Toast.LENGTH_SHORT).show();  // Amosamos unha mensaxe có seu texto e estado

        ((CheckBox)findViewById(R.id.chkInformatica)).setChecked(true); // Podemos non crear unha variable para gardar a referencia ao checkbox. Neste caso cambiamos o estado do checbox.

        CheckBox chkDeportes = findViewById(R.id.chkDeporte);
        chkDeportes.setBackgroundColor(Color.BLUE);  // Cambiamos outras propiedades. Podemos cambiar por programación calquera propiedade do deseñador.
        chkDeportes.setTextColor(Color.RED);
        chkDeportes.setText("NOVA AFICCION");
    }
}


Métodos mínimos a coñecer no manexo dos CheckBox

  • Referenciar a un CheckBox có método findViewById.
  • Recuperar o contido do texto asociado.
  • Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
  • Engadir novo texto a un existente.
  • Modificar propiedades básicas, como cor, tamaño, visibilidade,...
        CheckBox chk = findViewById(R.id.chk_Uno);                                                          // Referenciamos a un CheckBox que estea no Layout da Activity

        Toast.makeText(getApplicationContext(),chk.getText() + " " + String.valueOf(chk.isChecked()),Toast.LENGTH_LONG).show();   // Obtemos o texto e estado de check con isChecked()

        chk.setText("Novo texto Check");                                                                    // Cambiamos o texto do check

        chk.setChecked(true);                                                                               // Cambimos o estado de check (on/off) => Lanza o evento anterior por ter o setOnXXX antes



Enlace a la página principal de la UD2

Enlace a la página principal del curso




-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).