Layout nelle visualizzazioni
Un layout definisce la struttura di un'interfaccia utente nella tua app, ad esempio in
un
attività. Tutti gli elementi in
sono creati utilizzando una gerarchia
View
e
ViewGroup
di oggetti strutturati. In genere, l'elemento View
disegna qualcosa che l'utente può vedere e
interagire con loro. Un ViewGroup
è un container invisibile che definisce
la struttura del layout per View
e altri ViewGroup
degli oggetti, come mostrato nella Figura 1.
Gli oggetti View
sono spesso chiamati widget e possono essere uno di
molte sottoclassi,
Button
o
TextView
. La
Gli oggetti ViewGroup
sono generalmente chiamati layout e possono essere uno solo
di molti tipi con una struttura di layout diversa, ad esempio:
LinearLayout
o
ConstraintLayout
.
Puoi dichiarare un layout in due modi:
- Dichiara gli elementi UI in XML. Android fornisce un file XML semplice
vocabolario che corrisponde alle classi e alle sottoclassi
View
, come quelli per widget e layout. Puoi anche usare il database di Android Studio Editor del layout per creare il tuo XML utilizzando un'interfaccia di trascinamento. - Crea un'istanza degli elementi di layout in fase di runtime. La tua app può creare
View
eViewGroup
oggetti e manipolano i relativi in modo programmatico.
Dichiarare la tua UI in XML ti consente di separare la presentazione della tua app da il codice che ne controlla il comportamento. L'utilizzo dei file XML semplifica inoltre fornire layout diversi a seconda delle dimensioni e degli orientamenti dello schermo. Questo è più avanti in Supporto di schermi diversi dimensioni.
Il framework Android offre la flessibilità di utilizzare una o entrambe per creare l'UI della tua app. Ad esempio, puoi dichiarare la proprietà i layout predefiniti in XML e poi modificare il layout in fase di runtime.
Scrivi il file XML
Utilizzando il vocabolario XML di Android, puoi progettare rapidamente i layout dell'interfaccia utente elementi della schermata che contengono, nello stesso modo in cui crei pagine web in HTML con una serie di elementi nidificati.
Ogni file di layout deve contenere esattamente un elemento radice, che deve essere un
Oggetto View
o ViewGroup
. Dopo aver definito il cluster
puoi aggiungere altri oggetti di layout o widget come elementi secondari
creare gradualmente una gerarchia View
che definisce il layout. Per
ad esempio, ecco un layout XML che utilizza un LinearLayout
verticale per
contengono TextView
e Button
:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>
Dopo aver dichiarato il layout in XML, salva il file con il
.xml
nell'estensione res/layout/
del tuo progetto Android
in modo che venga compilato correttamente.
Per ulteriori informazioni sulla sintassi di un file XML di layout, consulta Risorsa di layout.
Carica la risorsa XML
Quando compili la tua app, ogni file di layout XML viene compilato in un
View
risorsa. Carica la risorsa di layout nel
Activity.onCreate()
dell'implementazione della callback. Per farlo, chiama
setContentView()
,
passando il riferimento alla risorsa di layout nel formato:
R.layout.layout_file_name
. Ad esempio, se il tuo file XML
layout è salvato come main_layout.xml
, caricalo per
Activity
come segue:
Kotlin
fun onCreate(savedInstanceState: Bundle) { super.onCreate(savedInstanceState) setContentView(R.layout.main_layout) }
Java
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); }
Il framework Android chiama il metodo di callback onCreate()
Activity
al lancio di Activity
. Per ulteriori informazioni
informazioni sui cicli di vita delle attività, vedi
Introduzione ai
attività.
Attributi
Ogni oggetto View
e ViewGroup
supporta il proprio
una varietà di attributi XML. Alcuni attributi sono specifici di un View
. Ad esempio, TextView
supporta textSize
. Tuttavia, questi attributi vengono ereditati anche da qualsiasi View
che estendono questa classe. Alcuni sono comuni a tutti i View
oggetti, poiché sono ereditati dalla classe principale View
, come
l'attributo id
. Altri attributi sono considerati layout
parametri, che sono attributi che descrivono determinati orientamenti del layout
dell'oggetto View
, come definito dal relativo elemento principale
ViewGroup
oggetto.
ID
A qualsiasi oggetto View
può essere associato un ID intero per
identificare in modo univoco View
all'interno dell'albero. Quando l'app è
viene compilato, viene fatto riferimento a questo ID come un numero intero, ma in genere l'ID viene assegnato
nel file XML di layout come stringa nell'attributo id
. Si tratta di un
Attributo XML comune a tutti gli oggetti View
ed è definito dal
View
corso. Lo usi molto spesso. La sintassi di un ID all'interno di un
Il tag XML è il seguente:
android:id="@+id/my_button"
Il simbolo at (@) all'inizio della stringa indica che
il parser XML analizza ed espande il resto della stringa ID e la identifica come
di una risorsa ID. Il simbolo più (+) indica che si tratta di un nuovo nome risorsa
che devono essere creati e aggiunti alle tue risorse in R.java
.
Il framework Android offre molte altre risorse ID. Quando si fa riferimento a un
ID risorsa Android, non è necessario il simbolo più, ma devi aggiungere il carattere
Spazio dei nomi del pacchetto android
, come segue:
android:id="@android:id/empty"
Lo spazio dei nomi del pacchetto android
indica che fai riferimento
un ID della classe delle risorse android.R
, anziché la risorsa
risorse.
Per creare visualizzazioni e farvi riferimento dalla tua app, puoi utilizzare una comune come segue:
- Definisci una vista nel file di layout e assegnale un ID univoco, ad esempio
nell'esempio seguente:
<Button android:id="@+id/my_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/my_button_text"/>
- Crea un'istanza dell'oggetto view e acquisiscila dal layout,
di solito nel
onCreate()
, come illustrato nell'esempio seguente:Kotlin
val myButton: Button = findViewById(R.id.my_button)
Java
Button myButton = (Button) findViewById(R.id.my_button);
La definizione degli ID per gli oggetti vista è importante quando si crea una
RelativeLayout
.
In un layout relativo, le visualizzazioni gemelle possono definire il proprio layout rispetto a un'altra
vista di pari livello, a cui fa riferimento l'ID univoco.
Un ID non deve essere necessariamente univoco in tutta la struttura ad albero, ma deve essere univoci nella parte dell'albero che cerchi. Spesso potrebbe trattarsi dell'intero quindi è meglio renderla unica, se possibile.
Parametri di layout
Definiscono gli attributi di layout XML denominati layout_something
i parametri di layout per View
che siano appropriati per
ViewGroup
in cui risiede.
Ogni classe ViewGroup
implementa una classe nidificata che si estende
ViewGroup.LayoutParams
.
Questa sottoclasse contiene tipi di proprietà che definiscono le dimensioni e la posizione di ogni
vista secondaria, in base alle esigenze del gruppo di visualizzazione. Come mostrato nella figura 2, l'elemento principale
Il gruppo di viste definisce i parametri di layout per ogni vista secondaria, inclusa quella secondaria
visualizza gruppo.
Ogni sottoclasse LayoutParams
ha la propria sintassi per l'impostazione
e i relativi valori. Ogni elemento secondario deve definire un LayoutParams
che sia
appropriato per l'elemento principale, anche se potrebbe anche definire un
LayoutParams
per i propri figli.
Tutti i gruppi di visualizzazioni includono larghezza e altezza, utilizzando layout_width
e layout_height
e ogni vista è necessaria per definirli. Molti
LayoutParams
includono margini e bordi facoltativi.
Puoi specificare la larghezza e l'altezza con misure esatte, ma non voglio farlo spesso. Molto spesso, si utilizza una di queste costanti per impostare per larghezza o altezza:
wrap_content
: indica alla visualizzazione di ridimensionarsi dimensioni richieste dai suoi contenuti.match_parent
: indica che la visualizzazione deve diventare grande quanto l'elemento principale gruppo di visualizzazioni lo consente.
In generale, sconsigliamo di specificare la larghezza e l'altezza del layout utilizzando
come i pixel. Un approccio migliore consiste nell'utilizzare
misurazioni relative,
come ad esempio unità pixel indipendenti dalla densità (dp), wrap_content
o
match_parent
, perché consente alla tua app di essere visualizzata correttamente su un
di schermi di dispositivi di varie dimensioni. I tipi di misurazione accettati sono definiti in
Risorsa di layout.
Posizione layout
Una vista ha una geometria rettangolare. Ha una posizione, espressa come coppia Coordinate di left e top e due dimensioni, espresse come e larghezza e altezza. L'unità di misura per posizione e dimensioni è il pixel.
Puoi recuperare la posizione di una vista richiamando i metodi
getLeft()
e
getTop()
.
Il primo restituisce la coordinata di sinistra (x) del rettangolo che rappresenta
la vista. Quest'ultimo restituisce la coordinata superiore (y) del rettangolo
che rappresenta la vista. Questi metodi restituiscono la posizione della vista in relazione a
per l'elemento principale. Ad esempio, se getLeft()
restituisce 20, significa che la
si trova a 20 pixel a destra del bordo sinistro della sua
principale.
Inoltre, esistono metodi pratici per evitare calcoli non necessari:
ossia
getRight()
e
getBottom()
.
Questi metodi restituiscono le coordinate dei bordi destro e inferiore del
rettangolo che rappresenta la vista. Ad esempio, la chiamata a getRight()
simile al seguente calcolo: getLeft() + getWidth()
.
Dimensioni, spaziatura interna e margini
Le dimensioni di una visualizzazione sono espresse con larghezza e altezza. Una vista ha due coppie di valori di larghezza e altezza.
La prima coppia è nota come larghezza misurata e
altezza misurata. Queste dimensioni definiscono le dimensioni di una visualizzazione
all'interno di quella principale. Puoi ottenere le dimensioni misurate richiamando
getMeasuredWidth()
e
getMeasuredHeight()
.
La seconda coppia è nota come width e height o a volte
larghezza del disegno e altezza del disegno. Queste dimensioni definiscono
dimensioni effettive della visualizzazione sullo schermo, al momento del disegno e dopo il layout. Questi
possono differire, ma non necessariamente, dalla larghezza e dall'altezza misurate. Tu
ottenere la larghezza e l'altezza richiamando
getWidth()
e
getHeight()
.
Per misurare le dimensioni, una vista prende in considerazione la spaziatura interna. Spaziatura interna
è espresso in pixel per le parti sinistra, superiore, destra e inferiore della visualizzazione.
Puoi utilizzare la spaziatura interna per compensare i contenuti della visualizzazione in base a un numero specifico di
pixel. Ad esempio, una spaziatura interna sinistra di due spinge il contenuto della visualizzazione di due pixel.
a destra del bordo sinistro. Puoi impostare la spaziatura interna utilizzando
setPadding(int, int, int, int)
ed eseguirvi query richiamando
getPaddingLeft()
,
getPaddingTop()
,
getPaddingRight()
,
e
getPaddingBottom()
.
Sebbene una vista possa definire una spaziatura interna, non supporta i margini. Tuttavia,
non supportano i margini. Consulta
ViewGroup
e
ViewGroup.MarginLayoutParams
per ulteriori informazioni.
Per ulteriori informazioni sulle dimensioni, consulta Dimensione.
Oltre a impostare in modo programmatico i margini e la spaziatura interna, puoi anche impostarli nei layout XML, come mostrato nell'esempio seguente:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:padding="8dp" android:text="Hello, I am a TextView" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:paddingBottom="4dp" android:paddingEnd="8dp" android:paddingStart="8dp" android:paddingTop="4dp" android:text="Hello, I am a Button" /> </LinearLayout>
L'esempio precedente mostra l'applicazione di margine e spaziatura interna. La
TextView
presenta margini e spaziatura interna uniformi applicati tutt'intorno e
la Button
mostra come applicarli in modo indipendente a
i bordi.
Layout comuni
Ogni sottoclasse della classe ViewGroup
fornisce un modo unico per
mostrare le viste nidificate al suo interno. Il tipo di layout più flessibile e quello
che offre i migliori strumenti per mantenere la gerarchia del layout superficiale,
ConstraintLayout
.
Di seguito sono riportati alcuni dei tipi di layout comuni integrati in Android. completamente gestita.
Organizza i relativi elementi secondari in una singola riga orizzontale o verticale e crea Una barra di scorrimento se la lunghezza della finestra supera quella dello schermo.
Creare elenchi dinamici
Se i contenuti del layout sono dinamici o non predeterminati, puoi
utilizzare
RecyclerView
o
una sottoclasse
AdapterView
.
RecyclerView
è generalmente l'opzione migliore perché utilizza la memoria
in modo più efficiente rispetto a AdapterView
.
Layout comuni possibili con RecyclerView
e
AdapterView
include:
RecyclerView
offre più possibilità
l'opzione per
crea un'immagine personalizzata
Gestione layout.
Riempire una vista adattatore con i dati
Puoi compilare
AdapterView
come ListView
o
GridView
di
associando l'istanza AdapterView
a un
Adapter
,
che recupera i dati da un'origine esterna e crea un View
che rappresenta ogni voce di dati.
Android offre diverse sottoclassi di Adapter
utili
per recuperare diversi tipi di dati e creare viste per un
AdapterView
. I due adattatori più comuni sono:
ArrayAdapter
- Utilizza questo adattatore se l'origine dati è un array. Per impostazione predefinita,
ArrayAdapter
crea una vista per ogni elemento dell'array richiamandotoString()
su ogni elemento e inserendo i contenuti in unTextView
.Ad esempio, se hai un array di stringhe da visualizzare in un
ListView
, inizializza un nuovoArrayAdapter
utilizzando un per specificare il layout per ogni stringa e l'array di stringhe:Kotlin
val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)
Java
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray);
Gli argomenti per questo costruttore sono i seguenti:
- La tua app
Context
- Il layout che contiene un valore
TextView
per ogni stringa nel array - L'array di stringhe
Quindi chiama
setAdapter()
suListView
:Kotlin
val listView: ListView = findViewById(R.id.listview) listView.adapter = adapter
Java
ListView listView = (ListView) findViewById(R.id.listview); listView.setAdapter(adapter);
Per personalizzare l'aspetto di ogni elemento, puoi eseguire l'override delle
toString()
per gli oggetti nell'array. Oppure, per creare una visualizzazione per ogni elemento che è diverso da unaTextView
, ad esempio, se vuoi cheImageView
per ogni elemento dell'array: estendi la classeArrayAdapter
eseguire l'overridegetView()
per restituire il tipo di visualizzazione desiderato. - La tua app
SimpleCursorAdapter
- Usa questo adattatore quando i dati provengono da una
Cursor
. Quando usiSimpleCursorAdapter
, specifica un layout per ogni riga inCursor
e quali colonneCursor
da inserire nelle visualizzazioni del layout desiderato. Ad esempio, se vuoi creare un elenco di nomi e numeri di telefono numeri, puoi eseguire una query che restituisce unCursor
contenente una riga per ogni persona e colonne per i nomi e i numeri. Tu e poi creare un array di stringhe che specifichi quali colonneCursor
che vuoi nel layout per ogni risultato e un numero intero che specifichi le viste corrispondenti che ogni colonna deve posizionato:Kotlin
val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER) val toViews = intArrayOf(R.id.display_name, R.id.phone_number)
Java
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int[] toViews = {R.id.display_name, R.id.phone_number};
Quando crei un'istanza per
SimpleCursorAdapter
, passa il parametro layout da usare per ogni risultato, il valoreCursor
contenente il dei risultati, e questi due array:Kotlin
val adapter = SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0) val listView = getListView() listView.adapter = adapter
Java
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); ListView listView = getListView(); listView.setAdapter(adapter);
SimpleCursorAdapter
crea quindi una vista per ogni riga inCursor
utilizzando il layout fornito inserendo ognifromColumns
elemento neltoViews
corrispondente vista.
Se nel corso della vita dell'app modifichi i dati sottostanti che
viene letto dall'adattatore, richiama
notifyDataSetChanged()
.
La vista allegata viene informata che i dati sono stati modificati e l'aggiornamento viene eseguito
per trovare le regole.
Gestire gli eventi di clic
Puoi rispondere agli eventi di clic su ciascun elemento in AdapterView
implementando
AdapterView.OnItemClickListener
a riga di comando. Ad esempio:
Kotlin
listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id -> // Do something in response to the click. }
Java
// Create a message handling object as an anonymous class. private OnItemClickListener messageClickedHandler = new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { // Do something in response to the click. } }; listView.setOnItemClickListener(messageClickedHandler);
Risorse aggiuntive
Scopri come vengono utilizzati i layout Girasole app demo su GitHub.