Share
Capire i layout è importante per una buona progettazione delle applicazioni Android. In questo tutorial, si impara tutto sui layout lineari, che organizzano controlli dell'interfaccia utente o widget, verticalmente o orizzontalmente sullo schermo. Se utilizzati correttamente, i layout lineari possono essere il layout fondamentale su cui possono essere progettate molte interfacce utente di applicazioni Android interessanti.
I layout lineari sono uno dei tipi più semplici e più comuni di layout utilizzati dagli sviluppatori Android per organizzare i controlli all'interno delle loro interfacce utente. La disposizione lineare funziona esattamente come suggerisce il nome: organizza i controlli in modo lineare o verticale o orizzontale. Quando l'orientamento del layout è impostato su verticale, tutti i controlli figlio al suo interno sono organizzati in un'unica colonna; quando l'orientamento del layout è impostato su orizzontale, tutti i controlli figlio al suo interno sono organizzati in un'unica riga.
I layout lineari possono essere definiti all'interno delle risorse del layout XML o a livello di codice nel codice Java dell'applicazione.
La seguente figura mostra un layout lineare con sette controlli TextView. L'orientamento di questo layout lineare è impostato su verticale, causando la visualizzazione di ciascuno dei controlli TextView in un'unica colonna. Ogni controllo TextView ha l'attributo di testo impostato su un colore, con lo stesso colore impostato come sfondo per il controllo; ogni controllo viene esteso della larghezza dello schermo impostando l'attributo layout_width dei controlli su fill_parent.
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 statica e del layout dei controlli dell'interfaccia utente e della definizione degli attributi di controllo in XML, invece di sporcare il codice.
Le risorse di layout XML devono essere memorizzate nella gerarchia di directory di progetto / res / layout. Diamo un'occhiata al layout lineare dell'arcobaleno introdotto nella sezione precedente. Di nuovo, questa schermata è fondamentalmente un layout lineare verticale impostato per riempire l'intero schermo, che si ottiene impostando gli attributi layout_width e layout_height a fill_parent. Questo file di risorse di layout, giustamente denominato /res/layout/rainbow.xml, è definito in XML come segue:
Forse hai notato che ognuno dei controlli figlio del layout lineare ha un numero di attributi interessanti, tra cui uno chiamato layout_weight. Ne parleremo di più in pochi istanti.
Le due figure seguenti mostrano come potrebbe apparire questo layout su un dispositivo in modalità verticale e orizzontale:
Ricorda che, dall'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/rainbow.xml, quella riga di codice sarebbe:
setContentView (R.layout.rainbow);
È anche possibile creare e configurare a livello di codice layout lineari. Questo viene fatto usando la classe LinearLayout (android.widget.LinearLayout). Troverai i parametri specifici del bambino nella classe LinearLayout.LayoutParams. Inoltre, i parametri di layout tipici (android.view.ViewGroup.LayoutParams), come layout_height e layout_width, nonché i parametri di margine (ViewGroup.MarginLayoutParams), si applicano anche agli oggetti LinearLayout.
Invece di caricare una risorsa di layout direttamente usando il metodo setContentView () come mostrato in precedenza, è necessario invece creare il contenuto dello schermo in Java e quindi fornire un oggetto di layout principale che contenga tutti i contenuti del controllo da visualizzare come viste figlio per setContentView () metodo. In questo caso, il layout principale sarebbe il layout lineare.
Ad esempio, il codice seguente illustra come programmare in modo programmatico un'attività per creare un'istanza di un LinearLayout e posizionare tre oggetti TextView al suo interno nel suo metodo onCreate ():
public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.rainbow); TextView tv1 = new TextView (this); tv1.setText ( "PRIMA"); tv1.setTextSize (100); tv1.setGravity (Gravity.CENTER); TextView tv2 = new TextView (this); tv2.setTextSize (100); tv2.setGravity (Gravity.CENTER); tv2.setText ( "Middle"); TextView tv3 = new TextView (this); tv3.setTextSize (100); tv3.setGravity (Gravity.CENTER); tv3.setText ( "LAST"); 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 (TV1); ll.addView (TV2); ll.addView (TV3); setContentView (ll);
Le due figure seguenti mostrano come potrebbe apparire questo layout su un dispositivo in modalità verticale e orizzontale:
Diamo un'occhiata più da vicino alla lista dei codici Java sopra. Innanzitutto, vengono creati e configurati tre controlli TextView. Ognuno ha una dimensione del testo (dimensione del carattere), un allineamento del testo (gravità) e il testo stesso. Successivamente, viene creato un layout lineare con un orientamento verticale. I suoi parametri di layout permettono di riempire l'intero genitore (in questo caso, l'intero schermo) e la sua gravità fa sì che tutti i controlli figlio siano centrati all'interno dello schermo, anziché dall'angolo in alto a sinistra. Ciascuno dei tre controlli TextView viene aggiunto come visualizzazione secondaria utilizzando il metodo addView (). Infine, il layout lineare viene passato al metodo setContentView () come controllo genitore da visualizzare sullo schermo.
Come puoi vedere, il codice può aumentare rapidamente di dimensioni man mano che vengono aggiunti più controlli sullo schermo. Per organizzazione e manutenibilità, la definizione e l'utilizzo di layout a livello di programmazione è preferibile per il caso dispari piuttosto che per la norma.
Parliamo un po 'degli attributi che aiutano a configurare un layout lineare e i suoi controlli figli.
Alcuni attributi specifici si applicano ai layout lineari. Alcuni degli attributi più importanti che utilizzerai con i layout lineari includono:
Inoltre, gli attributi generali in stile ViewGroup si applicano ai layout lineari. Questi includono:
La maggior parte degli attributi di layout lineari sono piuttosto auto-esplicativi. Tuttavia, l'attributo layout_weight merita un po 'di ulteriore discussione. A differenza di altri attributi di layout lineari, che vengono applicati alla vista di layout lineare stessa, questo attributo si applica ai relativi controlli figlio. I valori di peso devono essere numeri (ad esempio, 50, .25, .10, .10, .05,), dove il totale se si sommano i valori di peso di tutti i bambini è uguale a 1 (100%).
Il peso di un bambino controlla quanto "importanza" o "spazio" è dato all'interno del suo layout lineare genitore. Questo è meglio illustrato usando un esempio. Torniamo al layout lineare dell'arcobaleno che abbiamo usato in precedenza. Per consentire a tutti i controlli figlio di "espandersi" per riempire lo stesso layout lineare, indipendentemente dalle dimensioni dello schermo, abbiamo usato layout_weight per assegnare pesi relativi a ogni TextView. Poiché ci sono sette colori che vogliamo dare lo stesso valore, abbiamo diviso 1 per 7 e ottenuto circa 0.143. Tuttavia, poiché volevamo che i pesi fossero pari a 1 in modo uniforme, cinque dei pesi dei controlli hanno ricevuto un valore di .14 e due ricevono un valore di 0,15 - una differenza sottile che rende la somma esattamente 1, ma è abbastanza evidente per il primo e l'ultimo controllo.
Questo trucco con i pesi funziona bene quando c'è spazio sufficiente sullo schermo perché tutti i controlli siano visualizzati correttamente. Detto questo, quando lo spazio diventa stretto, l'attributo peso può essere sovrascritto da altri fattori, come il ritaglio della vista o, nel caso di un TextView, cercando di non avvolgere il testo. Questo diventa evidente quando cambiamo il file di layout rainbow.xml per contenere un layout orizzontale simile (layout_height è impostato anche su fill_parent).
Le due figure seguenti mostrano come questo stesso layout (modificato solo in direzione orizzontale) come potrebbe apparire su un dispositivo in entrambe le modalità verticale e orizzontale:
Quello che ci aspettiamo è che le aree rosse e viola (peso 0,15) saranno leggermente più grandi degli altri colori (peso 0,14), ma questo non è il modo in cui viene visualizzato. Se si osserva attentamente RED TextView, dovrebbe occupare più spazio del suo vicino ORANGE TextView. Tuttavia, poiché "Rosso" è una parola breve, e "Arancione" non lo è, alcuni spintoni vengono eseguiti automaticamente per cercare di impedire che tutte le parole vengano avvolte. Il risultato è più piacevole, ma può essere un po 'fastidioso aggirare se questo non è l'effetto desiderato.
Le interfacce utente delle applicazioni Android sono definite utilizzando i layout e i layout lineari sono uno dei tipi di layout fondamentali utilizzati. Il layout lineare consente di organizzare i controlli figlio in un'unica riga (orizzontale) o singola colonna (verticalmente). Il posizionamento del controllo figlio può essere ulteriormente regolato utilizzando gli attributi di gravità e peso.
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.
Accentsconagua