Button. ToggleButton. Control de eventos II

De MediaWiki
Ir a la navegación Ir a la búsqueda

Introdución

  • Os botóns (button) permiten ao usuario indicar á aplicación que realice unha acción.
  • Os botóns poden ter Texto, unha imaxe ou as dúas cousas:
  • Ben o texto ou a imaxe comunican claramente ao usuario cal é a función do botón.

00 button-types.png


  • Estes controles son subclases de:
    • Button de TextView
    • ToogleButton de CompoundButton
    • ImageButton de ImageView (que se verá proximamente)

00 Part of Android View Hierarchy.png



  • Observar como se definen os tres tipos de botóns anteriores:
  • Botón con texto:
1 <Button
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:text="@string/button_text"
5     ... />


  • Botón con imaxe
1 <ImageButton
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:src="@drawable/button_icon"
5     ... />


  • Botón con texto e imaxe. A propiedade android:drawableLeft indica onde se sitúa a imaxe.
1 <Button
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:text="@string/button_text"
5     android:drawableLeft="@drawable/button_icon"
6     ... />


  • Os botóns teñen unha propiedade android:onClick="oMeuMetodo" que nos permite chamar ao método indicado cando o pulsamos.
    • Ese método hai que declaralo en Java como public void oMeuMetodo (View v) { ... }
    • Recibe o obxecto View de quen o chamou.


  • Os botóns (Button) son subclases de TextView.


Botóns de 2 estados: ToggleButton/Switch

  • Existe outro tipo de botón de 2 estados (ON/OFF).
  • Un máis básico: <ToggleButton>

00 togglebutton.png

  • E outro máis avanzado (versión Android 4.0 ou superior): <Switch/>

00 switch.png

    • Permiten cambiar o seu estado desprazando co dun estado a outro. O funcionamento é semellante ao control ToogleButton.


  • Un obxecto ToogleButton/Switch herda da clase CompoundButton, quen, á súa vez, herda da clase Button.
  • Por tanto funcionan da mesma maneira, pero ademais o este tipo de botóns:
    • ten 2 estados (True/False), que pode podemos comprobar co método isChecked ()
    • Para cada estado podemos amosar un texto distinto no botón: android:TextOn e android:TextOFF.
Para que o texto apareza debe cambiarse a propiedade showText a true. A nivel de deseño non se recomenda o emprego do texto se estamos empregando un Material Theme.


Casos prácticos

Lembrar que se estades a empregar as bibliotecas de compatibilidade (por defecto), a vosa activity derivará de AppCompactActivity e non de Activity
Nos exemplos seguintes toda activity deriva de Activity, pero o normal é que empregedes AppCompactActivity (coidado ao copiar os exemplos).


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: Buttons.



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


  • Imos crear 3 botóns:
    • 1 Botón con texto
    • 1 ToogleButton
    • 1 botón con imaxe


  • Tres botóns

  • Cando entremos na aplicación este será o seu estado.

  • Se prememos o primeiro botón (Texto) amosarase un texto en pantalla.

  • Se prememos o segundo botón (ToogleButton) amosarase outro texto en pantalla e o botón cambiará o seu estado e o texto do mesmo.

  • Se o volvemos pulsar amosa outro texto e volve cambiar o estado.

  • Se prememos o terceiro botón (Imaxe) amosarase de novo un texto diferente.



