Panoramica della libreria di supporto per la progettazione Android

introduzione

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"

1. Componenti visivi

Esistono due categorie principali di strumenti nella libreria di supporto di progettazione:

  • componenti visivi
  • componenti di movimento

Inizieremo dando un'occhiata a quali nuovi componenti visivi sono disponibili per aggiungere lucidatura alle tue app.

Input testo materiale

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.

Pulsanti di azione fluttuanti

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.

Componenti di navigazione

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.

   

Toast avanzato

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();

2. Componenti del movimento

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.

Visualizzazioni reattive

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.

Migliorato ritorno rapido e barre degli strumenti

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.

Conclusione

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à.