Présentation de la bibliothèque de support de conception Android

introduction

Au cours de Google I / O 2015, Google a présenté la bibliothèque de support technique pour les développeurs Android. Grâce à cette bibliothèque, les développeurs peuvent facilement implémenter davantage de concepts de conception de matériaux dans leurs applications, car de nombreux éléments clés n'étaient pas disponibles au départ. En plus d'être facile à utiliser, la bibliothèque de support technique de Design est rétro-compatible avec l'API 7. La bibliothèque de support technique de conception peut être incluse dans vos projets Android en important la dépendance Gradle..

compiler 'com.android.support:design:22.2.0'

1. Composants visuels

Il existe deux grandes catégories d’outils dans la bibliothèque de support de conception:

  • composants visuels
  • composants de mouvement

Nous commencerons par examiner quels nouveaux composants visuels sont disponibles pour améliorer le rendu de vos applications..

Entrée de texte matériel

Éditer le texte Les vues ont été autour dans Android depuis le tout début, et bien qu'elles soient simples à utiliser, elles n'ont pas beaucoup changé. Avec la Design Support Library, Google a introduit une nouvelle vue de conteneur appelée TextInputLayout. Cette nouvelle vue ajoute des fonctionnalités à la norme Éditer le texte, tels que la prise en charge des messages d'erreur et des astuces animées pour rendre votre interface utilisateur pop.

Comme indiqué dans l'extrait ci-dessous, TextInputLayout peut être inclus dans votre fichier de mise en page comme un wrapper pour un standard Éditer le texte.

  

Gianluca Segato examinera de plus près le TextInputLayout composant dans un prochain tutoriel.

Boutons d'action flottants

Le bouton d'action flottante est l'un des composants d'interface utilisateur les plus prédominants dans les applications Material Design. Depuis leur introduction, les développeurs ont dû créer ces boutons à partir de zéro ou choisir l'une des nombreuses bibliothèques tierces conçues spécifiquement autour de ces boutons..

Avec la bibliothèque de support de conception, des boutons d'action flottants peuvent être inclus dans une présentation et ancrés à une partie de l'écran à l'aide de quelques lignes XML simples. Chaque bouton est facilement personnalisable avec des icônes et des couleurs. Deux tailles sont disponibles, la norme (56dp) et mini (40dp). L'un des principaux avantages est que ces boutons seront désormais pris en charge par Google à mesure que leur design évoluera..

Composants de navigation

Tandis que ViewPager et DrawerLayout composants ont été disponibles pendant un certain temps à travers le bibliothèque de support v4, Google les a développés en fournissant deux nouveaux widgets connexes. La première est une version officielle de la bibliothèque ViewPagerIndicator couramment utilisée par Jake Wharton, appelée TabLayout. La seconde est la NavigationView, qui fournit un support pour les vues d'en-tête de tiroir.

TabLayout

TabLayout les composants peuvent avoir du contenu ajouté à eux manuellement dans le code en utilisant l'un des addTab méthodes. Regardez l'exemple suivant.

tabLayout.addTab (tabLayout.newTab (). setText ("Tab 1")); tabLayout.addTab (tabLayout.newTab (). setText ("Onglet 2")); tabLayout.addTab (tabLayout.newTab (). setText ("Onglet 3"));

Alternativement, vous pouvez associer TabLayout composants avec un ViewPager. Ceci est accompli en appelant setupWithViewPager (), en passant dans le ViewPager comme premier et unique argument. C’est une autre façon de changer les sections de la ViewPager. Il convient de noter que getPageTitle () doit être remplacé lors de l'utilisation TabLayout avec un ViewPager donner un nom à chaque onglet.

NavigationView

NavigationView est un nouveau widget qui étend les fonctionnalités du DrawerLayout. Les développeurs peuvent désormais ajouter des dispositions d'en-tête dans le tiroir et marquer les sections sélectionnées avec ce composant facile à utiliser..

En plus de cela, il est maintenant très simple de créer des sections et des sous-sections dans le tiroir à l'aide de fichiers de ressources de menu. Pour commencer, un NavigationView doit simplement être associé à un DrawerLayout en XML.

   

Toasts améliorés

Tandis que le Pain grillé message a été un aliment de base d'Android pendant des années, un nouveau widget d'interface utilisateur appelé Snackbar est disponible pour fournir une fonctionnalité similaire avec un look amélioré. Non seulement le Snackbar Présenter des informations à l'utilisateur pendant une courte période, il prend également en charge une action unique pour ajouter une fonctionnalité contextuelle à vos applications et peut être ignoré par un geste de balayage..

Snackbar est mis en œuvre de manière similaire à Pain grillé, il convient toutefois de noter que pour en créer une nécessite une vue pouvant être utilisée pour rechercher le bas de l'affichage de l'application..

Snackbar.make (vue, "Action", Snackbar.LENGTH_LONG) .setAction ("Action!", Nouvelle View.OnClickListener () @Override public void onClick (View v) Log.e ("App", "Action", "Action! ");   ) .spectacle();

2. Composants de mouvement

Le comportement et l’animation d’une interface utilisateur est très important dans la conception de matériaux. Pour faciliter cela, Google a publié plusieurs composants dans la bibliothèque de support technique de conception qui aident les cas d'utilisation courants. Kerry Perez-Huanca se penchera sur cet aspect de la bibliothèque de support de conception dans un prochain tutoriel..

Vues réactives

Vous avez peut-être remarqué dans l'exemple précédent que le FloatingActionButton déplacé lorsque le Snackbar vue est apparue. Ceci est fait en utilisant un nouveau widget appelé le Coordonnateur, qui enveloppe les vues qui devraient être déplacées pour faire place à d'autres vues.

Retour rapide et barres d'outils améliorés

De nombreux développeurs ont demandé un moyen plus simple d'afficher une image de parallaxe fonctionnant avec un motif de conception à retour rapide, disparaissant ou réapparaissant lorsque l'utilisateur fait défiler. Vous pouvez voir ce comportement dans le Play Store pour les listes d'applications. Pour permettre aux développeurs de mettre cela en œuvre sans passer trop de temps à écrire du code redondant, Google a publié CollapsingToolBarLayout et AppBarLayout vues. En utilisant diverses options dans ces widgets, les développeurs peuvent épingler des vues en haut de l'écran ou spécifier quand ces vues doivent devenir visibles lorsque l'utilisateur fait défiler l'écran..

Conclusion

La bibliothèque de support de conception a apporté de nombreux outils tant attendus à Android. Lorsqu'il est associé à la bibliothèque AppCompat, il est beaucoup plus facile d'ajouter Material Design aux applications tout en maintenant la compatibilité avec les versions antérieures..

Vous trouverez de nombreux exemples d'utilisation de ces nouveaux composants dans l'application de référence officielle de Google, CheeseSquare, et Tuts + continuera à fournir des didacticiels détaillés sur la mise en œuvre de ces nouvelles fonctionnalités..