androidGeek.it
Un blog italiano sul mondo Android



Tutorials

16 luglio 2012

Come creare l’interfaccia utente di un’applicazione android: View e ViewGroup

More articles by »
Written by: Luka
Tag:, ,
android ui

Nelle precedenti guide ci siamo occupati principalmente  di configurare l’ambiente di sviluppo, di capire cos’è un’activity e come funziona il ciclo di vita di un’applicazione android. Questo tutorial vuole focalizzare l’attenzione su come creare un’interfaccia utente di un’applicazione android. Visto che la materia è abbastanza amplia, ho deciso di dividere il tutorial in 2: nella prima parte (questa) vediamo di capire quali sono e come si definiscono i componenti di un’interfaccia android. Nella seconda parte vedremo quali sono e come definire i principali layout in android. Diamoci sotto!

Le interfaccie utente in android si possono definire in due forme: mediante file XML o direttamente attraverso codice Java. Generalmente, la forma più raccomandabile e allo stesso tempo più semplice è la prima, giacchè aiuta a separare la logica dalla presentazione dell’applicazione (paradigma MVC). Tuttavia, definire l’interfaccia utente in XML, non è sempre la via più facile visto che potremmo trovarci a dover costruire una UI dinamicamente, a tempo di esecuzione.

Capire i componenti di un’interfaccia android

Un’activity visualizza l’interfaccia utente dell’applicazione. Quando creiamo un nuovo progetto android in Eclipse, quest’ultimo creerá per noi un file XML (main.xml nella cartella res/layout, vedi guida struttura di un’applicazione android) che definisce l’interfaccia utente. Generalmente questo file ha il seguente aspetto:




Quando l’applicazione viene aperta il metodo onCreate() dell’activity carica il file main.xml contenente la nostra interfaccia utente.

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}

View e ViewGroups

view e viewgroup

view e viewgroup

Gli elementi di un’interfaccia grafica in android sono di due tipi:

  1. View, deriva dalla classe android.view.View. Gli oggetti view più comuni sono: Button, TextView, EditText, ListView, CheckBox, RadioButton.
  2. ViewGroup (gruppi di elementi di tipo View o ViewGroup). Deriva dalla classe android.view.ViewGroup. I più importanti esempi di ViewGroups sono: LinearLayout,  AbsoluteLayout,   TableLayout,  RelativeLayout,  FrameLayout ,  ScrollView.

Per aggiungere un elemento View al file XML visto prima (la nostra UI) basta aggiungere il seguente codice , in questo caso relativo al componente Button:




 

view button

Un View bottone dentro un ViewGroup Linear Layout

Gli attributi xml di un elemento View più importanti sono i seguenti:

  • id –  identificatore univoco per la view che si sta definendo. Se si sta creando una nuova view bisognerà usare l’operatore + ( @+id…), se invece ci si sta riferendo ad una view già creata basterà l’operatore  @ ( @id…)
  • layout_width –  specifica la larghezza della View
  • layout_height – specifica l’altezza della View
  • text – specifica il testo dell’elemento
  • layout_marginTop – specifica lo spazio extra sul lato superiore della View
  • layout_marginBottom – specifica lo spazio extra sul fondo della View
  • layout_marginLeft – specifica lo spazio extra sul lato sinistro della View
  • layout_marginRight – specifica lo spazio extra sul lato destro della View
  • layout_gravity – definisce come vengono posizionati gli elementi figli di una determinata View
  • layout_weight – specifica quanto spazio bisogna lasciare nel layout per allocare la View
  • layout_x – specifica la cordinata x della View
  • layout_y – specifica la coordinata y della View

Da notare che alcuni attributi sono applicabili solamente quando una View appartiene ad una specifica ViewGroup. Ad esempio gli attributi layout_weight e layout_gravity sono applicabili soltanto quando la View è all’interno di un LinearLayout o di un TableLayout.

Ad esempio, nel caso del nostro bottone, abbiamo visto che gli attributi layout_width e layout_height sono settati su wrap_content, il che significa che l’elemento deve occupare, in altezza ed in larghezza, lo spazio strettamente necessario affinchè il testo contenuto al suo interno sia visibile (in questo caso la stringa “Button”).

