Durante Google I / O 2015, Google ha introdotto la libreria di supporto del design per gli sviluppatori Android. Questa libreria semplifica gli sviluppatori nell'implementare più concetti di Material Design nelle loro applicazioni, poiché molti elementi chiave non erano disponibili inizialmente. Oltre a essere facile da usare, la libreria del supporto di progettazione è retrocompatibile con l'API 7. La libreria di supporto del design può essere inclusa nei progetti Android importando la dipendenza Gradle.
compila "com.android.support:design:22.2.0"
Esistono due categorie principali di strumenti nella libreria di supporto di progettazione:
Inizieremo dando un'occhiata a quali nuovi componenti visivi sono disponibili per aggiungere lucidatura alle tue app.
Modifica il testo
le visualizzazioni sono state utilizzate in Android sin dall'inizio e, anche se sono semplici da utilizzare, non sono cambiate molto. Con la libreria di supporto del design, Google ha introdotto una nuova vista del contenitore chiamata TextInputLayout
. Questa nuova vista aggiunge funzionalità allo standard Modifica il testo
, come il supporto per i messaggi di errore e suggerimenti animati per aiutare a rendere l'interfaccia utente pop.
Come mostrato nello snippet qui sotto, TextInputLayout
può essere incluso nel file di layout come wrapper per uno standard Modifica il testo
.
Gianluca Segato darà uno sguardo più da vicino al TextInputLayout
componente in un prossimo tutorial.
Uno dei componenti predominanti dell'interfaccia utente nelle app di material design è il pulsante di azione mobile. Fin dalla loro introduzione, gli sviluppatori hanno dovuto creare questi pulsanti da zero o scegliere una delle tante librerie di terze parti progettate specificamente attorno a questi pulsanti.
Con la libreria di supporto del design, i pulsanti di azione fluttuanti possono essere inclusi in un layout e ancorati a una porzione dello schermo con poche semplici righe di XML. Ogni pulsante è facilmente personalizzabile con icone e colori. Sono disponibili due taglie, standard (56 dp) e mini (40dp). Uno dei maggiori vantaggi è che questi pulsanti saranno ora supportati da Google man mano che il loro design si evolve.
Mentre ViewPager
e DrawerLayout
componenti sono stati disponibili per un po 'attraverso il libreria di supporto v4, Google li ha ampliati fornendo due nuovi widget correlati. Il primo è una versione ufficiale della libreria ViewPagerIndicator comunemente usata da Jake Wharton TabLayout
. Il secondo è il NavigationView
, che fornisce supporto per le viste dell'intestazione del cassetto.
TabLayout
TabLayout
i componenti possono avere il contenuto aggiunto a loro manualmente nel codice attraverso l'utilizzo di uno dei addTab
metodi. Dai un'occhiata al seguente esempio.
tabLayout.addTab (tabLayout.newTab (). setText ("Tab 1")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 2")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 3"));
In alternativa, puoi associare TabLayout
componenti con a ViewPager
. Questo si ottiene chiamando setupWithViewPager ()
, passando nel ViewPager
come il primo e unico argomento. Questo è un altro modo per cambiare sezioni nel ViewPager
. Si dovrebbe notare che getPageTitle ()
deve essere sovrascritto durante l'uso TabLayout
con un ViewPager
per dare ad ogni scheda un nome proprio.
NavigationView
NavigationView
è un nuovo widget che estende la funzionalità di DrawerLayout
. Gli sviluppatori possono ora aggiungere layout di intestazione al cassetto e contrassegnare le sezioni selezionate con questo componente facile da usare.
Oltre a questo, ora è molto semplice creare sezioni e sottosezioni nel cassetto attraverso i file di risorse del menu. Per iniziare, a NavigationView
semplicemente deve essere associato a a DrawerLayout
in XML.
Mentre il Crostini
messaggio è stato un punto fermo di Android per anni, un nuovo widget di interfaccia utente chiamato Snack bar
è disponibile per fornire funzionalità simili con un aspetto migliorato. Non solo il Snack bar
presentare le informazioni all'utente per un breve periodo di tempo, supporta anche una singola azione per aggiungere funzionalità basate sul contesto alle tue app e può essere respinta con un gesto a sfioramento.
Snack bar
è implementato in modo simile a Crostini
, anche se va notato che la creazione di uno richiede una vista che può essere utilizzata per trovare la parte inferiore del display dell'app.
Snackbar.make (visualizza, "Azione", Snackbar.LENGTH_LONG) .setAction ("Azione!", Nuovo View.OnClickListener () @Override public void onClick (Visualizza v) Log.e ("App", "Azione! "); ) .mostrare();
Il modo in cui un'interfaccia utente si comporta e si anima è molto importante in Material Design. Per facilitare questo, Google ha rilasciato più componenti nella libreria di supporto di progettazione che aiutano con casi di utilizzo comuni. Kerry Perez-Huanca esaminerà da vicino questo aspetto della Design Support Library in un prossimo tutorial.
Potresti aver notato nell'esempio precedente che il FloatingActionButton
spostato quando il Snack bar
la vista è apparsa. Questo viene fatto usando un nuovo widget chiamato CoordinatorLayout
, che racchiude le viste che dovrebbero essere spostate per fare spazio ad altre viste.
Molti sviluppatori hanno chiesto un modo più semplice per visualizzare un'immagine di parallasse che funziona con un modello di progettazione di ritorno rapido, scomparendo o riapparendo mentre l'utente scorre. Puoi vedere questo comportamento nel Play Store per gli elenchi di app. Per consentire agli sviluppatori di implementare ciò senza un sacco di tempo dedicato alla scrittura di codice ridondante, Google ha rilasciato CollapsingToolBarLayout
e AppBarLayout
visualizzazioni. Utilizzando varie opzioni all'interno di questi widget, gli sviluppatori possono appuntare le viste nella parte superiore dello schermo o specificare quando quelle visualizzazioni dovrebbero diventare visibili mentre l'utente scorre.
La libreria di supporto del design ha portato molti strumenti tanto attesi ad Android. Abbinato alla libreria AppCompat, diventa molto più facile aggiungere Material Design alle app mantenendo la compatibilità con le versioni precedenti.
Molti esempi su come lavorare con questi nuovi componenti possono essere trovati nell'app di riferimento ufficiale di Google, CheeseSquare, e Tuts + continuerà a fornire tutorial approfonditi su come implementare queste nuove funzionalità.