Share
Questo tutorial ti insegnerà i fondamenti della costruzione di layout dell'interfaccia Android con XML. Continuare a leggere!
Quando inizi a sviluppare app per Android utilizzando Eclipse e il plug-in ADT, il potente editor di layout grafico di Eclipse è un ottimo punto di partenza per la progettazione visiva dell'interfaccia utente. Tuttavia, questo approccio "ciò che vedi è ciò che ottieni" ha i suoi limiti e ad un certo punto dovrai passare a XML.
Uno dei principali vantaggi di dichiarare la tua interfaccia utente in XML è la capacità di mantenere separate l'interfaccia utente e il comportamento della tua app, dandoti la libertà di modificare la presentazione dell'app senza interromperne la funzionalità sottostante.
In questo articolo, ti mostrerò come progettare un layout XML di base da zero, includendo la definizione dell'elemento root, specificando i parametri di altezza e larghezza e aggiungendo alcuni elementi dell'interfaccia utente di base. Infine, userò questo layout di base per dimostrare alcune opzioni XML avanzate, come allocare quantità diverse di spazio a oggetti diversi e iniziare con le risorse stringa.
Nota: In Android, i layout XML devono essere memorizzati nella directory res / layout con l'estensione .xml.
Innanzitutto, ci abitueremo all'XML creando un'interfaccia utente Android molto semplice che utilizza il gruppo di visualizzazione LinearLayout per contenere un elemento casella di controllo. Apri il file res / layouts / activity_main.xml e cominciamo.
L'interfaccia utente deve contenere un singolo elemento radice che funge da contenitore visivo per tutti gli altri elementi. L'elemento radice può essere un ViewGroup (i.e LinearLayout, ListView, GridView) un elemento di unione o una vista, ma deve contenere lo spazio dei nomi XML. In questo esempio, userò LinearLayout, un ViewGroup che allinea tutti i bambini in una direzione specificata.
Un LinearLayout consiste in tag XML di apertura e chiusura:
< LinearLayout… >
Nella scheda di apertura, è necessario definire lo spazio dei nomi XML, che è uno standard raccomandato dal W3C. Definire lo spazio dei nomi XML in Android è facile, basta inserire il seguente codice e URL come parte del tag di apertura LinearLayout:
xmlns: Android = "http://schemas.android.com/apk/res/android"
Quindi, specificare i parametri width e height per l'elemento root. Nella maggior parte dei casi, utilizzerai il valore "fill_parent" per l'elemento root, in quanto ciò richiede di occupare l'intero schermo del dispositivo.
Immettere il seguente codice XML per i parametri altezza / larghezza:
android: layout_width = "fill_parent" android: layout_height = "fill_parent">
Il tuo XML dovrebbe ora assomigliare a questo:
È ora di aggiungere qualcosa a quella tela bianca! Inserisci il tag di apertura per la tua casella di controllo. Poiché questo è un elemento dell'interfaccia utente, è richiesto un ulteriore codice XML:
1) Identifica il tuo oggetto
Eclipse utilizza un ID intero per identificare diversi elementi dell'interfaccia utente all'interno di un albero. Questo dovrebbe essere referenziato come una stringa, usando l'attributo 'id' e la seguente sintassi:
Android: id = "@ + id / nome"
In questo esempio, faremo riferimento a questo elemento dell'interfaccia utente come "CheckBox:"
Android: id = "@ + id / casella di controllo"
2) Parametri larghezza / altezza: wrap_content
Ancora una volta, dovrai inserire i parametri altezza / larghezza. Impostando questo attributo su "wrap_content" verrà visualizzato l'elemento corrispondente abbastanza grande da includere il ridimensionamento del contenuto. Possiamo riutilizzare la struttura di sintassi altezza / larghezza da precedenti, sostituendo 'fill_parent' con 'wrap_content:'
android: layout_width = "wrap_content" android: layout_height = "wrap_content"
3) Imposta il tuo testo
Infine, dovrai specificare il testo che dovrebbe apparire accanto alla casella di controllo. Impostiamo la casella di controllo per visualizzare "Sì":
android: text = "Yes" />
Il tuo XML dovrebbe ora assomigliare a questo:
Esegui il tuo codice nell'emulatore Android per vedere il tuo XML in azione!
Nella seconda parte di questo tutorial, vedremo alcuni XML più avanzati per mettere a punto l'interfaccia utente. Creeremo un layout composto da due pulsanti e quindi utilizzeremo l'attributo 'peso' per modificare la percentuale di spazio del layout allocata a ciascuno prima di ricoprire brevemente le basi delle risorse stringa.
Il primo passo è creare le barebone del tuo layout. Riutilizzeremo l'elemento root LinearLayout dell'esempio precedente, insieme ai parametri width / height e, ovviamente, allo spazio dei nomi XML:
Per creare il primo pulsante, aggiungi il tag di apertura 'Pulsante' e l'ID intero utilizzando il nome dell'elemento 'button1.'
Accentsconagua