转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/127967304
本文出自【赵彦军的博客】
MD风格的底部弹窗,比自定义dialog或popupwindow使用更简单,功能也更强大。
其实细分来说,是BottomSheet、BottomSheetDialog、BottomSheetDialogFragment
代码 https://gitee.com/zhaoyanjun/bottomSheetDialogFragmentDemo
与主界面同层级关系,可以事件触发,如果有设置显示高度的话,也可以拉出来
,且不会影响主界面的交互。
XML
注意,
以上3个条件都是必须的。
代码
View bottomView = findViewById(R.id.ll_bottom_sheet);bottomView.setOnClickListener(v -> {BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomView);if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {//如果是展开状态,则关闭,反之亦然behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);} else {behavior.setState(BottomSheetBehavior.STATE_EXPANDED);}});
可以看到弹出来之后是有一个半透明
的蒙层的,这时候是影响主界面交互的,也就意味着此时BottomSheetDialog
的优先级是要高于主界面的。
代码
public class MyBottomSheetDialog extends BottomSheetDialog {public MyBottomSheetDialog(@NonNull Context context) {super(context);}public MyBottomSheetDialog(@NonNull Context context, int theme) {super(context, theme);}protected MyBottomSheetDialog(@NonNull Context context, boolean cancelable, OnCancelListener cancelListener) {super(context, cancelable, cancelListener);}
}
显示 Dialog
MyBottomSheetDialog bottomSheetDialog = new MyBottomSheetDialog(this);
bottomSheetDialog.setContentView(R.layout.bottom_dialog_layout);
bottomSheetDialog.show();
bottom_dialog_layout :
比较简单的使用方式,直接实例化之后setContentView
,然后调用show
就可以了。
这里只是一个展示效果,实际上使用场景可能会复杂一些,还要做一些操作等等,所以,也可以自定义dialog
继承自BottomSheetDialog
,然后处理自己的业务逻辑。
效果跟BottomSheetDialog
差不多,代码跟DialogFragment
差不多。
代码
public class MyDialogFragment extends BottomSheetDialogFragment {@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}
bottom_dialog_fragment_layout
显示
MyDialogFragment dialog = new MyDialogFragment();
Bundle bundle = new Bundle();
dialog.setArguments(bundle);
dialog.show(getSupportFragmentManager(), "dialog_fragment");
但是在实际开发中,我们的需求可能并不能满足于此,比如上部分圆角效果
、指定高度
等
先设置原有背景透明
style.xml
onCreate中设置style
public class MyDialogFragment extends BottomSheetDialogFragment {@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialog);}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}
在根布局的 view上设置 background
特别注意:根布局除了设置 android:background
属性外,还需要设置 android:padding
属性,否则圆角显示不出来。
fragment_dialog_bg
需要在 style
中增加 android:backgroundDimEnabled
属性
在 style
中增加 android:backgroundDimAmount
属性,属性值范围 0 - 1 .
重写 onCreateDialog
方法,设置 setCanceledOnTouchOutside
值为 false
public class MyDialogFragment extends BottomSheetDialogFragment {@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialog);}@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);dialog.setCanceledOnTouchOutside(false);return dialog;}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}
bottomSheetBehavior.setHideable(false);
具体使用方法:
@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);bottomSheetBehavior.setHideable(false);});}return dialog;}
bottomSheetBehavior.setPeekHeight(1200);
使用:
@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);bottomSheetBehavior.setPeekHeight(1200);});}return dialog;}@Nullab
当内容特别多,比如有 recyclerView 时,我们希望 dialog 展开的高度是全屏的。
//默认展开
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
使用
@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);//默认展开bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);});}return dialog;}
bottomSheetBehavior.setBottomSheetCallback()
使用
public class MyDialogFragment extends BottomSheetDialogFragment {@Overridepublic void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setStyle(STYLE_NORMAL, R.style.MyBottomSheetDialog);}@Overridepublic Dialog onCreateDialog(Bundle savedInstanceState) {Dialog dialog = super.onCreateDialog(savedInstanceState);if (dialog instanceof BottomSheetDialog) {BottomSheetDialog bottomSheetDialog = (BottomSheetDialog) dialog;bottomSheetDialog.setOnShowListener(dialogInterface -> {FrameLayout bottomSheet = bottomSheetDialog.findViewById(android.support.design.R.id.design_bottom_sheet);BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);//默认展开bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {@Overridepublic void onStateChanged(@NonNull View view, int newState) {switch (newState) {case BottomSheetBehavior.STATE_EXPANDED:break;case BottomSheetBehavior.STATE_COLLAPSED:break;case BottomSheetBehavior.STATE_DRAGGING:break;case BottomSheetBehavior.STATE_SETTLING:break;case BottomSheetBehavior.STATE_HIDDEN:break;}}@Overridepublic void onSlide(@NonNull View view, float v) {}});});}return dialog;}@Nullable@Overridepublic View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.bottom_dialog_fragment_layout, container, false);return view;}
}
在 BottomSheetDialogFragment 实现底部常驻布局是比较难的,好在有些人通过巧妙的方式实现了。
https://github.com/dorianpavetic/StickyBottomSheet
Android: Sticky view at the bottom of bottom sheet dialog fragment