Sfida sui fondamentali dell'interfaccia utente Android RelativeLayout

Hai letto su come funzionano i layout relativi in ​​Android. Metti alla prova le tue nuove abilità con queste sfide progressive che coinvolgono i relativi controlli di layout 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 ciascuno dei passaggi seguenti, che crescono in difficoltà, consoliderai la tua conoscenza dei layout relativi e del design dell'interfaccia utente Android in generale.

Passaggio 0: prepara le tue risorse

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 relativerainbow.xml. All'interno di questo file XML, aggiungi un controllo di layout relativo che riempie l'intero schermo; imposta la sua gravità per centrare i controlli. Successivamente, aggiungi sette controlli TextView come controlli figlio all'interno del relativo layout: 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 wrap_content, l'attributo layout_height a wrap_content e il padding a qualcosa di ragionevole come 8dp.

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

Si noti che tutti i controlli sono impilati uno sopra l'altro, con l'ultimo controllo aggiunto su "top".

Sfida 2: impilare i controlli figlio

Vogliamo che ogni controllo TextView sia visibile e che ciascun colore sia visualizzato nell'ordine corretto. Avremmo potuto utilizzare un layout lineare per organizzare i nostri controlli, ma qui vogliamo maggiore flessibilità.

Inizia aggiungendo una regola di layout relativa a ciascun controllo TextView appropriato in modo che i controlli vengano visualizzati uno dopo l'altro verticalmente in una pila in ordine (rosso, arancione, giallo, verde, blu, indaco, viola).

Ora il tuo layout dovrebbe assomigliare a questo:

SUGGERIMENTO: controlla l'attributo android: layout_below.

Sfida 3: Sconcerta i controlli figlio

Finora, avremmo potuto semplicemente usare un layout lineare orientato verticalmente per visualizzare i controlli. In questo passaggio, oltrepassiamo l'impilamento dei controlli TextView secondari e iniziamo a regolarli a sinistra oa destra di altri controlli per ottenere il design risultante:

SUGGERIMENTO: per ottenere questo effetto, è necessario utilizzare due diverse regole di layout relative, associate agli attributi: android: layout_toLeftOf e android: layout_toRightOf.

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

Sentiti libero di pubblicare le tue soluzioni XML nei commenti!

Sfida bonus: ricrea il layout 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 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 RelativeLayout, come discusso in Progettazione dell'interfaccia utente Android: layout relativi.

Ecco alcuni suggerimenti per l'implementazione programmatica del relativo arcobaleno:

• Inizia costruendo ognuno dei controlli TextView. Assegna a ciascun controllo un identificatore univoco mediante il metodo setId ().
• Per configurare i parametri di layout per ciascun controllo TextView, creare un set di RelativeLayout.LayoutParams, per impostare layout_width e layout_height di ciascun controllo.
• Utilizzare il metodo addRule () dell'oggetto RelativeLayout.LayoutParams per configurare le regole di visualizzazione appropriate per ciascun controllo TextView.
• 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. È 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, costruisci un controllo RelativeLayout.
• Utilizzare il metodo setGravity () per configurare l'allineamento di tutti i controlli figlio del layout. La classe Gravity contiene definizioni per diversi tipi di gravità.
• Non dimenticare di costruire un oggetto LayoutParams per impostare gli attributi di altezza e larghezza del layout relativo stesso.
• Aggiungi ciascun controllo TextView all'oggetto RelativeLayout usando il metodo addView ().
• Infine, usa il metodo setContentView () per visualizzare RelativeLayout appena configurato.

Troverai la soluzione Java nel download fornito con questo tutorial.

Conclusione

I progettisti di interfacce utente Android utilizzano sempre layout relativi per visualizzare i controlli in relazione l'uno con l'altro. I controlli figlio possono essere visualizzati l'uno vicino all'altro (sopra, sotto, a sinistra o a destra) o in relazione al layout genitore. Le regole di layout vengono utilizzate per descrivere dove posizionare ogni controllo figlio sullo schermo.

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.