Mentre Activity gestisce l'interazione dell'utente con la tua app, Layout determina come deve apparire l'app. In questo post, imparerai come un layout definisce la struttura visiva per un'interfaccia utente, come l'interfaccia utente per un'attività o un widget dell'app.
Il file di layout è un file XML che descrive la GUI di una schermata della tua app. Per questo esempio, creeremo un layout lineare, che viene utilizzato per visualizzare i componenti della GUI fianco a fianco. Questi componenti possono essere visualizzati verticalmente o orizzontalmente. Se visualizzati orizzontalmente, vengono visualizzati in una singola riga. Se visualizzati verticalmente, vengono visualizzati in una singola colonna.
Ecco un esempio di come appare un layout lineare.
Nell'immagine sottostante, puoi vedere il codice e come viene visualizzato su un dispositivo Android.
Il layout inizia con una dichiarazione XML. Specifica la versione XML e la codifica.
La riga successiva è il tag di apertura per il layout lineare. Al suo interno, hai una linea che assomiglia a questo:
xmlns: Android = "http://schemas.android.com/apk/res/android"
Specifica lo spazio dei nomi XML, utilizzato per fornire nomi univoci per elementi e attributi in un documento XML. xmlns
: Android
qui descrive lo spazio dei nomi di Android. Questo sistema di namespace è stato scelto da Google per aiutare Android Studio a gestire gli errori durante la compilazione. Lo spazio dei nomi Android aiuta a distinguere i widget Android ufficiali da quelli personalizzati. Ad esempio, ti consente di distinguere tra una personalizzata TextView
widget e Android TextView
widget di. L'URI dello spazio dei nomi è http://schemas.android.com/apk/res/android
.
Il prossimo spazio dei nomi-xmlns: strumenti
-ti dà accesso agli attributi degli strumenti. Questo non è lo spazio dei nomi predefinito: puoi costruire la tua applicazione Android senza farne uso. Tuttavia, il suo utilizzo consente di aggiungere metadati ai file di risorse che aiutano nella manipolazione e rendering dei layout nella visualizzazione Progettazione. Quando si fa riferimento a elementi o attributi forniti dagli attributi degli strumenti, è necessario aggiungere il prefisso degli strumenti. Spiegherò in seguito come utilizziamo gli attributi degli strumenti in questo codice.
Per ora, diamo un'occhiata alla prossima parte.
android: layout_width = "match_parent" android: layout_height = "match_parent" android: padding = "16dp" android: orientation = "vertical"
Questi attributi vengono utilizzati per determinare la larghezza e l'altezza del layout. Indicano anche la quantità di imbottitura da utilizzare e se i componenti devono essere posizionati verticalmente o orizzontalmente. Qui, viene scelto l'orientamento verticale.
Android: layout_width
e Android: layout_height
vengono utilizzati per specificare la larghezza e l'altezza da utilizzare per il componente di layout. Puoi usare i valori wrap_content
o partita genitore
per determinare la larghezza e l'altezza del tuo componente. wrap_content
significa che il layout (o la vista) dovrebbe essere abbastanza grande per il contenuto. partita genitore
significa che dovrebbe essere largo quanto il layout genitore.
Il riempimento è lo spazio tra la vista o il layout e il suo bordo. Quando usi Android: imbottitura
, lo spazio su tutti e quattro i lati della vista o il layout avranno la misura specificata. Se si desidera controllare separatamente le singole parti dell'imbottitura, è possibile utilizzarle Android: paddingBottom
, Android: paddingLeft
, Android: paddingRight
, e Android: paddingTop
. Nota che questi valori sono specificati in pixel "dp" indipendenti dalla densità. Maggiori informazioni su questi presto!
Mentre il padding viene applicato al layout o alla vista e al suo bordo (all'interno del componente), il margine viene applicato al layout o al bordo della vista e ad altri componenti circostanti all'esterno del componente. Puoi usare Android: layout_margin
per specificare il margine su tutti i lati contemporaneamente, oppure puoi controllare separatamente le singole parti dell'imbottitura Android: layout_marginBottom
, Android: layout_marginLeft
, Android: layout_marginRight
, e Android: layout_marginTop
. Questi sono anche specificati in dp.
dp
?Un pixel indipendente dalla densità, o dp in breve, è un'unità astratta che si basa sulla densità fisica dello schermo. I pixel indipendenti dalla densità vengono utilizzati quando si definiscono i layout dell'interfaccia utente. Sono usati per esprimere le dimensioni del layout o della posizione in un modo indipendente dalla densità. Puoi leggere ulteriori informazioni sull'indipendenza dalla densità in Android qui.
L'attributo context viene utilizzato per dichiarare l'attività a cui è associato il layout per impostazione predefinita. Qui puoi vedere che il layout di esempio è associato a MainActivity.
Strumenti: context = "com.tutsplus.code.android.tutsplusupload.MainActivity"
Puoi anche scrivere questo in una forma più breve come:
Strumenti: context = "MainActivity"
Viene utilizzato solo quando si lavora in Design View, in quanto un layout può essere associato a più attività.
I layout contengono componenti figlio. In realtà, questo è il loro unico scopo: organizzare e mostrare altri componenti.
Aggiungiamo alcuni componenti al layout lineare, iniziando con una vista pulsante.
Aggiungeremo anche una vista testuale, che ha proprietà molto simili a una vista pulsante.
Abbiamo coperto Android: layout_height
e Android: layout_width
, quindi ora vediamo gli altri.
Il Android: id
la proprietà è usata per dare al componente un nome identificativo. Questo ti permette di accedere al tuo componente all'interno del codice Java di un'attività, usando il findViewById ()
metodo.
Il Android: il testo
l'attributo viene utilizzato per indicare a Android ciò che il componente di testo dovrebbe visualizzare. Nel caso della vista del pulsante, verrà visualizzato il pulsante di testo.
Eseguiamo il nostro codice finora e vediamo come appare.
Ricapitolando, il primo elemento deve essere il layout che utilizzerai. Ecco qui LinearLayout
. L'orientamento specificato indica ad Android di visualizzare i componenti nel layout in un'unica colonna verticale. Il elemento è il primo elemento che verrà visualizzato. Occuperà la larghezza del genitore e la sua altezza sarà determinata dal suo contenuto testuale.
Il secondo elemento è una vista testuale che verrà visualizzata sotto il pulsante. Sia l'altezza che la larghezza saranno limitate all'altezza e alla larghezza del contenuto.
Nel nostro esempio sopra, abbiamo codificato il testo per la visualizzazione del testo usando android: text = "Questa è una vista testuale"
. Questo va bene quando inizi come principiante, ma non è l'approccio migliore. Supponiamo che tu abbia creato un'app che ha un grande successo su Google Play Store e che non vuoi limitarti a un solo paese o lingua. Se hai hardcoded tutto il testo nei file di layout, rendere la tua app disponibile per lingue diverse sarà difficile. Quindi qual è l'approccio migliore?
L'approccio migliore prevede l'inserimento dei valori di testo in un file di risorse stringa: strings.xml. Ciò semplifica l'internazionalizzazione della tua app. Rende più semplice apportare modifiche globali all'applicazione in quanto è necessario modificare un solo file.
Il strings.xml il file si trova nel app / src / main / res / valori cartella. Quando lo apri, dovrebbe avere una struttura come questa.
Upload di Tutsplus
Qui hai una risorsa stringa chiamata nome dell'applicazione
, con un valore di Upload di Tutsplus
.
È possibile aggiungere altre risorse di stringa utilizzando la stessa struttura. Per il pulsante e il testo nel layout, la struttura può apparire come questa.
Upload di Tutsplus Pulsante Questo è un testo!
Per utilizzare queste risorse di stringa nel layout, è necessario aggiornare la parte di testo di entrambe le visualizzazioni con la rispettiva risorsa.
android: text = "@ string / main_button" android: text = "@ string / first_text"
Il @stringa
dice ad Android di cercare un valore di testo nel file di risorse stringa. Dopo questo è il nome della risorsa. Android cercherà il valore della risorsa che corrisponde a quel nome e lo userà per il tuo componente.
In conclusione, ecco come apparirà il tuo layout:
In questo post hai imparato alcune nozioni di base su come lavorare con i layout. Mentre costruisci applicazioni più complesse, vedrai come tutte le parti combaciano. Dopo aver seguito questo post, dovresti essere in grado di capire come lavorare con layout lineari, viste di testo e pulsanti e risorse stringa.
Mentre sei qui, dai un'occhiata ad altri nostri fantastici post sullo sviluppo di app per Android.