Progettazione dell'interfaccia utente Android nozioni di base sul layout

Capire i layout è importante per una buona progettazione delle applicazioni Android. In questo tutorial, forniamo una panoramica di come i layout si adattano all'architettura dell'applicazione Android. Esploriamo anche alcuni dei controlli di layout specifici disponibili per organizzare i contenuti delle schermate delle applicazioni in una varietà di modi interessanti.

Che cos'è un layout?

Gli sviluppatori Android usano il termine layout per indicare una delle due cose. Entrambe le definizioni si applicano a questo tutorial e sono, sfortunatamente, utilizzate in modo intercambiabile nella comunità di sviluppo Android. Le due definizioni di layout sono:

• Un tipo di risorsa che definisce ciò che viene disegnato sullo schermo. Le risorse di layout vengono archiviate come file XML nella directory / res / layout resource per l'applicazione. Una risorsa di layout è semplicemente un modello per una schermata dell'interfaccia utente, o parte di uno schermo, e contiene.
• Un tipo di classe View il cui scopo principale è organizzare altri controlli. Queste classi di layout (LinearLayout, RelativeLayout, TableLayout, ecc.) Vengono utilizzate per visualizzare controlli figlio, come controlli di testo o pulsanti o immagini sullo schermo.

Le interfacce utente Android possono essere definite come risorse di layout in XML o create a livello di codice.

Utilizzo di Eclipse per progettare risorse di layout

Il plug-in di sviluppo Android per Eclipse include un pratico progettista di risorse di layout per la progettazione e l'anteprima delle risorse di layout. Lo strumento include due visualizzazioni di schede: la vista Layout consente di visualizzare l'anteprima dei controlli su vari schermi e per ciascun orientamento e la vista XML mostra la definizione XML della risorsa. Il progettista di risorse di layout è mostrato in questa figura:

Ecco alcuni suggerimenti per lavorare con il progettista di risorse di layout in Eclipse:

• Utilizzare il riquadro Struttura per aggiungere e rimuovere i controlli alla risorsa di layout.
• Selezionare un controllo specifico (nell'anteprima o nella struttura) e utilizzare il riquadro Proprietà per regolare gli attributi di un controllo specifico.
• Utilizzare la scheda XML per modificare direttamente la definizione XML.

È importante ricordare che l'anteprima del progettista delle risorse di layout Eclipse non può replicare esattamente come apparirà il layout agli utenti finali. Per questo, è necessario testare l'applicazione su un emulatore configurato correttamente e, cosa più importante, sui dispositivi di destinazione. Inoltre, alcuni controlli "complessi", tra cui schede o visualizzatori video, non possono essere visualizzati in anteprima all'interno di Eclipse.

Definizione di una risorsa di layout XML

Il modo più comodo e manutenibile per progettare interfacce utente dell'applicazione è creare risorse di layout XML. Questo metodo semplifica enormemente il processo di progettazione dell'interfaccia utente, spostando gran parte della creazione e del layout statici dei controlli dell'interfaccia utente e della definizione degli attributi di controllo in XML, invece di sporcare il codice. Crea una potenziale distinzione tra i progettisti dell'interfaccia utente (che si preoccupano maggiormente del layout) e gli sviluppatori (che conoscono Java e implementano le funzionalità dell'applicazione). Gli sviluppatori possono comunque modificare il contenuto di uno schermo al livello di programmazione quando necessario. I controlli complessi, come ListView o GridView, vengono solitamente popolati con dati a livello di codice.

Le risorse del layout XML devono essere memorizzate nella directory di progetto / res / layout (o, nel caso di risorse alternative, in una sottodirectory appositamente denominata). È prassi comune creare una risorsa di layout XML per ogni schermata dell'applicazione (strettamente legata a un'attività specifica), ma non è necessaria. In teoria, potresti creare una risorsa di layout XML e usarla per diverse attività, fornendo diversi dati sullo schermo. È anche possibile unire le risorse del layout e includerle l'una nell'altra, se necessario.

Di seguito è riportata una semplice risorsa di layout XML, un modello con un LinearLayout contenente un TextView e un ImageView, definiti in XML:

Questo layout rappresenta una semplice schermata con due controlli: prima un testo e poi un'immagine sotto di esso. Questi controlli sono organizzati all'interno di un LinearLayout orientato verticalmente. Le due figure seguenti mostrano come potrebbe apparire questo layout su un dispositivo in modalità verticale e orizzontale:

All'interno dell'attività, è necessaria solo una singola riga di codice all'interno del metodo onCreate () per caricare e visualizzare una risorsa di layout sullo schermo. Se la risorsa di layout è stata memorizzata nel file /res/layout/main.xml, ciò sarebbe:

 setContentView (R.layout.main); 

Definire un layout a livello di programmazione

È inoltre possibile creare a livello di codice componenti dell'interfaccia utente. Per organizzazione e manutenibilità, è meglio lasciarlo per il caso strano piuttosto che per la norma. Invece di caricare una risorsa di layout direttamente utilizzando il metodo setContentView (), è necessario invece creare il contenuto dello schermo e quindi fornire un oggetto di layout principale che contenga tutti i contenuti del controllo da visualizzare come viste secondarie al metodo setContentView ().

Ad esempio, il codice seguente illustra come avere un'istanza a livello di programmazione in una vista LinearLayout e posizionare due oggetti TextView al suo interno. Non vengono utilizzate risorse di alcun genere.

 public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.main); Etichetta TextView = new TextView (this); label.setText (R.string.my_text_label); label.setTextSize (20); label.setGravity (Gravity.CENTER_HORIZONTAL); ImageView pic = new ImageView (questo); pic.setImageResource (R.drawable.matterhorn); pic.setLayoutParams (new LayoutParams (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); pic.setAdjustViewBounds (true); pic.setScaleType (ScaleType.FIT_XY); pic.setMaxHeight (250); pic.setMaxWidth (250); LinearLayout ll = new LinearLayout (this); ll.setOrientation (LinearLayout.VERTICAL); ll.setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); ll.setGravity (Gravity.CENTER); ll.addView (etichetta); ll.addView (PIC); setContentView (ll);  

