Progettazione dell'interfaccia utente Android layout relativi

Capire i layout è importante per una buona progettazione delle applicazioni Android. In questo tutorial, si impara tutto sui layout relativi, che organizzano i controlli dell'interfaccia utente o dei widget, sullo schermo in relazione l'uno con l'altro o sul layout principale. Se utilizzati correttamente, i layout relativi possono essere il layout potente e flessibile su cui possono essere progettate molte interfacce utente di applicazioni Android interessanti.

Cos'è un layout relativo?

Dopo i layout lineari, che visualizzano i controlli in una singola riga o colonna, i layout relativi sono uno dei tipi più comuni di layout utilizzati dai progettisti dell'interfaccia utente Android. Proprio come gli altri layout, i layout relativi possono essere definiti all'interno delle risorse del layout XML o in modo programmatico nel codice Java dell'applicazione. Il layout relativo funziona esattamente come suggerisce il nome: organizza controlli l'uno rispetto all'altro o al controllo genitore stesso.

Cosa significa questo? Significa che i controlli figlio, come i controlli ImageView, TextView e Button, possono essere posizionati sopra, sotto, a sinistra oa destra, l'uno dell'altro. I controlli figlio possono anche essere posizionati in relazione al genitore (il relativo contenitore di layout), incluso il posizionamento dei controlli allineati ai bordi superiore, inferiore, sinistro o destro del layout.

Il posizionamento relativo del controllo secondario del layout viene definito utilizzando le regole. Queste regole definiscono come vengono visualizzati i controlli all'interno del relativo layout. Per l'elenco completo delle regole relative ai layout relativi, consultare la documentazione dell'SDK di Android per la classe RelativeLayout. Gli attributi XML associati per l'utilizzo nelle risorse XML sono anche definiti nella documentazione.

NOTA: le regole richiedono che ogni controllo figlio abbia il proprio attributo id impostato correttamente.

Un semplice layout relativo

I layout relativi sono spiegati meglio utilizzando un esempio. Diciamo che vogliamo progettare uno schermo con un controllo EditText e un controllo Button. Vogliamo che il pulsante venga visualizzato a destra del controllo EditText. Pertanto, potremmo definire un layout relativo con due controlli figlio: EditText e Button. Il controllo EditText potrebbe avere una regola che dice: allinea questo controllo nella parte sinistra del controllo genitore (il layout) e alla sinistra di un secondo controllo, un controllo Button. Nel frattempo, il controllo Button potrebbe avere una regola che dice: allinea questo controllo al lato destro del controllo genitore (il layout).

Le seguenti figure mostrano solo un layout relativo, visualizzato in modalità verticale o orizzontale. Il layout relativo ha due controlli figlio: un controllo EditText e un controllo Button.

Definizione di una risorsa di layout XML con un layout relativo

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 relativo introdotto nella sezione precedente. Questo file di risorse di layout, giustamente denominato /res/layout/relative.xml, è definito in XML come segue:

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/relative.xml, quella riga di codice sarebbe:

 setContentView (R.layout.relative); 

Questo layout relativo ha la larghezza e l'altezza impostate per riempire lo schermo e tre regole configurate sui relativi controlli figlio:

• EditText01: allinea al lato sinistro del layout
• EditText01: Visualizza a sinistra di Button01
• Button01: allinea al lato destro del layout

Definizione di un layout relativo a livello di codice

È inoltre possibile creare e configurare i layout relativi a livello di codice. Questo viene fatto usando la classe RelativeLayout (android.widget.Relative). Troverai i parametri specifici del bambino nella classe RelativeLayout.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 RelativeLayout.
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 sarà il layout relativo.
Ad esempio, il codice seguente illustra come programmare in modo programmatico un'attività per creare un'istanza di RelativeLayout e posizionare un controllo TextView e un pulsante all'interno di esso nel suo metodo onCreate (), molto simile a quello mostrato nella sezione precedente:

public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); // setContentView (R.layout.relative); EditText ed = new EditText (questo); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); params.addRule (RelativeLayout.ALIGN_PARENT_LEFT); // usa lo stesso id come definito quando si aggiunge il pulsante params.addRule (RelativeLayout.LEFT_OF, 1001); ed.setLayoutParams (params); ed.setHint ("Enter some text ..."); Pulsante but1 = new Button (this); RelativeLayout.LayoutParams params2 = new RelativeLayout.LayoutParams (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params2.addRule (RelativeLayout.ALIGN_PARENT_RIGHT); but1.setLayoutParams (params2); but1.setText ("Premi qui!"); // dare al pulsante un id che conosciamo but1.setId (1001); RelativeLayout layout1 = new RelativeLayout (this); layout1.setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); layout1.addView (ed); layout1.addView (but1); setContentView (Layout1);  

Diamo un'occhiata più da vicino alla lista dei codici Java sopra. Per prima cosa creiamo un controllo EditText come di consueto. Gli diamo alcuni parametri RelativeLayout e quindi le sue regole. In questo caso, creiamo due regole per il controllo EditText.

Successivamente, creiamo un controllo Button e ne impostiamo la regola (allineato al bordo destro del layout principale). Infine, creiamo un oggetto RelativeLayout, impostiamo i suoi parametri, aggiungiamo i due controlli figlio usando il metodo addView () e cariciamo il layout relativo da visualizzare usando il metodo setContentView ().

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.

Esplorazione delle proprietà e degli attributi del layout relativo importante

Parliamo un po 'degli attributi che aiutano a configurare un layout relativo e i suoi controlli figli. Alcuni attributi specifici si applicano ai layout relativi, ovvero le regole figlio, tra cui:

• Regole per il centraggio del controllo figlio all'interno del layout principale, tra cui: centro in orizzontale, centro in verticale o entrambi.
• Regole per l'allineamento del controllo figlio all'interno del layout principale, tra cui: allinea con il margine superiore, inferiore, sinistro o destro di un altro controllo.
• Regole per l'allineamento del controllo figlio in relazione ad altri controlli figlio, tra cui: allineare con il margine superiore, inferiore, sinistro o destro.
• Regole per il posizionamento di controllo figlio in relazione ad altri controlli figli, tra cui: posizionamento a sinistra o a destra di un controllo specifico, o sopra o sotto un altro controllo.

Inoltre, gli attributi generali in stile ViewGroup si applicano ai layout relativi. Questi includono:

• Parametri di layout generici come layout_height (richiesto) e layout_width (richiesto) (classe: ViewGroup.LayoutParams)
• Parametri di layout del margine come margin_top, margin_left, margin_right e margin_bottom (classe: ViewGroup. MarginLayoutParams)
• Parametri di layout come layout_height e layout_width (classe: ViewGroup.LayoutParams)

Ora mettiamo alcune di queste regole in azione!

Lavorare con le regole di layout

Diamo un'occhiata a uno schermo più complesso. Ai fini di questo esercizio, inizieremo guardando la progettazione finale dello schermo, e quindi lavoreremo all'indietro, discutendo le relative caratteristiche di layout e le regole utilizzate per ottenere questo risultato finale.

Diciamo che vogliamo progettare uno schermo simile a questo:

Per progettare questa schermata utilizzando un layout relativo, continua con i seguenti passaggi.

Passaggio 1: definire un layout relativo nel file di risorse XML

Innanzitutto, definisci un layout relativo nel tuo file di risorse XML. Poiché desideri che questo layout controlli il contenuto dell'intero schermo, imposta gli attributi di altezza e larghezza su fill_parent. Il tuo file di risorse XML dovrebbe ora assomigliare a questo:

Passaggio 2: determinare i controlli figlio

Successivamente, determiniamo i controlli figlio di cui abbiamo bisogno. In questo caso, abbiamo bisogno di sette controlli TextView (uno per ogni colore). Configuralo come faresti normalmente, impostando gli attributi del testo su stringhe, colori di sfondo, dimensioni dei caratteri, ecc. Posiziona ognuno di questi controlli all'interno del tuo layout relativo.

Passaggio 3: definire le regole del layout relativo

Successivamente, definiamo le regole per ogni controllo figlio, al fine di indurlo a disegnare nelle posizioni appropriate:

• Il controllo RED TextView non ha impostazioni specifiche configurate. Per impostazione predefinita, questo controllo verrà disegnato nell'angolo in alto a sinistra del layout principale.
• Il controllo ORANGE TextView è centrato orizzontalmente nel layout principale. Poiché tutti i controlli vengono impostati automaticamente nell'angolo in alto a sinistra dello schermo, questo ancoraggio efficace al controllo sul margine medio superiore del layout principale.
• Il controllo TextView GIALLO è allineato al bordo destro del layout principale. Poiché tutti i controlli vengono impostati automaticamente nell'angolo in alto a sinistra dello schermo, questo ancoraggio efficace del controllo all'angolo in alto a destra del layout principale.
• Il controllo GREEN TextView è centrato verticalmente all'interno del layout principale e configurato per visualizzare a sinistra del controllo BLUE TextView.
• Il controllo BLUE TextView è allineato al centro (orizzontalmente e verticalmente) del controllo genitore. Questo lo visualizza nel mezzo dello schermo.
• Il controllo INDIGO TextView è centrato verticalmente all'interno del layout principale e configurato per visualizzare a destra del controllo BLUE TextView.
• Il controllo VIOLET TextView è allineato al bordo inferiore del layout principale. La sua larghezza è anche impostata per riempire il genitore, permettendogli di allungare attraverso il bordo inferiore dello schermo.

Se definisci queste regole nel tuo file di risorse XML, ora dovrebbe assomigliare a questo:

Suggerimenti sull'utilizzo di RelativeLayout

Ecco alcuni suggerimenti per lavorare con i relativi layout.

• I controlli figlio relativi al layout devono avere attributi ID univoci per applicare correttamente le regole.
• Fai attenzione alle regole circolari. Le regole circolari si verificano quando due controlli hanno regole che puntano l'una sull'altra. Se includi un insieme circolare di regole nella progettazione del layout, visualizzerai il seguente errore:

  IllegalStateException: le dipendenze circolari non possono esistere in un RelativeLayout 

  Può essere utile ricordare che le relative regole di layout sono applicate in un unico passaggio.

• Mantieni le tue regole di layout relative al minimo. Ciò aiuta a ridurre la possibilità di regole circolari e rende il tuo layout più gestibile e flessibile.
• Come al solito, ricordati di verificare che il layout del tuo layout funzioni come previsto in entrambe le modalità verticale e orizzontale, nonché su diverse dimensioni e risoluzioni dello schermo.
• Usa layout relativi invece di nidificare layout lineari per migliorare le prestazioni e la reattività dell'applicazione.

Conclusione

Le interfacce utente delle applicazioni Android sono definite utilizzando i layout e i relativi layout sono uno dei tipi di layout utilizzati per creare schermate applicative flessibili e potenti. Il layout relativo consente di organizzare i controlli figlio in relazione l'uno con l'altro e rispetto al genitore (i bordi e centrato verticalmente e orizzontalmente). Una volta padroneggiate le regole di come i layout relativi, possono essere incredibilmente versatili, consentendo di creare layout complessi senza il sovraccarico di annidare layout diversi, migliorando così le prestazioni.