Progettazione dell'interfaccia utente Android layout del frame

I layout dei fotogrammi sono uno dei tipi di layout più semplici utilizzati per organizzare i controlli nell'interfaccia utente di un'applicazione Android.
Capire i layout è importante per una buona progettazione delle applicazioni Android. In questo tutorial, si impara tutto sui layout dei frame, che vengono principalmente utilizzati per organizzare i controlli di visualizzazione singoli o sovrapposti sullo schermo. Se usato correttamente, i layout dei frame possono essere il layout fondamentale su cui possono essere progettate molte interfacce utente di applicazioni Android interessanti.

Cos'è un layout della cornice?

I layout di frame sono uno dei tipi di layout più semplici ed efficienti usati dagli sviluppatori Android per organizzare i controlli di visualizzazione. Vengono utilizzati meno spesso rispetto ad altri layout, semplicemente perché generalmente vengono utilizzati per visualizzare solo una vista o viste che si sovrappongono. Il layout del frame viene spesso utilizzato come layout contenitore, in quanto generalmente ha una sola vista figlio (spesso un altro layout, utilizzato per organizzare più di una vista).

SUGGERIMENTO: in effetti, in un punto vengono visualizzati i layout dei fotogrammi utilizzati come layout principale di qualsiasi risorsa di layout che si progetta. Se apri la tua applicazione nello strumento Hierarchy Viewer (uno strumento utile per il debug dei tuoi layout di applicazione), vedrai che tutte le risorse di layout che disegni sono visualizzate all'interno di una vista genitore-un layout di cornice.

I layout delle cornici sono molto semplici, il che li rende molto efficienti. Possono essere definiti all'interno delle risorse di layout XML o in modo programmatico nel codice Java dell'applicazione. Una vista secondaria all'interno di un frame è sempre disegnata rispetto all'angolo in alto a sinistra dello schermo. Se esistono più viste secondarie, vengono disegnate, nell'ordine, una sopra l'altra. Ciò significa che la prima vista aggiunta al layout del frame verrà visualizzata nella parte inferiore della pila e l'ultima vista aggiunta verrà visualizzata in alto.

Diamo un'occhiata ad un semplice esempio. Diciamo che abbiamo un layout di fotogramma dimensionato per controllare l'intero schermo (in altre parole, gli attributi layout_width e layout_height sono entrambi impostati su match_parent). Potremmo quindi aggiungere tre controlli figlio a questo layout di cornice:

  • Un ImageView con una foto di un lago.
  • Un TextView con del testo da visualizzare verso la parte superiore dello schermo.
  • Una TextView con del testo da mostrare verso la parte inferiore dello schermo (usa semplicemente l'attributo layout_gravity per avere il TextView? Sink? Alla fine del genitore).

La figura seguente mostra come apparirebbe questo tipo di layout sullo schermo.

Definizione di una risorsa di layout XML con un layout di frame

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 semplice layout del frame introdotto nella sezione precedente. Ancora una volta, questa schermata è fondamentalmente un layout di frame con tre viste child: un'immagine che riempie l'intero schermo, su cui sono disegnati due controlli di testo, ciascuno con lo sfondo trasparente predefinito. Questo file di risorse di layout, denominato /res/layout/framed.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/framed.xml, quella riga di codice sarebbe:

 setContentView (R.layout.framed); 

Definizione di un layout del fotogramma a livello di programmazione

È anche possibile creare e configurare a livello di programmazione i layout dei frame. Questo viene fatto usando la classe FrameLayout (android.widget.FrameLayout). Troverai i parametri specifici del frame nella classe FrameLayout.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 FrameLayout.
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 principale.
Ad esempio, il codice seguente illustra come riprodurre lo stesso layout descritto in precedenza a livello di codice. Nello specifico, abbiamo un'attività che istanzia un FrameLayout e posiziona un controllo ImageView seguito da due controlli TextView al suo interno nel suo metodo onCreate ():

public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); TextView tv1 = new TextView (this); tv1.setText (R.string.top_text); tv1.setTextSize (40); tv1.setTextColor (Color.BLACK); TextView tv2 = new TextView (this); tv2.setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM)); tv2.setTextSize (50); tv2.setGravity (Gravity.RIGHT); tv2.setText (R.string.bottom_text); tv2.setTextColor (Color.White); ImageView iv1 = new ImageView (questo); iv1.setImageResource (R.drawable.lake); iv1.setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); iv1.setScaleType (ScaleType.MATRIX); FrameLayout fl = new FrameLayout (questo); fl.setLayoutParams (new LayoutParams (LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); fl.addView (IV1); fl.addView (TV1); fl.addView (TV2); setContentView (fl);  

Lo schermo risultante ha lo stesso aspetto della figura mostrata in precedenza.

Quando utilizzare i layout della cornice

Con altri potenti tipi di layout come layout lineari, layout relativi e layout di tabella a disposizione, è facile dimenticare il layout del frame. L'efficienza del layout di una cornice lo rende una buona scelta per gli schermi contenenti pochi controlli di visualizzazione (schermate iniziali, schermate di gioco con una singola tela e simili). A volte altri progetti di layout inefficienti possono essere ridotti a un design del layout della cornice più efficiente, mentre altre volte è appropriato un tipo di layout più specializzato. I layout dei fotogrammi sono il normale layout di scelta quando si desidera sovrapporre le viste.

Guardando i controlli simili

FrameLayout è relativamente semplice. Per questo motivo, numerosi altri tipi di layout e controlli di visualizzazione sono basati su di esso. Ad esempio, ScrollView è semplicemente un FrameLayout con barre di scorrimento quando il contenuto secondario è troppo grande per disegnare entro i limiti del layout. Tutti i widget delle app della schermata Home risiedono in un FrameLayout.
Una notevole aggiunta a tutti i FrameLayout è che possono prendere un primo piano disegnabile oltre allo sfondo normale. Questo viene fatto tramite l'attributo android: foreground XML. Questo potrebbe essere usato per, letteralmente, una cornice attorno alle viste sottostanti.

Conclusione

Le interfacce utente delle applicazioni Android sono definite utilizzando i layout e i layout dei frame sono uno dei tipi di layout più semplici ed efficienti disponibili. I controlli figli di un layout di frame sono disegnati rispetto all'angolo in alto a sinistra del layout. Se esistono più viste secondarie all'interno del layout della cornice, vengono disegnate in ordine, con l'ultima vista secondaria in cima.