Creación do layout

  • O layout XML ten 3 botóns e 1 TextView:
  • Observar como hai un layout dentro doutro: un dispón os elementos en vertical e o outro en horizontal.
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
 7 
 8     <LinearLayout
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content"
11         android:orientation="horizontal" >
12 
13         <Button
14             android:id="@+id/btnBoton_UD02_01_buttons"
15             android:layout_width="150sp"
16             android:layout_height="wrap_content"
17             android:text="Preme aquí" >
18         </Button>
19 
20         <ToggleButton
21             android:id="@+id/tbtnDosEstados_UD02_01_buttons"
22             android:layout_width="100dp"
23             android:layout_height="match_parent"
24             android:textOff="Apagado"
25             android:textOn="Aceso" >
26         </ToggleButton>
27 
28         <ImageButton
29             android:id="@+id/ibtnImagen_UD02_01_buttons"
30             android:layout_width="55sp"
31             android:layout_height="50sp"
32             android:scaleType="fitXY"
33             android:src="@drawable/ic_launcher_foreground" >
34         </ImageButton>
35     </LinearLayout>
36 
37     <TextView
38         android:id="@+id/txtTv_accion_UD02_01_Buttons"
39         android:layout_width="wrap_content"
40         android:layout_height="wrap_content"
41         android:text="@string/texto_tv_string" />
42 
43 </LinearLayout>


  • Se cargamos este layout e non realizamos ningunha codificación en Java, non vai pasar nada cos botóns:
Isto é debido a que non temos codificado ningunha acción para cando se preme en cada un deles.



Empregando gráficos SVG cun ImageButton

  • Se queremos empregar gráficos vectoriais podemos 'cargalos' no noso proxecto coa ferramenta Vector Asset:
  • Empregando gráficos svg

  • Lanzamos a ferramenta Vector Asset

  • Escollemos o arquivo svg descargado. Indicamos o tamaño do gráfico en dp´s e o nome do mesmo.

  • Indica onde vai a gardar o gráfico e con que arquivo (fixarse que xera un arquivo XML).

  • O arquivo XML xerado no cartafol drawable.

  • Un ImageButton coa icona asociada.



Eventos

  • Para asociar un evento a un botón, podemos facelo:
  • Asociando, como vimos na xestión de eventos, unha interface a cada botón e rexistrando o evento que queiramos controlar (nesta caso dun click).
  • No caso dos botón, podemos facelo no layout da activity.


  • Tamén podemos xestionar o evento de cando cambie o seu estado (cando cambia de on/off) coa chamada ao método setOnCheckedChangeListener(OnCheckedChangeListener). A diferenza con respecto á anterior é que soamente se chamará cando cambiamos de estado, mentres que se o facemos como no caso dos botóns, coa Interface OnClickListener, o chamará sempre que o prememos.


  • Nesta ocasión imos ver dun xeito sinxelo como capturar os eventos dos botóns.
  • Un evento é algo que acontece nun control e que nos interesa capturar no sistema para desencadear (ou non) unha serie de accións.
  • Xa vimos no caso anterior (EditText) que podíamos controlar eventos que acontecen nos controis.



Control de eventos dende o layout

  • É a forma máis sinxela de desencadear unha acción pero non é a mais aconsellable xa que estamos a mesturar o deseño coa programación de eventos.
  • Imos facelo de dúas formas:
    • Creando un método para cada Botón.
    • Creando un único método para tódolos botóns. Hai que controlar que botón foi o que se premeu.
  • O que temos que facer é a nivel gráfico, no deseñador, ir a propiedade onClick do botón e escribir o nome do método ao que queremos que chame cando se preme no botón.
PDM xesteventos base 6.jpg
  • Agora a nivel de código temos que definir un método con ese nome o un parámetro de tipo View da forma:
public class UD03_01_xesteventos_base extends AppCompatActivity {

    public void presBoton(View v){
        Button boton = (Button)v;
        Toast.makeText(getApplicationContext(),"Premiches o botón con texto " + boton.getText().toString(),Toast.LENGTH_SHORT).show();
    }

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


  • O parámetro v é o view que provoca o evento click.
A través del é como sabemos que botón é pulsado se temos varios botóns no deseñador có mesmo nome de método na propiedade onClick.



Nota: Lembrar eliminar a propiedade onClick do deseñador para continuar có manual.

Control de eventos usando un listener

  • Xa o vimos na xestión de eventos que podemos xestionar os eventos facendo uso dunha clase anónima que implemente a interface ou implementar a interface na Activity.
Queda como tarefa para o alumno, implementar a xestión de eventos deste exercicio facendo uso das interfaces (lembrar quitalo do layout).