Come puoi vedere, il codice può aumentare rapidamente di dimensioni man mano che vengono aggiunti più controlli sullo schermo, rendendo il contenuto dello schermo più difficile da mantenere o riutilizzare.

Esplorazione di vari tipi di layout

Ora rivolgiamo la nostra attenzione a quegli utili controlli di layout che organizzano altri controlli. Le classi di layout più comunemente utilizzate sono:

• FrameLayout - progettato per visualizzare una pila di controlli Vista bambino. È possibile aggiungere più controlli di visualizzazione a questo layout. Questo può essere usato per mostrare più controlli all'interno dello stesso spazio dello schermo.
• LinearLayout - progettato per visualizzare i controlli Vista figlio in una singola riga o colonna. Questo è un metodo di layout molto utile per la creazione di moduli.
• RelativeLayout - progettato per visualizzare i controlli Vista figlio in relazione l'uno con l'altro. Ad esempio, è possibile impostare un controllo da posizionare "sopra" o "sotto" o "a sinistra di" o "a destra di" un altro controllo, a cui fa riferimento il suo identificatore univoco. È inoltre possibile allineare i controlli Vista figlio relativi ai bordi padre.
• TableLayout - progettato per organizzare i controlli di visualizzazione figlio in righe e colonne. I singoli controlli della vista vengono aggiunti all'interno di ciascuna riga della tabella utilizzando una vista del layout TableRow (che è fondamentalmente un LinearLayout orientato orizzontalmente) per ogni riga della tabella.

Combinazione di layout per organizzare i controlli

Un layout (LinearLayout, TableLayout, RelativeLayout, ecc.) È un controllo come qualsiasi altro. Ciò significa che i controlli di layout possono essere nidificati. Ad esempio, è possibile utilizzare un RelativeLayout all'interno di un LinearLayout o viceversa per organizzare i controlli su uno schermo. La seguente figura mostra una schermata con un LinearLayout (genitore), un TableLayout (figlio in alto) _ e un FrameLayout (figlio in basso).

Ma attenzione! Mantieni i tuoi schermi relativamente semplici; layout complessi si caricano lentamente e causano problemi di prestazioni.

Fornire risorse di layout alternative

Considera le differenze tra i dispositivi durante la progettazione delle risorse del layout dell'applicazione. È spesso possibile progettare layout flessibili che sembrano buoni su una varietà di dispositivi diversi, sia in modalità verticale che orizzontale. Se necessario, è possibile includere risorse di layout alternative per gestire casi speciali. Ad esempio, è possibile fornire diversi layout da caricare a seconda dell'orientamento del dispositivo o se il dispositivo ha o meno un grande schermo (ad esempio un tablet Internet).

Per ulteriori informazioni su come utilizzare risorse alternative, consultare la documentazione di Android SDK su Risorse Android.

Strumenti di layout e ottimizzazione

L'SDK di Android include diversi strumenti che possono aiutare a progettare, eseguire il debug e ottimizzare le risorse di layout. Oltre al progettista di risorse di layout integrato nel plug-in Android per Eclipse, è possibile utilizzare gli strumenti Hierarchy Viewer e layoutopt forniti con l'SDK di Android. Questi strumenti sono disponibili nella directory / tools del tuo SDK Android.

È possibile utilizzare Hierarchy Viewer per ispezionare i dettagli del layout in fase di esecuzione. Scopri di più su Hierarchy Viewer sul sito web degli sviluppatori Android.

È possibile utilizzare lo strumento da riga di comando layoutopt per ottimizzare i file di layout. L'ottimizzazione dei layout è importante perché i file di layout complessi sono lenti da caricare. Lo strumento layoutopt analizza semplicemente i file di layout XML e identifica i controlli non necessari. Scopri di più sullo strumento layoutopt sul sito web degli sviluppatori Android.

Conclusione

Le interfacce utente delle applicazioni Android sono definite utilizzando i layout. Esistono diversi tipi di tipi di layout che possono essere utilizzati per organizzare i controlli su uno schermo o parte di uno schermo. I layout possono essere definiti utilizzando le risorse XML o programmaticamente in fase di esecuzione in Java. Layout alternativi possono essere caricati in circostanze particolari, come per fornire un'interfaccia utente alternativa in modalità verticale o orizzontale. Infine, la progettazione di layout di buona qualità è importante per le prestazioni delle applicazioni; usa gli strumenti di Android SDK come Hierarchy Viewer e layoutopt per eseguire il debug e ottimizzare i layout delle applicazioni.

Riguardo agli Autori

Gli sviluppatori mobili Lauren Darcey e Shane Conder hanno coautore diversi libri sullo sviluppo di Android: un libro di programmazione approfondito intitolato Sviluppo di applicazioni wireless Android e Sams TeachYourself Sviluppo di applicazioni Android in 24 ore. Quando non scrivono, passano il loro tempo a sviluppare software mobile presso la loro azienda ea fornire servizi di consulenza. Possono essere contattati via email a [email protected], tramite il loro blog su androidbook.blogspot.com e su Twitter @androidwireless.

!