Sfida sui fondamentali dell'interfaccia utente Android LinearLayout

Hai letto su come funzionano i layout lineari in Android. Metti alla prova le tue nuove abilità con queste sfide progressive che coinvolgono controlli di layout lineari e consolida la tua conoscenza del linguaggio di programmazione Java e della progettazione e dello sviluppo dell'interfaccia utente Android.

Impostare

Per prepararti a questa sfida, ti consigliamo di iniziare con un'applicazione Android di base. Crea semplicemente un'applicazione Android in Eclipse e modifica la sua attività predefinita, in particolare il metodo onCreate (), per testare il codice che crei per questa sfida.

Se ciò che ti abbiamo appena chiesto è già troppo impegnativo, ti consigliamo di fare un passo indietro. Inizia con alcune esercitazioni Android, come Introduzione allo sviluppo Android o Android iniziale: Introduzione a Fortune Crunch. Una volta che hai imparato a configurare un progetto Android, torna e prova questi esercizi progressivi.

Una sfida progressiva

Questa è una sfida progressiva. Implica numerose abilità che gli sviluppatori Android devono padroneggiare per progettare e sviluppare applicazioni. Seguendo ognuno dei passaggi seguenti, che crescono in difficoltà, consoliderai la tua conoscenza dei layout lineari e del design dell'interfaccia utente Android in generale.

Passaggio 0: Definisci la stringa

Ora che hai creato un progetto Android adatto, dovrai creare alcune risorse da utilizzare nell'interfaccia utente.

Creare:

