Guida per principianti al layout di Android

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.

Lo schema

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.

Larghezza e altezza

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.

Imbottitura

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!

margini

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.

Cosa è 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.

Contesto

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à.

Componenti del bambino

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.

ID componente

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.

Testo componente

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