logo标签列表

如何实现具有固定高度的BottomSheetDialogFragment

androidbehaviorbottom-sheet
13

我需要实现 BottomSheetDialogFragment，但面临着一个问题。 我需要让我的 BottomSheetDialogFragment 拥有固定的高度。有人知道如何实现吗？

这是我片段内容的xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/bottom_sheet_height"
    android:background="@android:color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/drag_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:textColor="#FF0000"
        android:text="Title"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/white"
        android:layout_weight="1"/>

    <TextView
        android:id="@+id/ok_button"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center"
        android:text="Hello"
        android:textColor="@android:color/white"
        android:textSize="24sp"/>

</LinearLayout>

在 setupDialog() 中我正在执行这个操作：

@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);
    CoordinatorLayout.LayoutParams layoutParams = ((CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams());
    CoordinatorLayout.Behavior behavior = layoutParams.getBehavior();
    if (behavior != null && behavior instanceof BottomSheetBehavior) {
        ((BottomSheetBehavior) behavior).setBottomSheetCallback(bottomSheetCallback);
        ((BottomSheetBehavior) behavior).setPeekHeight(getResources().getDimensionPixelSize(R.dimen.bottom_sheet_height));
    }

    initRecyclerView(contentView);
}

这种行为非常普遍：

private BottomSheetBehavior.BottomSheetCallback bottomSheetCallback = 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) {
    }
};

更新：通过将RecyclerView设置固定高度来解决问题。有没有更好的方法？

3个回答
9
您可以通过在样式表中创建固定高度来直接设置高度。
在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();

或第二种方法：

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

    if( behavior != null && behavior instanceof BottomSheetBehavior ) {
        ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
        ((BottomSheetBehavior) behavior).setPeekHeight(300);
    }
我该如何使用这些样式？ - Vladislav Sazanovich
是的，我明白。但不幸的是，这对我没有起作用。我认为问题在于RecyclerView，它似乎强制调整父布局的大小，即使它具有固定的高度。 - Vladislav Sazanovich
@VladislavSazanovich 与我建议的一样，您可以设置recylcerView的高度，而我告诉您在“Style”中设置“BottomSheet”“Height”。但是我不知道为什么在您的情况下它不起作用。 - Harshad Pansuriya
@VladislavSazanovich使用了这种方式((BottomSheetBehavior) behavior).setPeekHeight(300);。 - Harshad Pansuriya
我也不知道为什么这个不起作用，但感谢你的回答。 - Vladislav Sazanovich
有没有任何解决方案的更新？ @ironman设置peekheight可以将对话框初始显示得很好，但仍可拖到完整高度。 另外我知道关于STATE_DRAGGING和将其设置为展开的hack解决方案，但这并不起作用。 我正在寻找一个保持固定高度的底部工作表。 - Steve McMeen
4

如果RecyclerView的内容在initRecyclerView(contentView);之内填充，则显示BottomSheet时其高度是已知的。为了动态设置BottomSheet的高度并包裹内容，可以在BottomSheetDialogFragment的onResume函数中添加全局布局侦听器：

@Override
public void onResume() {
    super.onResume();
    addGlobaLayoutListener(getView());
}

private void addGlobaLayoutListener(final View view) {
    view.addOnLayoutChangeListener(new OnLayoutChangeListener() {
        @Override
        public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
            setPeekHeight(v.getMeasuredHeight());
            v.removeOnLayoutChangeListener(this);
        }
    });
}

public void setPeekHeight(int peekHeight) {
    BottomSheetBehavior behavior = getBottomSheetBehaviour();
    if (behavior == null) {
        return;
    }
    behavior.setPeekHeight(peekHeight);
}

private BottomSheetBehavior getBottomSheetBehaviour() {
    CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) ((View) getView().getParent()).getLayoutParams();
    CoordinatorLayout.Behavior behavior = layoutParams.getBehavior();
    if (behavior != null && behavior instanceof BottomSheetBehavior) {
        ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
        return (BottomSheetBehavior) behavior;
    }
    return null;
}
我真的不喜欢删除OnLayoutChangeListener的想法。这可能会导致未来的问题。 - Vladislav Sazanovich
它仅用于在初始化期间获取BottomSheet的实际高度一次。然后将其删除以释放资源。如果您添加它并且不删除它，则每次显示“BottomSheet”时，都会附加新的“OnLayoutChangeListener”。很快，您将耗尽资源（内存）。 - R. Zagórski
@R.Zagórski 有没有办法在使用RecyclerView时完全消除BottomSheetDialogFragment的下拉拖动效果？ https://github.com/rubensousa/BottomSheetExample/issues/3 - LOG_TAG
你是指这个链接吗：https://dev59.com/Mpfga4cB1Zd3GeqPC-tM？ - R. Zagórski
1
这里的 mBottomSheetBehaviorCallback 是什么？ - Raj
2
尝试使用以下代码：

在这里输入图片描述

  1. 为底部表单对话框创建布局xml文件

layout_bottom_sheet_dialog_fragment.xml


最初的回答
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">


