PDM Eventos nos views

Introducción

• Neste punto imos ver como xestionar os principais eventos que se poidan producir nos Views que vimos na Unidade 2.

Lembrar que xa está posta nun punto anterior a explicación de como funcionan as interfaces e como asocialas aos Views empregando o método setOnZZZZZZZ correspondente.

• Nota: En moitos controis, o evento principal que ides querer controlar, será o 'Click' sobre o mesmo. Lembrar que xa vimos no punto anterior que o método que rexistra dito evento está definido na clase View e polo tanto ides poder xestionar da mesma forma o evento Click en calquera View que teñades.

Preparando a Activity

• Imos crear unha única Activity onde estarán todos os Views que imos analizar (o ListView/Spinner/RecyclerView serán analizados na Unidade 4.

• Crea un paquete Eventos e dentro del imos crear unha nova 'Empty Activity' de nome: UD03_01_xesteventos_base de tipo Launcher.

Modifica o arquivo AndroidManifiest.xml e engade unha label á activity como xa vimos na creación do proxecto base.

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.aprendiendo.Eventos.UD03_01_xesteventos_base">

    <TextView
        android:id="@+id/txvTextoTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Texto Text View"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etvTextoEditText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:ems="10"
        android:hint="Texto Edit Text"
        android:inputType="textPersonName"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txvTextoTextView" />

    <Button
        android:id="@+id/btnBoton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        android:text="BOTÓN"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageButton
        android:id="@+id/imgbtnImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btnBoton"
        app:srcCompat="@android:drawable/star_on" />

    <CheckBox
        android:id="@+id/chk_Uno"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Check Uno"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etvTextoEditText" />

    <CheckBox
        android:id="@+id/chk_Dos"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Check Dos"
        app:layout_constraintStart_toEndOf="@+id/chk_Uno"
        app:layout_constraintTop_toBottomOf="@+id/etvTextoEditText" />

    <CheckBox
        android:id="@+id/chk_Tres"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Check Tres"
        app:layout_constraintStart_toEndOf="@+id/chk_Dos"
        app:layout_constraintTop_toBottomOf="@+id/etvTextoEditText" />

    <RadioGroup
        android:id="@+id/rgrpGrupoBotons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:checkedButton="@id/rbtnIOpcionA"
        android:orientation="horizontal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chk_Uno">

        <RadioButton
            android:id="@+id/rbtnIOpcionA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Opción A)" />

        <RadioButton
            android:id="@+id/rbtnOpcionB"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Opción B)" />
    </RadioGroup>

    <ToggleButton
        android:id="@+id/tbtnToogleBoton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="ToggleButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/rgrpGrupoBotons" />

    <Switch
        android:id="@+id/swbSwitchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Switch"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tbtnToogleBoton" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabFloatActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@android:drawable/ic_input_add"  />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="114dp"
        android:layout_height="97dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="#AC2727"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/swbSwitchButton"
        app:srcCompat="@android:drawable/btn_star_big_on" />
</androidx.constraintlayout.widget.ConstraintLayout>

TextView

• Neste control poderíamos querer facer algo cando clickeamos sobre o texto.

Evento Click

• Como expliquei anteriormente o evento Click xestionase dende a Interface OnClickListener mediante o método setOnClickListener que se atopa definido na clase View e polo tanto a forma de xestionalo sempre é a mesma.

• Código de exemplo:

public class UD03_01_xesteventos_base extends AppCompatActivity {

    private void xestionarEventosTextView(){
        TextView textView = findViewById(R.id.txvTextoTextView);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                TextView tv = (TextView) view;
                Toast.makeText(getApplicationContext(),"Premiches no texto:" + tv.getText().toString(),Toast.LENGTH_SHORT).show();
                tv.setText("Premiches no TextView");
                tv.setTextColor(Color.BLUE);
                tv.setTextSize(14);
            }
        });
    }

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

Liña 5: Chamamos ao método setOnClickListener para 'asociar' o evento Click ao textview. Enviamos un obxecto que implementa a interface OnClickListener de forma anónima (poderíamos facelo a nivel de Activity como xa vimos no punto anterior desta Wiki].

Liña 8: O view sabemos que é o TextView sobre o que premimos.