  • Lembrar que esta será a forma obrigatoria de facelo.



Métodos mínimos a coñecer no manexo dos Button´s e variantes

Todos os Buttons: Button, FloatActionButton, ToogleButton, Switch

  • Referenciar a un button có método findViewById.
  • Recuperar o contido do texto.
  • Cambiar o contido do texto, podendo empregar recursos gardados en /res/values.
  • Modificar propiedades básicas, como cor, tamaño, visibilidade,...(e os métodos getZZZZZ para obter os seus valores)
  • Xestionar o evento de Click sobre calquera Button e sabelo facer empregando interfaces anónimas ou implementando a interface na Activity.


Exemplos cun Button, pero aplicables a calquera tipo de Button: 
        Button btn = findViewById(R.id.btnBoton);            // Referenciamos a un botón que estea no Layout da Activity
        String cadeaet = btn.getText().toString();           // Fixarse que getText() devolve un obxecto Editable, non un String.
        btn.setText("Cambiamos o texto directamente");       // Cambiamos o contido por unha cadea concreta
        String textoRes = getResources().getString(R.string.app_name);
        btn.setText(textoRes + " texto que ven da BD");      // Se queremos concatenar texto dunha base de datos cun texto que poida ser traducido

        btn.setTextSize(20);                                 // Axustar tamaño do texto

        btn.setTextColor(Color.BLUE);                        // Cambia a cor

        btn.setVisibility(View.VISIBLE);                     // As constantes aparecen no Android Studio ao teclear. GONE fai que non ocupe espazo no Layout.

        btn.setOnClickListener(new View.OnClickListener() {  // Xestionamos o evento de Click cunha interface anónima
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"Botón Pulsado",Toast.LENGTH_LONG).show();
            }
        });



Switch - ToogleButton

  • Obter o estado do botón (ON / OFF).
  • Cambiar o estado do botón (ON / OFF)
  • Cambiar o texto do SwitchButton
  • Capturar o evento que se produce cando hai un cambio de estado (diferente a facer un click, podemos facer click sobre o mesmo estado moitas veces e non hai cambio de estado).
        ToggleButton tbtn = findViewById(R.id.tbtnToogleBoton);                          // Referenciamos a un botón que estea no Layout da Activity
        Toast.makeText(this,String.valueOf(tbtn.isChecked()),Toast.LENGTH_LONG).show();  // isChecked() devolve true/false

        tbtn.setChecked(true);                                      // Cambiamos o estado por programación

        tbtn.setText("NOVO TEXTO TOGGLE");                          // Cambiamos o texto

        tbtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  // Ao cambiar o estado ON-OFF chama ao método onCheckedChanged
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {    // Ao ser unha interface anónima, compoundButton é tbtn. Se escollemos a opción de xestionar os eventos na Activity, empregando dito obxecto.getId() podemos identificar o botón
                Toast.makeText(getApplicationContext(),String.valueOf(b),Toast.LENGTH_LONG).show(); // o parámetro b indica o novo estado do ToggleButton
            }
        });
Para o Switch é exactamente igual. 
        Switch sw = findViewById(R.id.swbSwitchButton);                                         // Referenciamos a un botón que estea no Layout da Activity
        Toast.makeText(this,String.valueOf(sw.isChecked()),Toast.LENGTH_LONG).show();           // isChecked() devolve true/false

        sw.setChecked(true);                                                                    // Cambiamos o estado por programación

        sw.setText("NOVO TEXTO SWITCH");                                                        // Novo texto do switch

        sw.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {            // Ao cambiar o estado ON-OFF chama ao método onCheckedChanged
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {            // Ao ser unha interface anónima, compoundButton é sw. Se escollemos a opción de xestionar os eventos na Activity, empregando dito obxecto.getId() podemos identificar o botón
                Toast.makeText(getApplicationContext(),String.valueOf(b),Toast.LENGTH_LONG).show(); // o parámetro b indica o novo estado do ToggleButton
            }
        });



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

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Button._ToggleButton._Control_de_eventos_II&oldid=11293»