web-dev-qa-db-fra.com

Comment changer la hauteur par défaut d'un BottomSheetDialog?

J'utilise le nouveau BottomSheetDialog ajouté dans Support Library 23.2 , mais je souhaite modifier la hauteur par défaut de la boîte de dialogue. Je sais que cela a probablement à voir avec le behavior_peekHeight attribut qui contrôle la hauteur initiale, mais comment puis-je le définir dans BottomSheetDialog lorsque je n’ai pas d’accès direct à BottomSheetBehavior?

37
ianhanniballake

Vous pouvez définir un bottomSheetDialogTheme dans votre activité, en remplaçant le behavior_peekHeight De l'attribut bottomSheetStyle:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

<style name="AppBottomSheetDialogTheme"
       parent="Theme.Design.Light.BottomSheetDialog">
  <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

<style name="AppModalStyle"
       parent="Widget.Design.BottomSheet.Modal">
  <item name="behavior_peekHeight">@dimen/custom_peek_height</item>
</style>

Cette même technique peut également être utilisée pour d’autres attributs, tels que l’ajout de <item name="behavior_hideable">true</item> Au AppModalStyle pour indiquer si la feuille du bas peut être masquée.

65
ianhanniballake

vous pouvez utiliser BottomSheetBehavior dans votre code

BottomSheetDialog dialog = new BottomSheetDialog(content);
.
.
.
dialog.setContentView(view);
BottomSheetBehavior mBehavior = BottomSheetBehavior.from((View) view.getParent());
mBehavior.setPeekHeight(your dialog height)
dialog.show();
23
litao

styles.xml

<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>

<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
    <item name="behavior_peekHeight">500dp</item>
</style>

BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.BottomSheetDialog);
            dialog.setContentView(R.layout.layout_bottom_sheet);
            dialog.show();
13
Fang

Une autre méthode consiste à hériter de BottomSheetDialogFragment et à contrôler comment et quand vous définissez la vue du contenu. En remontant dans l'arborescence de la vue, vous pouvez obtenir le comportement que BottomSheetDialog enveloppe la vue du contenu. Ce n'est pas vraiment une bonne solution, car cela nécessite plus de passes de mise en page. Il est important que lorsque l'état de la feuille inférieure est STATE_HIDDEN Nous devons fermer le dialogue, sinon nous violons clairement l'implémentation fournie dans la bibliothèque.

Après avoir défini la hauteur de peek par programmation, la vue du contenu doit appeler requestLayout(), qui est en réalité une autre passe de présentation.

public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {


    private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {

        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            setStateText(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.bottom_sheet_dialog_content_view, null);
        dialog.setContentView(contentView);
        mBottomSheetBehavior = BottomSheetBehavior.from(((View) contentView.getParent()));
        if (mBottomSheetBehavior != null) {
           mBottomSheetBehavior.setBottomSheetCallback(mBottomSheetBehaviorCallback);    
           mBottomSheetBehavior.setPeekHeight(peekHeight);
           contentView.requestLayout();
        }
}
5
Nikola Despotoski

En combinant la solution de Nick et de Litao, voici une version complète de ce que nous faisons:

 BottomSheetDialog bottomSheet = new BottomSheetDialog(context);
 View view = View.inflate(context, R.layout.your_action_sheet, null);
 bottomSheet.setContentView(view);
 BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(((View) view.getParent()));
 bottomSheetBehavior.setPeekHeight(1000);
 bottomSheet.show();
1
Yuchen Zhong

Woks pour moi

  override fun onStart() {
    super.onStart()
    dialog?.also {
        val bottomSheet = dialog.findViewById<View>(R.id.design_bottom_sheet)
        bottomSheet.layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT
        val behavior = BottomSheetBehavior.from<View>(bottomSheet)
        behavior.peekHeight = resources.displayMetrics.heightPixels //replace to whatever you want
        view?.requestLayout()
    }
}
1
user2358763

Voici comment j'ai décidé le problème:

   override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = BottomSheetDialog(context)
        val view = View.inflate(context, R.layout.bottom_dialog, null)

        val heightInPixels = 500
        val params = ViewGroup.LayoutParams(MATCH_PARENT, heightInPixels)

        dialog.setContentView(view, params)

        return dialog
    }

La partie principale est la méthode setContentView(view, params), où vous définissez l'affichage des paramètres de dialogue et de présentation dans lesquels vous définissez la hauteur souhaitée.

0
Vitaliy Belyaev

J'ai eu un hack et je l'ai utilisé.

Si vous voulez faire par programme.

    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View view, int i) {
            behavior.setPeekHeight(yourMinHeight);
        }

        @Override
        public void onSlide(@NonNull View view, float v) {

        }
    });

Merci.

0