android仿饿了么,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 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

@null

true

true

true

@color/transparent

@color/transparent

0.6

true

@style/dialog_animation

@anim/dialog_enter

@anim/dialog_exit

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

android:fromYDelta="100%p"

android:toYDelta="0"

android:duration="300" />

fromXDelta 属性为动画起始时 X坐标上的位置

toXDelta 属性为动画结束时 X坐标上的位置

fromYDelta 属性为动画起始时 Y坐标上的位置

toYDelta 属性为动画结束时 Y坐标上的位置

注意:

没有指定，

默认是以自己为相对参照物

长整型值：

duration 属性为动画持续时间

说明: 时间以毫秒为单位

在这些属性里面还可以加上%和p,例如:

android:toXDelta="100%",表示自身的100%,也就是从View自己的位置开始。

android:toXDelta="80%p",表示父层View的80%,是以它父层View为参照的。

android:fromYDelta="100%p"

android:toYDelta="0"

android:duration="300" />

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布局,贴出来

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

android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp"/>

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