View di base ed eventi

Dopo aver analizzato i vari tipi di layout che è possibile utilizzare per posizionare le viste all’interno di un’activity, adesso è il momento di dare un’occhiata ai vari tipi di viste che possiamo utilizzare per realizzare l’interfaccia utente delle nostre applicazioni. Le viste corrispondono, ad esempio, ai controlli delle applicazioni Microsoft.NET.

Andiamo ad analizzare più in dettaglio alcune delle viste di base:

TextView – Viene utilizzata per mostrare un testo all’utente

EditText – Viene utilizzata per consentire all’utente di inserire testo

Button – Rappresenta un pulsante

ImageButton – Rappresenta un pulsante con un’immagine

CheckBox – Rappresenta un quadratino con due possibili stati: selezionato (checked) o non selezionato (unchecked)

RadioButton – Rappresenta una casella che può essere selezionata o meno

RadioGroup – Raggruppa più RadioButton in modo che al suo interno solo uno di essi possa essere selezionato in un determinato momento

ToggleButton – Mostra il proprio stato di selezione mediante un indicatore luminoso

Quando creiamo un nuovo progetto Android Studio genera sempre un file denominato main.xml (o activity_main.xml) collocato nella cartella res/layout, che contiene un elemento TextView

<TextView
    android:text="Hello World!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Avviamo Android Studio e creiamo un nuovo progetto denominato TestView. Modifichiamo il file activity_main.xml nel modo seguente

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >


    <Button android:id="@+id/btnApri"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Apri" />
    
    <EditText android:id="@+id/txtNome"
    android:layout_width="fill_parent"
      android:layout_height="wrap_content" />
    
    <CheckBox android:id="@+id/chkSalvaAuto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Salva automaticamente" />
    
    <RadioGroup android:id="@+id/rdbGp1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <RadioButton android:id="@+id/rdb1"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Scelta 1" />
    <RadioButton android:id="@+id/rdb2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Scelta 2" />
  </RadioGroup>
    
    <ToggleButton android:id="@+id/toggle1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    
    
    <Button android:id="@+id/btnSalva"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Salva" />
    
</LinearLayout>

Per visualizzare il risultato grafico di queste impostazioni effettuiamo il debug sull’emulatore di Android Studio premendo la combinazione di tasti Maiusc+F10. Il risultato è il seguente

Agendo sulle varie viste, ad esempio spuntando il checkbox, scrivendo qualcosa nell’edittext e così via, vedremo come questi elementi rispondono alle nostre interazioni

In questo esempio le varie viste sono disposte in un layout di tipo LinearLayout, in modo che siano disposte una sopra l’altra. In ogni vista sono impostati i vari parametri di visualizzazione, ad esempio per l’edittext l’attributo layout_height è impostato al valore wrap_content in modo che se l’utente inserisce un testo molto lungo la sua altezza venga automaticamente adattata per visualizzare tutto il contenuto

Soffermiamoci un momento sulla vista radiogroup, che come abbiamo detto raggruppa più radiobutton. Possiamo verificare che quando selezioniamo uno dei due radiobutton l’altro perde la selezione e ciò avviene anche se definiamo più radiobutton all’interno di questa vista

Gestione degli eventi

Il passo successivo al posizionamento delle viste all’interno di un’activity è quello di scrivere il codice per controllare il loro comportamento. Apriamo il file java relativo alla nostra activity e scriviamo al suo interno il codice per gestire l’evento click dei button, del checkbox, dei radiobutton e del togglebutton

