Pubblicato da Takeshi Hagikura, Developer Programs Engineer
In occasione di Google I/O lo scorso anno, abbiamo presentato
ConstraintLayout, che consente di creare layout complessi pur mantenendo la gerarchia a visualizzazione non strutturata. Questo prodotto è completamente supportato in
Visual Layout Editor di Android Studio.
Al tempo stesso, abbiamo reso
FlexboxLayout open source per offrire le stesse funzionalità del
Modulo CSS Flexible Layout in Android. Ecco qui alcuni esempi per dimostrare la grande efficacia di
FlexboxLayout.
FlexboxLayout può essere considerato come un LinearLayout avanzato, dal momento che entrambi i layout allineano le visualizzazioni figlie in modo sequenziale. La differenza principale tra LinearLayout e
FlexboxLayout è che
FlexboxLayout presenta la funzione di disposizione delle immagini.
Ciò significa che se si aggiunge l'attributo
flexWrap="wrap",
FlexboxLayout colloca una visualizzazione nella riga successiva nel caso lo spazio nella riga corrente non sia sufficiente, come illustrato nella figura.
Un unico layout per dimensioni schermo diverse
Tenendo questa caratteristica a mente, vediamo cosa succede quando disponiamo le visualizzazioni in sequenza ma dobbiamo spostarle nella riga seguente, se lo spazio disponibile varia (a causa di fattori relativi al dispositivo, ai cambiamenti di orientamento o al ridimensionamento della finestra in modalità multi-finestra).
Pixel C con modalità multi-finestra abilitata e linea di divisione a sinistra
Pixel C con modalità multi-finestra abilitata e linea di divisione al centro
Pixel C con modalità multi-finestra abilitata e linea di divisione a destra
Sarà necessario definire più layout bucket DP (quali i layout-600dp, layout-720dp, layout-1020dp) per gestire le varie dimensioni dello schermo con layout tradizionali come
LinearLayout o
RelativeLayout. Tuttavia, la finestra di dialogo qui sopra è stata creata con un singolo
FlexboxLayout.
Nella tecnica utilizzata per l'esempio,
flexWrap="wrap" è stato impostato come indicato prima,
<com .google.android.flexbox.flexboxlayout android:layout_width="match_parent" android:layout_height="wrap_content" app:flexwrap="wrap">
quindi potrai ottenere il seguente layout, nel quale le visualizzazioni figlie sono allineate in una nuova riga, invece di creare l'overflow della visualizzazione padre.
Un'altra tecnica interessante è l'impostazione dell'attributo
layout_flexGrow a figlio individuale. Ciò consente di migliorare l'aspetto del layout finale quando rimane dello spazio libero. L'attributo
layout_flexGrow si comporta in modo simile a quello
layout_weight in
LinearLayout. Questo significa che
FlexboxLayout distribuirà lo spazio rimanente in base al valore
layout_flexGrow impostato per ciascun figlio nella stessa riga.
Nell'esempio seguente si presume che ogni figlio presenti l'attributo
layout_flexGrow impostato a
1, pertanto lo spazio restante viene distribuito equamente tra di loro.
<android .support.design.widget.TextInputLayout android:layout_width="100dp" android:layout_height="wrap_content" app:layout_flexgrow="1">
Puoi anche andare a vedere il file
layout xml completo nel repository GitHub.
Integrazione con RecyclerView
Un altro vantaggio di
FlexboxLayout è la sua integrazione con
RecyclerView. Nell'ultima release della
versione alfa, il nuovo
FlexboxLayoutManager estende
RecyclerView.LayoutManager, infatti ti consente sfruttare le funzionalità di Flexbox in un contenitore a scorrimento in modo molto più efficiente per la memoria.
Ricorda che puoi comunque ottenere un contenitore a scorrimento Flexbox utilizzando
FlexboxLayout e andando a capo con
ScrollView. Ma probabilmente ti ritroverai degli elementi superflui o anche un OutOfMemoryError se il numero di elementi presenti nel layout è grande, poiché
FlexboxLayout non tiene in considerazione il riciclo delle visualizzazioni che fuoriescono dallo schermo quando l'utente lo fa scorrere.
Per informazioni più dettagliate su RecyclerView, ti invitiamo a guardare i video prodotti dal team Android UI toolkit, come
1,
2.
Un esempio concreto dell'utilità dell'integrazione con
RecyclerView riguarda le app Google Foto o Google News, in quanto entrambe prevedono un elevato numero di elementi che devono gestire larghezze diverse.
Puoi vederne un esempio nella
versione demo dell'applicazione nel repository
FlexboxLayout. Infatti, in questo repository, ogni immagine mostrata in
RecyclerView presenta una larghezza diversa. Ma impostando flexWrap su "a capo",
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(); layoutManager.setFlexWrap(FlexWrap.WRAP);
e impostando l'attributo
flexGrow (come avrai notato, puoi configurare gli attributi utilizzando
FlexboxLayoutManager e
FlexboxLayoutManager.LayoutParams per gli attributi figli invece di configurarli da XML) su un valore positivo per ciascun figlio,
void bindTo(Drawable drawable) { mImageView.setImageDrawable(drawable); ViewGroup.LayoutParams lp = mImageView.getLayoutParams(); if (lp instanceof FlexboxLayoutManager.LayoutParams) { FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams(); flexboxLp.setFlexGrow(1.0f); } }potrai notare che ogni immagine si adatta perfettamente al layout, indipendentemente dall'orientamento dello schermo.
Per alcuni esempi completi di FlexboxLayout, vai a vedere:
Novità in arrivo
Consulta la
documentazione completa per vedere altri attributi che ti consentono di creare layout flessibili perfetti per le tue esigenze. Siamo molto contenti di ricevere i tuoi commenti e, in caso di eventuali problemi o richieste di funzionalità, ti preghiamo di segnalare un
problema sul repository di GitHub.
