web-dev-qa-db-ja.com

Android BottomSheetDialogFragmentは完全には展開されません

次のテストボトムシートの実装があります。

PeekHeightを500未満の値に設定すると、機能します。何らかの値の後、ピークの高さを増やしても、ボトムシートの展開方法は変わりません。手動でドラッグするためだけにそこに残ります。 peekHeightをプログラムで設定して、ボトムシートがピーク高さまで自動的に展開されるようにするにはどうすればよいですか。

enter image description here

bottom_sheet_dialog_main

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/locUXCoordinatorLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <LinearLayout
        Android:id="@+id/locUXView"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true"
        Android:orientation="vertical"
        app:behavior_hideable="false"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="1 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="2 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="3 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="4 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="5 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="6 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="7 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="8 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="9 Value" />

        <TextView
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:text="First Value" />
    </LinearLayout>
</Android.support.design.widget.CoordinatorLayout>

Javaコード

public class MyBottomSheetDialogFragment extends BottomSheetDialogFragment {

    private static BottomSheetBehavior bottomSheetBehavior;
    private static View bottomSheetInternal;
    private static MyBottomSheetDialogFragment INSTANCE;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        getDialog().setOnShowListener(new DialogInterface.OnShowListener() {
            @Override
            public void onShow(DialogInterface dialog) {
                BottomSheetDialog d = (BottomSheetDialog) dialog;
                CoordinatorLayout coordinatorLayout = (CoordinatorLayout)d.findViewById(R.id.locUXCoordinatorLayout);
                bottomSheetInternal = d.findViewById(R.id.locUXView);
                bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetInternal);
                bottomSheetBehavior.setPeekHeight(bottomSheetInternal.getHeight());
                bottomSheetInternal.requestLayout();
                coordinatorLayout.getLayoutParams().height = bottomSheetInternal.getHeight();
                Toast.makeText(getActivity(), "Height is" + bottomSheetInternal.getHeight() + "  " + coordinatorLayout.getLayoutParams().height, Toast.LENGTH_LONG).show();

            }
        });
        INSTANCE = this;
        return inflater.inflate(R.layout.bottom_sheet_dialog_main, container, false);
    }
}
17
Nandish A

より詳細なUI検査により、コーディネーターレイアウトをラップする別のCoordinatorLayoutがあることがわかります。親CoordinatorLayoutにはFrameLayoutがあり、BottomSheetBehaviorはid design_bottom_sheet。上記のコードで設定されたピークの高さは、match_parent idを持つFrameLayoutの高さdesign_bottom_sheet

Id_design_bottom_sheetでFrameLayoutのピーク高さを設定することにより、この問題は解決されました。

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    getDialog().setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            BottomSheetDialog d = (BottomSheetDialog) dialog;
            coordinatorLayout = (CoordinatorLayout) d.findViewById(R.id.locUXCoordinatorLayout);
            bottomSheetInternal = d.findViewById(R.id.locUXView);
            bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetInternal);
            bottomSheetBehavior.setHidable(false);
            BottomSheetBehavior.from((View)coordinatorLayout.getParent()).setPeekHeight(bottomSheetInternal.getHeight());
            bottomSheetBehavior.setPeekHeight(bottomSheetInternal.getHeight());
            coordinatorLayout.getParent().requestLayout();

        }
    });
8
Nandish A

OnCreateViewでこのコードを使用します。

getDialog().setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            BottomSheetDialog d = (BottomSheetDialog) dialog;
            FrameLayout bottomSheet = (FrameLayout) d.findViewById(R.id.design_bottom_sheet);
            CoordinatorLayout coordinatorLayout = (CoordinatorLayout) bottomSheet.getParent();
            BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
            bottomSheetBehavior.setPeekHeight(bottomSheet.getHeight());
            coordinatorLayout.getParent().requestLayout();
        }
    });
23
athysirus

別の解決策を見つけました。将来の読者にとっては役立つかもしれません。

@Override
public void setupDialog(Dialog dialog, int style) {
    super.setupDialog(dialog, style);
    final View root = View.inflate(getContext(), R.layout.fragment_bottom_sheet_choose_time, null);
    dialog.setContentView(root);
    initView(root);

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) root.getParent()).getLayoutParams();
    CoordinatorLayout.Behavior behavior = params.getBehavior();

    if (behavior != null && behavior instanceof BottomSheetBehavior) {
        mBottomSheetBehavior = (BottomSheetBehavior) behavior;
        mBottomSheetBehavior.setBottomSheetCallback(mBottomSheetBehaviorCallback);

        root.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                root.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                int height = root.getMeasuredHeight();
                mBottomSheetBehavior.setPeekHeight(height);
            }
        });
    }
}

@Anthonyeefが述べたように、ここでViewTreeObserverは、ビューが実際に測定され、パフォーマンスを向上させるためにGlobalOnLayoutListenerが削除された後に正確な測定高さを取得することを目的としています。

ただし、本番環境で使用する前に、さまざまなデバイスや画面でこのソリューションをテストしてください。ボトムシートのコンテンツが画面よりも高い場合、奇妙なスワイプ動作が発生する可能性があるためです。

きちんとしたアプローチをありがとう@athysirus。誰かが動作中のkotlinサンプルを持ちたい場合に備えて、ここに私が最終的に作成したバージョンがあります。

重要なのは、完了したらグローバルレイアウトリスナーも削除する必要があることです。

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    view.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            val bottomSheet = (dialog as BottomSheetDialog).findViewById<View>(com.google.Android.material.R.id.design_bottom_sheet)
            BottomSheetBehavior.from<View>(bottomSheet).apply {
                state = BottomSheetBehavior.STATE_EXPANDED
                peekHeight = 0
            }
            view.viewTreeObserver.removeOnGlobalLayoutListener(this)
        }
    })
1
Mike T