Il valore fill_parent invece serve ad indicare che l’elemento deve occupare esattamente le dimensioni del padre che lo contiene. Nel caso del nostro bottone, l’attributo layout_width settato come fill_parent avrebbe prodotto il seguente risultato:

button_fill_parent

View button con layout_width:fill_parent

Unità di misura

Ovviamente, per definire la grandezza di un elemento, ci si può affidare a varie unità di misure, come ad esempio:

  • dp – Density-independent pixel. 1 dp è equivalente ad un pizel su uno schermo a 160 dpi. È l’unità di misura raccomandata per specificare le dimensioni di una View.
  • sp – Scale-independent pixel. Simile al dp, è l’unità di misura di riferimento per specificare la grandezza di un font.
  • px – Pixel. Corrispondente ad un pixel sull schermo. È sconsigliato usare questa unità di misura perchè la vostra UI potrebbe non renderizzare correttamente su schermi con diverse risoluzioni.

Altri tipi di risorse

Oltre ai file XML impiegati per la definizione dei Layout e degli elementi che compongono l’interfaccia utente, è possibile utilizzare altri file per specificare distinti tipi di risorse.

Tutti i file devono essere allocati nella cartella /res dell’applicazione, organizzati in sotto cartelle in funzione del tipo di risorsa che vogliamo definire:

  • res/animator – risorse relative all’animazione
  • res/anim – risorse relative all’animazione per interpolazione
  • res/color – risorse relativi a set di coloro specificati dall’utente
  • res/drawable – immagini
  • res/layout – layout (ej main.xml)
  • res/menu – menus
  • res/raw – altri ti pi di elementi
  • res/values – risorse come costanti
  • res/xml – altri tipi di file XML

Nella cartella values, di default, Eclipse creerà automaticamente un file denominato strings.xml. Questo file contiene le strings che vengono usate nell’applicazione. Come buona pratica di programmazione, è raccomandabile usare questo file per immagazzinare tutte le catene di testo che verranno usate nella nostra applicazione (esempio titoli, messaggi di qualunque tipo, etichette etc.). Il file strings.xml ha la seguente forma




Hello World, ProvatestActivity!
Provatest
Button


Per utilizzare una catena di texto definita in strings.xml dobbiamo andare nel nostro main.xml e referenziarla come segue:

...

Allo stesso modo si può accedere ad una risorsa string nel codice java come segue:

TextView msgTextView = (TextView) findViewById(R.id.msg);
msgTextView.setText(R.string.hello_message);

Nella prossima guida ci concentreremo sui diversi tipi di layout e su come combinarli per creare un’interfaccia utente per la nostra applicazione android.

Be Sociable, Share!



    About the Author

    Luka
    Luca Di Vincenzo, informatico, da molti anni blogger appassionato di ultime tecnologie. Attualmente risiede in Spagna, dove lavora come Senior Software Engineer da 5 anni. Sul blog si occupa della parte tecnica e dell'ottimizzazione SEO del sito.




     
    Potrebbero interessarti
     

     
    webview_android

    Webview su android, guida dettagliata su come creare web app

    Da diverso tempo avevo promesso ad alcuni amici che avrei pubblicato una guida sulle webview per android quindi, scusandomi per il ritardo, eccomi quì. Prima di tutto fatemi fare a paio di premesse. Webview android, cos’...
    by Luka
    18

     
     
    struttura_cartelle_android_eclipse

    Comprendere la struttura di un’applicazione Android

    Nel precedente articolo della serie programmazione android abbiamo visto come sviluppare la nostra prima applicazione. Prima di prendere in mano il codice è bene dare un’occhiata alla struttura generale di un progetto an...
    by Luka
    2

     



    • atomnet

      Ciao,
      finalmente comincio a capire un po dopo aver letto le guide di questo sito, peccato che manca la versione stampabile specie per quanto riguarda la struttura dei file in eclipse, per un novello come me sarebbe ideale come promemoria :)
      Una domanda: io ho un sito in jquerimobile di immagini, se io volessi usare un’immagine come sfondo, come posso dire al pulsate imposta come sfondo?

      Grazie e complimenti ancora.

    • SpeedBlack

      Ottima guida! Grazie! :-)
      Però volevo chiedere dov’è la prossima guida?? Non la trovo :-(