Android Feuilles de fond dans la bibliothèque d'aide à la conception


Exemple

Les feuilles du bas glissent du bas de l'écran pour révéler plus de contenu.
Ils ont été ajoutés à la bibliothèque de support Android dans la version v25.1.0 et prennent en charge toutes les versions.

Assurez-vous que la dépendance suivante est ajoutée au fichier build.gradle de votre application sous les dépendances:

 compile 'com.android.support:design:25.3.1'

Feuilles de fond persistantes

Vous pouvez obtenir une feuille inférieure persistante associant un BottomSheetBehavior à un enfant. Vue d'un CoordinatorLayout

<android.support.design.widget.CoordinatorLayout >

    <!-- .....   -->

    <LinearLayout
       android:id="@+id/bottom_sheet"
       android:elevation="4dp"
       android:minHeight="120dp"
       app:behavior_peekHeight="120dp"
       ...
       app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

           <!-- .....   -->

       </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Ensuite, dans votre code, vous pouvez créer une référence en utilisant:

 // The View with the BottomSheetBehavior  
 View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);  
 BottomSheetBehavior mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);  

Vous pouvez définir l'état de votre BottomSheetBehavior en utilisant la méthode setState () :

mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

Vous pouvez utiliser l'un de ces états:

  • STATE_COLLAPSED : cet état réduit est la valeur par défaut et ne montre qu'une partie de la disposition en bas. La hauteur peut être contrôlée avec l'attribut app:behavior_peekHeight (la valeur par défaut est 0)

  • STATE_EXPANDED : l'état complètement développé de la feuille du bas, où soit la totalité de la feuille inférieure est visible (si sa hauteur est inférieure à celle du CoordinatorLayout ), soit la totalité du CoordinatorLayout est remplie

  • STATE_HIDDEN : désactivé par défaut (et activé avec l'attribut app:behavior_hideable ), ce qui permet aux utilisateurs de glisser le bas de la feuille pour masquer complètement la feuille du bas

Pour ouvrir ou fermer la feuille de calcul en cliquant sur une vue de votre choix, un bouton disons, voici comment basculer le comportement de la feuille et la vue de mise à jour.

mButton = (Button) findViewById(R.id.button_2);
    //On Button click we monitor the state of the sheet
    mButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
                //If expanded then collapse it (setting in Peek mode).
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                mButton.setText(R.string.button2_hide);
            } else if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                //If Collapsed then hide it completely.
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                mButton.setText(R.string.button2);
            } else if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
                //If hidden then Collapse or Expand, as the need be.
                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                mButton.setText(R.string.button2_peek);
            }
        }
    });

Toutefois, le comportement de BottomSheet comporte également une fonctionnalité permettant à l'utilisateur d'interagir avec le balayage UP ou Down avec un mouvement DRAG. Dans un tel cas, nous pourrions ne pas être en mesure de mettre à jour la vue dépendante (comme le bouton ci-dessus) si l'état de la feuille a changé. Par ailleurs, vous souhaitez recevoir des rappels de modifications d'état, vous pouvez donc ajouter un BottomSheetCallback pour écouter les événements de glissement utilisateur:

mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetCallback() {  
    @Override  
    public void onStateChanged(@NonNull View bottomSheet, int newState) {  
      // React to state change and notify views of the current state
    }  
      @Override  
      public void onSlide(@NonNull View bottomSheet, float slideOffset) {  
       // React to dragging events and animate views or transparency of dependent views
   }  
 });  

Et si vous voulez seulement que votre feuille de fond soit visible uniquement en mode COLLAPSED et EXPANDED, et que vous n'utilisez jamais HIDE:

mBottomSheetBehavior2.setHideable(false);

DialogFragment de la feuille inférieure

Vous pouvez également afficher un BottomSheetDialogFragment à la place d'une vue dans la feuille du bas. Pour ce faire, vous devez d'abord créer une nouvelle classe qui étend BottomSheetDialogFragment.

Dans la méthode setupDialog() , vous pouvez gonfler un nouveau fichier de présentation 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 lui pour supprimer le fragment lorsque la feuille est masquée.

public class BottomSheetDialogFragmentExample extends BottomSheetDialogFragment {
 
    private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {
 
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                dismiss();
            }
 
        }
 
        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        }
    };
 
    @Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View contentView = View.inflate(getContext(), R.layout.fragment_bottom_sheet, null);
        dialog.setContentView(contentView);
 
        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
        CoordinatorLayout.Behavior behavior = params.getBehavior();
 
        if( behavior != null && behavior instanceof BottomSheetBehavior ) {
            ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
        }
    }
}

Enfin, vous pouvez appeler show () sur une instance de votre fragment pour l’afficher dans la feuille du bas.

BottomSheetDialogFragment bottomSheetDialogFragment = new BottomSheetDialogFragmentExample();
bottomSheetDialogFragment.show(getSupportFragmentManager(), bottomSheetDialogFragment.getTag());

Vous pouvez trouver plus de détails dans la rubrique dédiée