• Crea sette risorse stringa, una per ciascun colore nello spettro ("Rosso", "Arancione", "Giallo", "Verde", "Blu", "Indaco", "Viola")
• Crea sette risorse di colore, una per ogni colore nello spettro (Rosso => ​​# f00, Arancione => # ffa500, Giallo => # ffff00, Verde => # 0f0, Blu => # 00f, Indigo => # 4b0082, Viola => # ee82ee)
• Crea altre due risorse di colore per i colori del testo (Nero => # 000, Bianco => # fff)

Stumped creando risorse stringa o colore? Dai un'occhiata a questo tutorial sulla formattazione delle stringhe.

Sfida 1: Definisci la tua risorsa di layout

Inizia creando un nuovo file di risorse di layout chiamato rainbow.xml. All'interno di questo file XML, aggiungi un controllo di layout lineare orientato verticalmente che riempie l'intero schermo. Successivamente, aggiungi sette controlli TextView come controlli figlio all'interno del layout lineare: uno per ciascun colore nello spettro. Impostare il testo di ciascun controllo TextView sulla stringa di colore appropriata nello spettro e il colore di sfondo sul valore di colore appropriato. Inoltre, imposta l'attributo layout_width di ogni controllo a fill_parent e il relativo attributo layout_height a wrap_content.

Se hai completato correttamente questo passaggio, il tuo layout dovrebbe assomigliare a questo:

Sfida 2: regola i tuoi allineamenti

In questo passaggio, concentrerai l'attenzione sulle varie proprietà di gravità disponibili per i controlli, inclusi quelli utilizzati dal layout lineare.

Aggiorna la risorsa di layout rainbow.xml con le seguenti modifiche: centra i controlli TextView sullo schermo e centra il testo all'interno di ciascun controllo. SUGGERIMENTO: Ciò richiederà due diversi attributi XML da impostare, uno sul layout lineare e uno su ciascun controllo TextView.

Se hai completato correttamente questo passaggio, il tuo layout dovrebbe assomigliare a questo:

Sfida 3:
Modifica dei controlli figlio con layout lineare

I layout lineari sono molto flessibili. Se si apportano modifiche ai controlli figlio all'interno di un layout lineare genitore, il layout si adegua, quando possibile.

Il testo di controllo TextView è piccolo e un po 'difficile da leggere. Inizia modificando i controlli TextView. Aggiorna la risorsa di layout rainbow.xml con le seguenti modifiche: Innanzitutto, aggiungi un valore di dimensione chiamato textsize. In questo caso, lo impostiamo su 22dp.

Ora il tuo layout dovrebbe assomigliare a questo:

Nota come il layout lineare è abbastanza flessibile da contenere i controlli TextView più grandi, ma non utilizzano ancora lo spazio disponibile sullo schermo e le bande nere esistono ancora.

SUGGERIMENTO AVANZATO: è possibile prendere in considerazione la possibilità di creare valori di risorse di dimensioni alternative da utilizzare con dimensioni dello schermo diverse. Ad esempio, per gli schermi più grandi, una dimensione del testo di 22 dp sembra piacevole, mentre su schermi più piccoli, una dimensione del testo di 14 dp o 16 dp potrebbe essere più appropriata. Per ulteriori informazioni sulla creazione di risorse alternative, vedere Supporting Multiple Screens.

Sfida 4: utilizzo dello spazio sullo schermo in modo efficace

Notate tutto quello spazio nero inutilizzato? In questo passaggio, concentrerai la tua attenzione sull'utilizzo efficace dell'intero schermo. I controlli TextView all'interno del layout lineare hanno dimensioni appropriate, ma potrebbero crescere leggermente per utilizzare lo spazio nero non utilizzato.

Vogliamo che i controlli TextView si espandano in tutto lo spazio disponibile, indipendentemente dall'orientamento del dispositivo o dalle dimensioni dello schermo del dispositivo.

Esegui questa operazione regolando gli attributi layout_weight per i controlli figlio all'interno del layout lineare per dare a ciascun controllo i limiti specifici in cui crescere. L'efficacia dell'attributo layout_weight è più evidente quando il dispositivo si trova in un determinato orientamento: per i layout lineari verticali, vedrai come il peso funziona meglio quando il dispositivo è in modalità verticale, mentre per i layout lineari orizzontali, vedrai come il peso funziona meglio in modalità orizzontale.

Innanzitutto, prova a impostare pesi che consentano a ciascuna area di colore di TextView di avere uguale area sullo schermo. Suggerimento: pesi di 0,14 per 5 controlli e 0,15 per 2 controlli sommano a 1,0.

Se hai configurato correttamente i pesi dei tuoi controlli, lo schermo dovrebbe apparire in questo modo:

Successivamente, prova a impostare i pesi su qualcosa che permetta ad ogni banda di controllo di TextView di aumentare gradualmente l'area sullo schermo in modo che la banda RED sia l'area più piccola e la banda VIOLET sia la più grande. SUGGERIMENTO: una buona distribuzione è: 0,08, 0,10, 0,12, 0,14, 0,16, 0,18, 0,22.

Se hai completato correttamente questo passaggio, il tuo layout dovrebbe assomigliare a questo:

Solo per i calci, passa alla modalità orizzontale e controlla come appare lo stesso layout:

Sfida bonus: ricrea il layout utilizzato nel passaggio 4b a livello di codice in Java

Se hai trovato le sfide precedenti ragionevolmente semplici, considera la seguente sfida bonus: ricrea la risorsa di layout finale (con i pesi progressivi sui singoli controlli TextView) a livello di codice in Java, anziché in una risorsa XML di layout.

Dovrai commentare la chiamata setContentView () nel metodo onCreate () della tua attività e creare il tuo LinearLayout, come discusso in Progettazione dell'interfaccia utente Android: layout lineari.

Ecco alcuni suggerimenti per implementare il layout arcobaleno a livello di codice:

• Inizia costruendo ognuno dei controlli TextView.
• Per configurare i parametri di layout per ciascun controllo TextView, creare un set di LinearLayout.LayoutParams, per impostare layout_width, layout_height e il peso di ciascun controllo.
• Utilizzare il metodo setText () della classe TextView per caricare e visualizzare la risorsa stringa appropriata.
• Utilizzare il metodo setTextSize () della classe TextView per configurare la dimensione del carattere del testo. È possibile utilizzare il metodo getResources (). GetDimension () per caricare la risorsa di dimensione.
• Utilizzare il metodo setTextColor () della classe TextView per configurare il colore del carattere del testo. È possibile utilizzare il metodo getResources (). GetColor () per caricare la risorsa colore.
• Utilizzare il metodo setBackgroundColor () della classe TextView per configurare il colore di sfondo del controllo. Di nuovo, è possibile utilizzare il metodo getResources (). GetColor () per caricare la risorsa colore.
• Utilizzare il metodo setGravity () della classe TextView per configurare l'allineamento del testo. La classe Gravity contiene definizioni per diversi tipi di gravità.
• Quindi, costruire un controllo LinearLayout.
• Utilizzare il metodo setOrientation () della classe LinearLayout per configurare l'orientamento del layout. La classe LinearLayout contiene le definizioni per entrambi gli orientamenti.
• Utilizzare il metodo setGravity () della classe LinearLayout per configurare l'allineamento di tutti i controlli figlio del layout. La classe Gravity contiene definizioni per diversi tipi di gravità.
• Quando si impostano i pesi dei bambini a livello di codice, è inoltre necessario impostare la somma di peso totale utilizzando il metodo setWeightSum () della classe LinearLayout. Per esempio. setWeightSum (1.0f);
• Non dimenticare di costruire un oggetto LayoutParams per impostare gli attributi di altezza e larghezza del layout lineare stesso.
• Aggiungi ciascun controllo TextView al tuo oggetto LinearLayout usando il metodo addView ().
• Infine, usa il metodo setContentView () per visualizzare il LinearLayout appena configurato.

Troverai la soluzione Java nel download fornito con questo tutorial.

Conclusione

I progettisti di interfacce utente Android utilizzano sempre layout lineari per visualizzare i controlli in modo ordinato orizzontalmente o verticalmente. È possibile controllare dove vengono visualizzati i controlli figlio del layout utilizzando l'attributo gravità del layout lineare. È possibile controllare la quantità di spazio assegnata a ciascun controllo figlio utilizzando l'attributo layout_weight.

Buona fortuna!

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.

Hai bisogno di più aiuto nella scrittura di app per Android? Consulta i nostri ultimi libri e risorse!