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).

        findViewById(R.id.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.

Isto se consegue chamando ao método setOnEditorActionListener e pasando como parámetro un obxecto dunha clase que implemente a interface OnEditorActionListener.

Ao implementar a interface teremos acceso ao método onEditorAction.

Imos cambiar no deseñador a acción que vai ter no teclado virtual o EditText. Marcaremos a acción 'send':

• 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 public class UD03_01_xesteventos_base extends AppCompatActivity {
 2 
 3 
 4     private void xestionarEventosEditText(){
 5         EditText editText = findViewById(R.id.etvTextoEditText);  // Poñemos final para que poidamos acceder a este obxecto dende dentro do método onEditorAction
 6         editText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
 7             @Override
 8             public boolean onEditorAction(TextView textView, int i, KeyEvent keyEvent) {
 9                 // O textView é o texto escrito no EditText. Podemos obter dito texto por calquera dos dous views. Lembrar que a clase EditText deriva de TextView
10                 boolean handled = false;
11                 if (i == EditorInfo.IME_ACTION_SEND) {  // Na clase EditorInfo temos todas as constantes que se identifican con cada tipo de acción
12                     String textoEscrito = textView.getText().toString();
13 
14                     Toast.makeText(getApplicationContext(),textoEscrito,Toast.LENGTH_SHORT).show();
15                     handled = true;
16                 }
17                 return handled;
18             }
19         });
20 
21     @Override
22     protected void onCreate(Bundle savedInstanceState) {
23         super.onCreate(savedInstanceState);
24         setContentView(R.layout.activity_u_d03_01_xesteventos_base);
25 
26         xestionarEventosEditText();
27     }
28 }

• Liña 4: creamos un obxecto (editText) que apunta ao EditText no que se introduce o dato. Fixarse que está declarado como final para poder acceder a el dentro da interface anónima (realmente, para obter o texto escrito non será necesario)
• Liña 6: chamamos a método Listener (escoitador) do obxecto editText: setOnEditorActionListener ()
  • Ese método será chamado cando se realice unha acción nun EditText
  • 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 11-18: sobreescritura do método OnEditorAction() no que se reciben 3 parámetros:
  • O TextView que xerou o evento (v). Neste caso o EditText
  • 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 amosamos o texto escrito.
• Este método devolve un boolean indicando se o evento de premer na tecla do teclado virtual debe ser propagado e que outros controis poidan capturar dito evento (isto se fai facendo un return false) ou se indicamos que dito evento xa foi xestionado e non debe propagarse máis (return true).

• Para que o IDE nos cre a clase anónima:
  • Escribir a chamada ao método (ollo ; final incluído): editText.setOnEditorActionListener( );
  • Escribir new entre os paréntesis: editText.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 ou podemos facer que o faga automaticamente como xa vimos anteriormente nesta Wiki.

• 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).