BottomSheet,

Relationship between

1. BottomSheetNot an actual class, but a name for the type of control, referred to in this article as the “bottom page”, which is the toolbar that pops up from the bottom of the screen. And that corresponds to thetaBottomSheetBehaviorThe behavior class that needs to be attached to a control. The nature of the behavior includes:
   • You can pop it from the bottom
   • You can drag the layout up and down
   • You can click the light black mask to hide/close
2. BottomSheetDialoginheritanceDialogIs a dialog box that is ownedBottomSheetBehaviorBehavior dialog box to achieve the effect of popping from the bottom and stretching up and down.
3. BottomSheetDialogFragmentIs includedBottomSheetDialogThe fragments (Fragment), so it can be used simultaneouslyFragmentThe characteristics and theBottomSheetThis interaction.

BottomSheetBehavior

use

Used in conjunction with CoordinatorLayout in XML layout files. With the following Settings, NestedScrollView has the BottomSheetBehavior nature and is initially displayed in the layout with an initial display height of peekHeight. The background has no light black mask and can be dragged up and down.

• Key statement app:layout_behavior=”@string/bottom_sheet_behavior”

• NestedScrollView can have only one child view.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:behavior_peekHeight="50dp"
        app:layout_behavior="@string/bottom_sheet_behavior">
        
        <! Internal layout -->
        
    </android.support.v4.widget.NestedScrollView>
    
</android.support.design.widget.CoordinatorLayout>
Copy the code

There are two properties worth noting in the code above.

• app:behavior_hideable: Can the layout be completely hidden when we drag it up and down? If set to true, the layout will be hidden after you slide down and you won’t be able to slide out… (Unless you write logic like buttons to control its behavior.) So be careful.
• app:behavior_peekHeight: is the height at the bottom that we can see when the bottom page is closed. Default is 0 and not visible.

Access behavior

Once declared in the layout file, you can get the behavior in your code.

// Get the view
View = findViewById(R.id.bottom_sheet);
// Get the behavior
BottomSheetBehavior behavior = BottomSheetBehavior.from(view);
Copy the code

methods

Some common methods of behavior.

BottomSheetCallback

Listener callback event on the bottom page.

behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
	@Override
    public void onStateChanged(@NonNull View bottomSheet, int newState)
    {
        // Listen for a change in the BottomSheet state
    }
	@Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset)
    {
        // Listen for the callback in the drag. slideOffset can do some animation}});Copy the code

There are five states of bottom page behavior.

• STATE_HIDDEN: indicates the hidden state. The default behavior_hideable is False, which can be set using the app:behavior_hideable property.

• STATE_COLLAPSED: collapses and closes. The behavior_peekHeight of app:behavior_peekHeight sets the displayed height. The default peekHeight is 0.

• STATE_DRAGGING: Dragged state

• State_explained: States before reaching an end point after drag and drop is loosened.

• STATE_EXPANDED: Fully expanded state.

BottomSheetDialog

This is a dialog box that has the behavior of the bottom page and does not need to be used with CoordinatorLayout. When ejected, the background appears as a light black mask. Logic is required to control its ejection.

Use the — layout file

Design the view inside the BottomSheetDialog. Xml can be wrapped without CoordinatorLayout, but the recommended sliding control is NestedScrollView.

<?xml version="1.0" encoding="utf-8"? >
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <! -- Internal view -->
    
</android.support.v4.widget.NestedScrollView>
Copy the code

Use the — code file

Use the layout file above, assuming the name is layout_bsd. You can get the behavior to be customized. GetParent () : view.getparent () : view.getparent () : view.getparent () : view.getparent ()

The view is not a child of CoordinatorLayout.

BottomSheetDialog dialog = new BottomSheetDialog(context);
View view = getLayoutInflater.inflate(R.layout.layout_bsd, null);
dialog.setContentView(view);
// Get the behavior for customization
BottomSheetBehavior behavior = BottomSheetBehavior.from((View)view.getParent());
dialog.show();
Copy the code

BottomSheetDialogFragment

There are two ways to use it.

• As installed in a bottom page dialog boxFragment. In fact, the function and use method of the bottom page dialog box is the same.
• Having the behavior of the bottom pageFragment.

Usage 1 — DrapeFragmentThe coatBottomSheetDialog

Rewrite the onCreateDialog BottomSheetDialogFragment method. You can see that the code is the same as in BottomSheetDialog above. You can also get behavior in the middle for customization. Note that the expansion of the child View uses the static method of the view.inflate, otherwise an error will be reported.

@Override
public Dialog onCreateDialog(Bundle savedInstanceState)
{
    BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
    View view = View.inflate(getContext(), R.layout.dialog_bottom_sheet, null);
    dialog.setContentView(view);
    mBehavior = BottomSheetBehavior.from((View) view.getParent());
    return dialog;
}
Copy the code

Usage two — realFragment

Rewrite the onCreateView BottomSheetDialogFragment method. The code is written the same as the Fragment normally. But the downside is that it’s not easy to get behavior. If you want to force the behavior, you can use the following code.

@Override
public void onStart(a) {
	super.onStart();
    Dialog dialog = getDialog();
    
    if(dialog ! =null) {
        View bottomSheet = dialog.findViewById(R.id.design_bottom_sheet);
        bottomSheet.getLayoutParams().height = ViewGroup.LayoutParams.MATCH_PARENT;
    }
    View view = getView();
    view.post(() -> {
        View parent = (View) view.getParent();
        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) (parent).getLayoutParams();
        CoordinatorLayout.Behavior behavior = params.getBehavior();
        BottomSheetBehavior bottomSheetBehavior = (BottomSheetBehavior) behavior;
        bottomSheetBehavior.setPeekHeight(view.getMeasuredHeight());
        ((View)bottomSheet.getParent()).setBackgroundColor(Color.TRANSPARENT);
    });
}
Copy the code

But if both methods are overridden, then the onCreateDialog will be overridden by the view in the onCreateView.

Extension: Implement rounded corners by setting the style

With the following setup, pass in the style when you create the BottomSheetDialog.

BottomSheetDialog dialog = new BottomSheetDialog(context, R.style.BottomSheetDialog);
Copy the code

<! -- styles. The XML document -- >
<style name="BottomSheet" parent="Widget.Design.BottomSheet.Modal">
    <! -- Background, top two rounded corners -->
    <item name="android:background">@drawable/bg_bottom_sheet</item>
</style>
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <! -- Bottom popup style (equivalent to background) -->
    <item name="bottomSheetStyle">@style/BottomSheet</item>
    <! Status bar color -->
    <item name="android:statusBarColor">@color/transparent</item>
    <! -- Navigation bar color -->
    <item name="android:navigationBarColor">@color/white</item>
</style>

<! @drawable/bg_bottom_sheet-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topLeftRadius="16dp"
        android:topRightRadius="16dp">
    </corners>
    <solid android:color="@android:color/white"/>
    <padding android:top="16dp"
        android:left="8dp"
        android:right="8dp" />
</shape>
Copy the code

rendering

reference

• BottomSheet, BottomSheetDialog use detailed solution

• StackOverflow