Liña 21: Para que quede con un pouco de orde imos crear un método para xestionar cada un dos views (nunha aplicación non faría falla).

• Resultado:

EditText

• Neste view normalmente non queremos xestionar un evento de Click sobre el (se pode facer igual que no caso anterior).

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

• Un evento que se podería querer controlar é a tecla do teclado virtual que indica unha acción.

• Codificación en Java que captura a acción actionSend dun campo de texto (email) e o que fai e recoller o texto desa caixa de texto, o e-mail, e volver a imprimir unha mensaxe nesa mesma caixa de texto.

 1 package es.cursoandroid.cifprodolfoucha.aprendiendo.UI.EditTexto;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.KeyEvent;
 6 import android.view.inputmethod.EditorInfo;
 7 import android.widget.EditText;
 8 import android.widget.TextView;
 9 
10 import es.cursoandroid.cifprodolfoucha.aprendiendo.R;
11 
12 public class UD02_01_EditText extends Activity {
13 
14 	@Override
15 	protected void onCreate(Bundle savedInstanceState) {
16 		super.onCreate(savedInstanceState);
17 		setContentView(R.layout.activity_u2_08_edit_text);
18 		
19 		
20 		final EditText etMail = (EditText) findViewById(R.id.et_mail);
21 
22 		etMail.setOnEditorActionListener(new OnEditorActionListener() {
23 		    @Override
24 		    public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
25 		        boolean handled = false;
26 		        if (actionId == EditorInfo.IME_ACTION_SEND) {
27 		            v.setText("Mensaxe enviada a: "+v.getText());
28    			    //etMail.setText("Mensaxe enviada a: " + etMail.getText());        
29 		            handled = true;
30 		        }
31 		        
32 		        return handled;
33 		    }
34 		});
35 		
36 	}
37 
38 }

• Liña 20: creamos un obxecto (etMail) que apunta ao EditText no que se introduce o mail.
• Liña 22 - 33: chamamos a método Listener (escoitador) (que veremos máis adiante) do obxecto etMail: setOnEditorActionListener ()
  • Ese método será chamado cando se realice unha acción nun TextView
  • Lembrar que un EditText é unha subclase de TextView
  • Por exemplo, cando se prema unha tecla ou cando haxa unha acción IME seleccionada polo usuario.
  • Como parámetro váiselle pasar a creación dunha clase anónima que implementa unha interface (OnEditorActionListener) para a cal hai que sobreescribir o único método que ten a interface (onEditorAction()).

• Liñas 24-29: sobreescritura do método OnEditorAction() no que se reciben 3 parámetros:
  • O TextView que xerou o evento (v). Neste caso a caixa de texto do mail
  • O ID da acción enviada
  • E se o evento foi xerado pola tecla Enter ou non (event).
  • Comprobamos se o ID da acción é o SEND, nese caso modificamos o contido da caixa de texto do mail.

• Liña 28: realiza a mesma función ca 27. Lembrar que v é un TextView que apunta á caixa de edición do mail e que etMail é un EditText que apunta ao mesmo elemento.

• Para que o IDE nos cre a clase anónima:
  • Escribir a chamada ao método (ollo ; final incluído): etMail.setOnEditorActionListener( );
  • Escribir new entre os paréntesis: etMail.setOnEditorActionListener(new );
  • Premer CTRL+Barra espaciadora e xa o sistema completa todo o demais.
  • Logo só queda poñer o noso código no método a sobreescribir.

• Lembrar premer SHIFT+CTRL+O para importar os paquetes correspondentes.

• Acción Send
• 

  Ao premer en Send

• 

  O sistema captura o evento e envía unha mensaxe a o mesma caixa de texto.

Eventos mínimos a coñecer no EditText

• Xestionar o evento de Click sobre calquera EditText e sabelo facer empregando interfaces anónimas ou implementando a interface na Activity. Como dixen anteriormente no será habitual que o necesitemos.

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

Button

• O principal evento que queremos xestionar nun botón é o Click sobre o mesmo.

Dito evento está asociado á interface OnClickListener.

ListView-Spinner

• A xestión de eventos destes controis o veremos na UD4-Adaptadores.

Enlace a la página principal de la UD3

Enlace a la página principal del curso

-- Ángel D. Fernández González -- (2020).