package com.example.test.testview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends Activity {

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

        //---Button Apri---
        Button btnApri = (Button) findViewById(R.id.btnApri);
        btnApri.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                Toast.makeText(getBaseContext(), "Click pulsante Apri",
        Toast.LENGTH_SHORT).show();
            }
        });

        //---Button Salva---
        Button btnSalva = (Button) findViewById(R.id.btnSalva);
        btnSalva.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {Toast.makeText(getBaseContext(), 
      "Click pulsante Salva",
      Toast.LENGTH_SHORT).show();
            }
        });

        //---CheckBox---
        CheckBox checkBox = (CheckBox) findViewById(R.id.chkSalvaAuto);
        checkBox.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v) {

                if (((CheckBox)v).isChecked())
                    Toast.makeText(getBaseContext(), "Checkbox selezionata",
          Toast.LENGTH_SHORT).show();
                else
                    Toast.makeText(getBaseContext(), "Checkbox non selezionata",
          Toast.LENGTH_SHORT).show();
            }
        });

        //---RadioGroup---
        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
        {
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
                RadioButton rb2 = (RadioButton) findViewById(R.id.rdb2);
                RadioButton rb3 = (RadioButton) findViewById(R.id.rdb3);
                RadioButton rb4 = (RadioButton) findViewById(R.id.rdb4);

                if (rb1.isChecked())
                    Toast.makeText(getBaseContext(), "Radiobutton1 selezionato",
          Toast.LENGTH_SHORT).show();
                else if (rb2.isChecked())
                    Toast.makeText(getBaseContext(), "Radiobutton2 selezionato",
          Toast.LENGTH_SHORT).show();
                else if (rb3.isChecked())
                    Toast.makeText(getBaseContext(), "Radiobutton3 selezionato",
          Toast.LENGTH_SHORT).show();
                else if (rb4.isChecked())
                    Toast.makeText(getBaseContext(), "Radiobutton4 selezionato",
          Toast.LENGTH_SHORT).show();
                else
                    Toast.makeText(getBaseContext(), "Radiobutton5 selezionato",
          Toast.LENGTH_SHORT).show();
            }
        });

        //---ToggleButton---
        ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle1);
        toggleButton.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v) {
                if (((ToggleButton)v).isChecked())
                    Toast.makeText(getBaseContext(), "Togglebutton attivato",
          Toast.LENGTH_SHORT).show();
                else
                    Toast.makeText(getBaseContext(), "Togglebutton disattivato",
          Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Avviamo nuovamente l’applicazione sull’emulatore e visualizziamo i vari messaggi che vengono mostrati al click delle varie viste. Ecco ad esempio il messaggio che compare quando attiviamo il togglebutton

Analizziamo il codice java che abbiamo appena visto. Per gestire gli eventi di ciascuna vista è necessario per prima cosa individuare univocamente ognuna di esse nell’evento onCreate. Per fare questo si deve utilizzare il metodo findViewById, passando come parametro allo stesso il riferimento alla vista che ci interessa gestire.

Tramite il metodo setOnClickListener viene registrata una chiamata che deve essere effettuata quando il componente viene cliccato, più precisamente una chiamata al metodo onClick. Questo vale per i button, per il checkbox e per il togglebutton. Per i radiobutton invece si utilizza il metodo setOnCheckedChangeListener per registrare una chiamata al metodo onCheckedChanged quando lo stato di una di queste viste cambia.

Esiste anche un’alternativa per la gestione degli eventi delle viste. Prendendo ad esempio una delle viste button (in questo caso il button Salva), bisogna aggiungere l’attributo onClick nel file xml

<Button android:id="@+id/btnSalva"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/Salva"
android:onClick="btnSalva_clicked"/>

L’attributo onClick serve a configurare l’evento click del button. Il valore di questo attributo è il nome del relativo gestore dell’evento. Quindi a questo punto per gestire il metodo click del button basta definire un metodo denominato btnSalva_clicked all’interno della classe java dell’activity

public void btnSalva_clicked (View view) 
{
Toast.makeText(getBaseContext(), "Click pulsante Salva",Toast.LENGTH_SHORT).show();
}

Chiaramente questo secondo approccio è più semplice ma il primo permette di comprendere meglio il funzionamento degli eventi legati alle viste.