<androidx.appcompat.widget.LinearLayoutCompat
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/ll_bottomSheetFrag_userProf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:padding="5dp">


        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_profile_icon_nav_d"
            app:civ_border_width="1dp"
            app:civ_border_color="@color/main_white"
            android:layout_height="70dp"
            android:layout_width="70dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:contentDescription="@string/nav_header_desc"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:paddingBottom="@dimen/nav_header_vertical_spacing"
            android:id="@+id/iv_bottomSheetFrag_userPic">
        </de.hdodenhof.circleimageview.CircleImageView>


        <!-- name & email -->
        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/tv_bottomSheetFrag_userName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingTop="5dp"
                    android:paddingBottom="5dp"
                    android:gravity="center|start"
                    android:textSize="20sp"
                    android:layout_weight="9"
                    android:theme="@style/styleFontMediumText"
                    android:text="@string/user_name"
                    android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                    android:textColor="@color/black" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/iv_bottomSheetFrag_closeDialog"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:visibility="gone"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/ic_close_black_24dp"
                    />

            </androidx.appcompat.widget.LinearLayoutCompat>



            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tv_bottomSheetFrag_userEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center|start"
                android:textSize="14sp"
                android:theme="@style/styleFontRegularText"
                android:textColor="@color/primaryLightColor"
                android:text="@string/user_email" />


        </androidx.appcompat.widget.LinearLayoutCompat>



    </androidx.appcompat.widget.LinearLayoutCompat>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/divider_color"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"/>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view_bottomSheetFrag"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:elevation="0dp"
        app:itemTextAppearance="@style/NavDrawerTextStyle"
        app:itemBackground="@android:color/transparent"
        app:itemIconTint="@color/nav_drawer_item_color_state"
        app:itemTextColor="@color/nav_drawer_item_color_state"
        app:menu="@menu/menu_bottom_sheet" />


</androidx.appcompat.widget.LinearLayoutCompat>

请为底部弹出窗口创建一个类，该类应扩展BottomSheetDialogFragment。

BottomSheetFragment.java

  1. 创建底部弹出窗口片段的类，该类应扩展BottomSheetDialogFragment。
public class BottomSheetFragment extends BottomSheetDialogFragment{
@BindView(R.id.iv_bottomSheetFrag_closeDialog) AppCompatImageView iv_closeDialog;
@BindView(R.id.nav_view_bottomSheetFrag_salesPerson) NavigationView nav_view;


private Context context;

//public constructor
public BottomSheetFragment() {

}

//create custom theme for your bottom sheet modal 
@Override
public int getTheme() {
    //return super.getTheme();
    return R.style.AppBottomSheetDialogTheme;
}


@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    //return super.onCreateDialog(savedInstanceState);
    return new BottomSheetDialog(requireContext(), getTheme());  //set your created theme here

}


@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
}


@Override
public void setupDialog(@NonNull Dialog dialog, int style)
{
    super.setupDialog(dialog, style);

    View contentView = View.inflate(getContext(), R.layout.layout_bottom_sheet_dialog_fragment, null);
    context = contentView.getContext();
    ButterKnife.bind(this, contentView);
    dialog.setContentView(contentView);
    //tv_title.setText(getString(R.string.app_name)); R.style.AppBottomSheetDialogTheme

    DisplayMetrics displayMetrics = getActivity().getResources().getDisplayMetrics();
    int width = displayMetrics.widthPixels;
    int height = displayMetrics.heightPixels;
    int maxHeight = (int) (height*0.44); //custom height of bottom sheet

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
    CoordinatorLayout.Behavior behavior = params.getBehavior();
    ((BottomSheetBehavior) behavior).setPeekHeight(maxHeight);  //changed default peek height of bottom sheet

    if (behavior != null && behavior instanceof BottomSheetBehavior)
    {
        ((BottomSheetBehavior) behavior).setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback()
        {

            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState)
            {
                String state = "";
                switch (newState)
                {
                    case BottomSheetBehavior.STATE_DRAGGING: {
                        //imgBtnClose.setVisibility(View.INVISIBLE);
                        iv_closeDialog.setVisibility(View.GONE);
                        state = "DRAGGING";
                        break;
                    }
                    case BottomSheetBehavior.STATE_SETTLING: {
                        // imgBtnClose.setVisibility(View.INVISIBLE);
                        iv_closeDialog.setVisibility(View.GONE);
                        state = "SETTLING";
                        break;
                    }
                    case BottomSheetBehavior.STATE_EXPANDED: {
                        // imgBtnClose.setVisibility(View.VISIBLE);
                        iv_closeDialog.setVisibility(View.VISIBLE);
                        state = "EXPANDED";
                        break;
                    }
                    case BottomSheetBehavior.STATE_COLLAPSED: {
                        //imgBtnClose.setVisibility(View.INVISIBLE);
                        iv_closeDialog.setVisibility(View.GONE);
                        state = "COLLAPSED";
                        break;
                    }
                    case BottomSheetBehavior.STATE_HIDDEN: {
                        // imgBtnClose.setVisibility(View.INVISIBLE);
                        iv_closeDialog.setVisibility(View.GONE);
                        dismiss();
                        state = "HIDDEN";
                        break;
                    }
                }
                Log.i("BottomSheetFrag", "onStateChanged: "+ state);
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            }
        });
    }


    //close dialog
    iv_closeDialog.setOnClickListener(view -> dismiss());

}


@Override
public void onDestroyView() {
    super.onDestroyView();
}}

将以下代码添加到您的styles.xml文件中。 styles.xml： 

<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="android:background">@drawable/rounded_dialog</item>
    </style>

  1. 为您的底部表添加圆形drawable。将此文件添加到您的drawables文件夹中。

rounded_dialog.xml（圆形对话框）

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"/>

</shape>

最终，在您的活动中按如下方式调用此对话框片段。在这里，我已经在bottomNavigationView项onClick侦听器的fragment onClick中调用了它。 

  private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = item ->


{
        Fragment selectedFragment = null;
        switch (item.getItemId()) {
            case R.id.bNav_menu:
                BottomSheetFragment bf = new BottomSheetFragment();
                bf.show(getSupportFragmentManager(), bf.getTag());
                //bf.setArguments(bundle);
                return true;
           
        }
    };

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接