Android 仿饿了么下拉Dialog

今天点餐的时候看见一个好看的下拉Dialog,感觉后期会用的到,所以,今天打算撸一个

BottomSheetDialogFragment

需要用到这个控件,但是这个控件属于design这个包下面

import android.support.design.widget.BottomSheetDialogFragment;

如果我们项目中没有的话,那么,我们需要引入这个

    implementation 'com.android.support:design:28.0.0'

1.开始创建BaseBottomSheetDialogFragment

public class BaseBottomSheetDialog extends BottomSheetDialogFragment {
    private FrameLayout bottomSheet;
    public BottomSheetBehavior<FrameLayout> behavior;

    @Override
    public void onStart() {
        super.onStart();

        BottomSheetDialog dialog = (BottomSheetDialog) getDialog();
        bottomSheet = dialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet);
        if (bottomSheet != null) {
            CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) bottomSheet.getLayoutParams();
            layoutParams.height = getHeight();
            bottomSheet.setLayoutParams(layoutParams);
            behavior = BottomSheetBehavior.from(bottomSheet);
            behavior.setPeekHeight(getHeight());
            // 初始为展开状态
            behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    }

    @Override
    public int getTheme() {
        return R.style.basedialog_anim_style;
    }

    protected int getHeight() {
        return getResources().getDisplayMetrics().heightPixels;
    }

代码copy以后,发现我们缺少一个style,那么我们在直接copy

<style name="basedialog_anim_style" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:background">@color/transparent</item>
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:backgroundDimAmount">0.6</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowAnimationStyle">@style/dialog_animation</item>
    </style>
    <style name="dialog_animation" parent="android:Animation">
        <item name="android:windowEnterAnimation">@anim/dialog_enter</item>
        <item name="android:windowExitAnimation">@anim/dialog_exit</item>
    </style>

这段代码copy过去以后,又发现缺少一个anima,继续copy,第一个是dialog_ente,第二个是dialog_exit

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="300" />
</set>
 fromXDelta 属性为动画起始时 X坐标上的位置  
                toXDelta   属性为动画结束时 X坐标上的位置  
                fromYDelta 属性为动画起始时 Y坐标上的位置  
                toYDelta   属性为动画结束时 Y坐标上的位置  
                注意:  
                         没有指定，  
                         默认是以自己为相对参照物  
            长整型值：  
                duration  属性为动画持续时间  
                说明:   时间以毫秒为单位  
在这些属性里面还可以加上%和p,例如:
android:toXDelta="100%",表示自身的100%,也就是从View自己的位置开始。
android:toXDelta="80%p",表示父层View的80%,是以它父层View为参照的。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate
          android:fromYDelta="100%p"
          android:toYDelta="0"
          android:duration="300" />
</set>

2.前面copy以后,接着我们上代码

在创建一个class

public class MyBottomSheetDialog extends BaseBottomSheetDialog {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.dialog_comment, container);
        return view;
    }

    @Override
    protected int getHeight() {
        return getResources().getDisplayMetrics().heightPixels - 400;
    }

缺少一个.dialog_comment布局,贴出来

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@drawable/roundmiddle_bgwhite_top"/>

缺少一个drawable,我们继续贴出来 roundmiddle_bgwhite_top.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
        android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>
    <solid android:color="#fff"/>
</shape>

3.Activity用起来

        findViewById(R.id.btn_popup).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                MyBottomSheetDialog dialog = new MyBottomSheetDialog();
                dialog.show(getSupportFragmentManager(), "");
            }
        });

这些代码全部拷过去以后,效果实现了,简直爽的一批;

解释一下.不然小伙伴可能有些方法不明白

  @Override
    protected int getHeight() {
        return getResources().getDisplayMetrics().heightPixels - 400;
    }

这个是返回DIalog的高度,-400说简单点就是marginTop的意思.但是这里的400可是像素啊.来看个效果图就明白了

减少400的效果图

400的截图.png

减少1000的效果图

1000.png