Senza categoria

[DEV] – Tutorial Android : Hello world avanzato

Partiamo con lo sviluppo di una semplice applicazione per illustrare alcuni concetti base del sistema operativo e dell’ SDK messo a disposizione da google per lo sviluppo di applicazioni in ambiente android (e di conseguenza anche per il nostro nexus One).

Nel nostro esempio andremo a creare un programma che mostra a video due caselle di testo ed un pulsante, alla pressione del pulsante comparirà un tooltip che mostrerà un messaggio con il testo ottenuto concatenando il testo delle due caselle di input. Lo scopo dell’esempio è quello di mostrare come far interagire una activity con le varie View all’interno della form

Questo ci consentirà di vedere successivamente il ciclo di vita di un programma ed altre parti importanti per la notifica di messaggi a video (tooltip o Toast).

L’ Activity principale del programma è MainActivity che estende la classe  com.android.Activity e ne ridefinisce i metodi principali. Il file XML che invece descrive la form associata all’activity è main.xml riportato di seguito:

[xml]

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

<TextView  android:layout_width="fill_parent"  android:layout_height="wrap_content"
android:text="@string/hello" />

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Numero: " android:paddingTop="20dip"  />

<EditText android:id="@+id/numero"  android:layout_width="fill_parent" android:layout_height="wrap_content"
android:inputType="number"     android:imeOptions="actionNext" />

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Nome: " android:paddingTop="20dip"/>
<EditText android:id="@+id/nome"  android:layout_width="fill_parent"
android:layout_height="wrap_content" />

<!– Pulsante di attivazione –>
<Button android:id="@+id/main_btnok" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="@string/btn_procedi"  android:onClick="onBtnProcedi" />

</LinearLayout>

[/xml]

La form è composta principalmente da un layout che si sviluppa in verticale per tutta la dimensione dello schermo (sia orizzontale che verticale). Al suo interno si trovano nell’ordine:

  • Un campo di testo di sola lettura (una lebel in pratica) che contiene il testo definito nella stringa “hello” (in pratica l’hello world).
  • Un’altra label che contiene la stringa “Numero:” (si noti che questa non è localizzata cioè non è definita come risorsa all’interno del file string.xml)
  • Un campo di testo (associato all’ id ‘Numero’) che si sviluppa in orizzontale per tutta la lunghezza della form a cui è associato un tipo di input numerico (quindi sarà possibile inserire solo numeri) ed un tipo di tastiera con il pulsante di azione “Next” (o “Avanti”)
  • Un’altra label con il testo “Nome”
  • Un campo di input con id ‘nome’ dove sarà possibile inserire un testo alfanumerico
  • Un pulsante con id ‘main_btnok’ con testo associato alla risorsa ‘string/btn_procedi’ e metodo di callback ‘onBtnProcedi’

Le cose importanti da notare in questo file XML sono:

  • La scelta del tipo di input fatta sul campo ‘numero’ che consente di inserire solo numeri, questa scelta condiziona il tipo di tastiera che sarà visualizzata di default. Infatti android mostra una tastiera diversa a seconda del tipo di dato che si deve inserire (testo, numeri, sms, email).
  • L’attributo onClick sul pulsante che consente di definire un metodo (che deve avere un tipo di ritorno void ed un unico input di tipo View) che deve essere eseguito alla pressione del pulsante. Questo evita noiose registrazioni a listener e definizioni di metodi inutili.

Passando alla implementazione della Activity abbiamo:

[java]
public class MainActivity extends Activity {

EditText txtNome = null;
EditText txtNumero = null;
Button btnProcedi = null;

[/java]

Che definisce l’activity e tre sue proprietà. In generale è buona norma definire all’interno dell’activity tutte le risorse che fanno parte della view che si visualizzerà. Sarà poi cura del metodo onCreate di far puntare correttamente ogni variabile alla corretta implementazione di view.

[java]

/** Chiamato quando l’activity viene chiamata  per la prima volta
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Associa un layout alla view
setContentView(R.layout.main);

// Recupero i dati dei componenti
txtNumero = (EditText) findViewById(R.id.numero);
txtNome = (EditText) findViewById(R.id.nome);

// Questo non e’ realmente necessario (grazie all’uso dell’attributo onClick)
btnProcedi = (Button) findViewById(R.id.main_btnok);

Log.d(getClass().getName(), "Activity Creata");
}

[/java]

Il metodo onCreate imposta la view da visualizzare (metodo setContentView) a questo punto è possibile recuperare dalla view i riferimenti alle variabili della form attraverso i metodi findViewById (Attenzione, non è possibile farlo prima dato che alla view non è stata associato alcun layout e quindi, qualsiasi invocazione del mtoto findViewByID restituirebbe null).

Il metodo termina con una operazione di LOG  utilizzando la classe di Log predefinita di Android,  per tracciare un messaggio di avvenuta creazione.

L’ultima operazione da descrivere è la pressione del pulsante che, quando avviene, scatena l’invocazione del metodo definito come attributo onClick del tag Button all’interno del file Xml descrittivo della View.

[java]

public void onBtnProcedi(View v) {
Toast toast = Toast.makeText(getBaseContext(), null, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.setText(txtNumero.getText() + " – " + txtNome.getText());
toast.show();
}

[/java]

All’invocazione di questo metodo viene creato un oggetto Toast responsabile della visualizzazione di un messaggio di tooltip. Il secondo parametro è destinato a contenere il messaggio da visualizzare, ma siccome l’obiettivo è quello di comporre il messaggio dinamicamente, in fase di costruzione viene passato il valore null e subito dopo viene invocato il metodo setText per impostare il messaggio.

Il metodo setGravity serve ad indicare, attraverso una serie di attributi la posizione dove il tooltip deve essere visualizzato.  Ovviamente il comando show() avvia la visualizzazione del tooltip.

Il risultato finale è simile al seguente:

Comments

TuttoTech, il tuo nuovo punto di riferimento per la tecnologia

2017 © TuttoTech.net di Mikhael Costa - MK Media S.r.l. c.r. - P.Iva: 08123000963 Tutti i marchi riportati appartengono ai legittimi proprietari.

To Top