Archivio per febbraio 2010

Layout XML per la UI Android: primi passi

Per la costruzione della nostra prima, semplicissima, applicazione Android, ci siamo affidati a Java, linguaggio potente ma al tempo stesso complicato specie per chi non ha esperienze di programmazione (e di debugging).
Fortunatamente Android consente un’altra modalità di costruzione delle  interfacce utente (UI), basate su file XML. Scopo di questo articolo è appunto quello di ottenere lo stesso risultato del tutorial precedente utilizzando un layout XML.
Torniamo per un attimo all’applicazione dell’articolo precedente. Eclipse, o meglio un suo plugin, durante l’elaborazione ha creato automaticamente un file di layout denominato main.xml. Siccome la nostra prima applicazione ha utilizzato codice java, quel file è stato ignorato.
Ecco come eseguire le opportune modifiche alla nostra prima applicazione. Andiamo nell’Eclipse Package Explorer, poi nella cartella /res/layout/ e apriamo il file main.xml.
Per vederne la struttura, clicchiamo sulla scheda main.xml posizionato in fondo alla finestra di lavoro. Sostituiamo il contenuto col seguente codice e salviamo

<?xml version=”1.0″ encoding=”utf-8″?>
 <TextView   xmlns:android=”http://schemas.android.com/apk/res/android
     android:layout_width=”fill_parent”
     android:layout_height=”fill_parent”
     android:text=”@string/hello”
  />

Adesso andiamo dentro la cartella res/values/ e apriamo il file strings.xml. Qui inseriremo tutte le stringhe di testo necessarie alla nostra U(ser) I(nterface).  Nell’articolo precedente abbiamo cominciato con la visualizzazione dei testi identificati dalle variabili hello and app_name. Potremmo ad esempio apportare le seguenti modifiche:

<?xml version=”1.0″ encoding=”utf-8″?>
 <resources>
  <string name=”hello”>Questo testo è contenuto nel file strings.xml</string>
  <string name=”app_name”>Viva Android, specie se uso XML</string>
</resources>

Adesso apriamo la classe java che abbiamo creato per il primo esercizio e “diciamole” di utilizzare il layout xml appena definito:

package com.example.helloandroid;
  import android.app.Activity;
  import android.os.Bundle;
  public class HelloAndroid extends Activity
     {   
         @Override    public void onCreate(Bundle  
          savedInstanceState)  
                                                     super.onCreate(savedInstanceState);     
                                                     setContentView(R.layout.main);   
                                                  }
      } 

Invece di passare a setContentView() un oggetto View , gli abbiamo dato il riferimento al layout XML. Tale risorsa è identificata da R.layout.main, un oggetto compilato che rappresenta il layout definito in /res/layout/main.xml. Al di là delle stringhe visualizzate, il risultato è lo stesso della prima applicazione.

Tornando al file main.xml, diamo un’occhiata agli attributi (quattro) dell’elemento TextView

xmlns:android
Dichiarazione di namespace, che associa al prefisso android lo spazio dei nomi definito all’indirizzo http://schemas.android.com/apk/res/android.

android:layout_width
definisce quanto dello schermo disponibile deve essere riservato alla View.

android:layout_height
identico a android:layout_width, solo che si riferisce all’altezza dello schermo disponibile.

android:text
Definisce il testo che TextView deve visualizzare. Nell’esempio, le stringhe non sono inserite direttamente ma vengono “pescate” dal file string.xml. E’ una buona pratica perchè, in caso di modifica dei testi da visualizzare, modificheremo quest’ultimo file anzichè modificare il file di layout.

Linkografia
1) Per la realizzazione di questo piccolo post si è attinto largamente alla documentazione ufficiale di Android relativa alle UI.
2) Per la spiegazione concettuale di cosa sia un namespace si può attingere al lemma su Wikipedia , a questa risorsa di html.it o all’ottimo documento del Prof. Fabio Vitali dell’Università di Bologna.


Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos


%d blogger hanno fatto clic su Mi Piace per questo: