Share
L'une des modifications les plus importantes apportées à la conception d'Android a été introduite lors de la conférence Google I / O 2014, conception matérielle. Même si Google avait introduit un ensemble de directives pour leur nouvelle philosophie de conception, les développeurs étaient responsables de la mise en œuvre des nouveaux modèles à partir de zéro..
Cela a conduit de nombreuses bibliothèques tierces à atteindre les objectifs de conception de matériel avec des implémentations similaires, mais différentes. Pour atténuer certaines difficultés liées au développement de la conception de matériel, Google a présenté la bibliothèque de support de conception lors de la conférence de Google I / O 2015..
Comme dans de nombreux cas de développement logiciel, la bibliothèque de support de Design s'est améliorée avec le temps, en ajoutant le support pour les feuilles de fond avec la version 23.2. Dans cet article, vous apprendrez à implémenter facilement le modèle de fond dans vos propres applications. Un exemple de projet pour cet article est disponible sur GitHub..
Pour implémenter la feuille du bas, vous avez deux options, une vue conteneur avec un BottomSheetBehavior dans le fichier de mise en page ou un BottomSheetDialogFragment. Pour utiliser l’un des deux, vous devez importer la bibliothèque de support de Design dans votre projet, avec une version minimale de 23.2. Vous pouvez le faire dans build.gradle en incluant la ligne suivante sous les dépendances:
compiler 'com.android.support:design:23.2.0'
Une fois que vous avez synchronisé votre projet avec la bibliothèque de support de Design, vous pouvez ouvrir le fichier de mise en page qui doit inclure une feuille de fond. Dans notre exemple de projet, j’utilise le code XML suivant, qui affiche trois boutons dans activity_main.xml.
Lorsqu'il est exécuté sur un périphérique, la disposition ressemble à ceci:
Vous devez être conscient de quelques points clés dans le fichier de mise en page. Pour utiliser le widget de feuilles de fond, vous devez utiliser un Coordonnateur conteneur pour les vues. Vers le bas du fichier, vous remarquez qu'il y a une NestedScrollView contenant un Affichage. Bien que toute vue de conteneur puisse être utilisée dans une feuille du bas, le défilement ne peut se produire correctement que si vous utilisez un conteneur prenant en charge le défilement imbriqué, tel que le NestedScrollView ou un RecyclerVoir.
Pour qu'un conteneur soit reconnu par la bibliothèque de support de conception comme un conteneur de bas de page, vous devez inclure le layout_behavior attribuer et lui donner une valeur de android.support.design.widget.BottomSheetBehavior. Vous pouvez voir cela utilisé ci-dessus dans le NestedScrollView.
Un autre attribut clé à noter pour le conteneur de feuille inférieure est le layout_height. Quelles que soient les dimensions utilisées par votre article de conteneur, elles contrôlent l’affichage de votre dernière feuille. Il y a une mise en garde à prendre en compte concernant la hauteur de la feuille inférieure. Si vous utilisez le Coordonnateur, pour déplacer d'autres Vue objets autour, comme avec un CollapsingToolbarLayout, alors la hauteur de votre feuille inférieure change. Cela peut provoquer un effet de saut indésirable.
Une fois que vous avez ajouté un conteneur de vue et que vous l’avez correctement configuré dans votre fichier de présentation, vous pouvez ouvrir le fichier. Activité ou Fragment qui utilise la feuille du bas. Dans l'exemple de projet, c'est MainActivity.java.
Pour que votre feuille de fond puisse être affichée, vous devez créer un BottomSheetBehavior. Ceci est créé en obtenant une référence à la vue du conteneur et en appelant BottomSheetBehavior.from () sur ce conteneur. Pour cet exemple, vous référencez également les trois boutons de la présentation et appelez setOnClickListener () sur eux.
private BottomSheetBehavior mBottomSheetBehavior; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); View bottomSheet = findViewById (R.id.bottom_sheet); Bouton bouton1 = (Bouton) findViewById (R.id.button_1); Bouton bouton2 = (Bouton) findViewById (R.id.button_2); Bouton bouton3 = (Bouton) findViewById (R.id.button_3); button1.setOnClickListener (this); button2.setOnClickListener (this); button3.setOnClickListener (this); mBottomSheetBehavior = BottomSheetBehavior.from (bottomSheet);
Maintenant que vous avez créé un BottomSheetBehavior, la dernière chose que vous devez faire est de montrer votre feuille de fond Vue. Vous pouvez le faire en définissant l’état de votre BottomSheetBehavior à STATE_EXPANDED, ce que nous faisons dans l'exemple d'application lorsque le haut Bouton est cliqué.
@Override public void onClick (Affichage v) switch (v.getId ()) case R.id.button_1: mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_EXPANDED); Pause;
Lorsque cela est fait, votre application devrait ressembler à ceci:
Pour masquer la feuille du bas, l'utilisateur peut la glisser pour la masquer à l'écran ou définir le BottomSheetBehavior à STATE_COLLAPSED.
Vous avez peut-être remarqué, dans diverses applications et widgets Android de Google, tels que le sélecteur de lieu de l'API Places, que le modèle de feuille de fond est utilisé pour afficher un aperçu de la feuille de fond qui peut être développé pour plus de détails. Ceci peut être réalisé avec la feuille de fond de la bibliothèque de support de conception en définissant la taille réduite du fichier. Vue avec le setPeekHeight () méthode. Si vous souhaitez afficher la version abrégée de la feuille du bas, vous pouvez définir le BottomSheetBehavior à STATE_COLLAPSED.
mBottomSheetBehavior.setPeekHeight (300); mBottomSheetBehavior.setState (BottomSheetBehavior.STATE_COLLAPSED);
Lorsque le bouton du milieu est cliqué, vous vous retrouvez avec une feuille inférieure en mode Peek qui peut être agrandie à sa hauteur maximale en la faisant glisser vers le haut..
Vous remarquerez peut-être que lorsque vous essayez de faire glisser la feuille du bas vers le bas, elle ne fait que s’effondrer jusqu’à sa taille. Vous pouvez résoudre ce problème en ajoutant un BottomSheetCallback au BottomSheetBehavior, définir la taille d'aperçu sur zéro lorsque l'utilisateur réduit la feuille. Dans l'exemple d'application, cela est ajouté à la fin de onCreate ().
mBottomSheetBehavior.setBottomSheetCallback (new BottomSheetBehavior.BottomheetheetCallback () @Override public void onStateChanged (enregistrer le système), il est également en train de le faire. bottomSheet, float slideOffset) );
Comme je l’ai mentionné plus tôt dans cet article, vous pouvez également afficher un BottomSheetDialogFragment à la place d'un Vue dans la feuille du bas. Pour ce faire, vous devez d’abord créer une nouvelle classe qui s’étend BottomSheetDialogFragment.
Dans le setupDialog () méthode, vous pouvez gonfler un nouveau fichier de mise en page et récupérer le BottomSheetBehavior de la vue du conteneur dans votre Activité. Une fois que vous avez le comportement, vous pouvez créer et associer un BottomSheetCallback avec elle pour rejeter le Fragment quand la feuille est cachée.
la section de la classe est en train de vous dire @Override public void onSlide (@NonNull View bottomSheet, float slideOffset) ; @Override public void setupDialog (Dialogue de dialogue, style int) super.setupDialog (dialogue, style); View contentView = View.inflate (getContext (), R.layout.fragment_bottom_sheet, null); dialog.setContentView (contentView); CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((Afficher) contentView.getParent ()). GetLayoutParams (); CoordinatorLayout.Behavior behavior = params.getBehavior (); if (comportement! = null && instance de comportement BottomSheetBehavior) (comportement (BottomSheetBehavior)) .setBottomSheetCallback (mBottomSheetBehaviorCallback);
Enfin, vous pouvez appeler spectacle() sur une instance de votre Fragment pour l'afficher dans la feuille du bas.
BottomSheetDialogFragment bottomSheetDialogFragment = new TutsPlusBottomSheetDialogFragment (); bottomSheetDialogFragment.show (getSupportFragmentManager (), bottomSheetDialogFragment.getTag ());
L'utilisation de la bibliothèque de support de conception pour afficher une feuille de dessous est à la fois simple et polyvalente. Ils peuvent être utilisés pour afficher des détails ou des sélecteurs sans se gêner, tout en remplaçant idéalement le DialogFragment dans la situation appropriée. Comprendre comment la feuille de fond peut être utilisée dans votre application vous donnera un outil supplémentaire pour créer de superbes applications..
Accentsconagua