Android DialogFragment、BottomSh

2021-07-01  本文已影响0人  乌托邦式的爱情

在前面两篇我们介绍了Fragment的基本使用和Fragment配套ViewPager的使用，接下来我们就来看看除此之外其他的平时不常用但是我们很有必要掌握的其他的Fragment的基本使用。主要介绍的就是两种：DialogFragment和BottomSheetDialogFragment。

（一）DialogFragment

DialogFragment看名字就知道是Dialog样式的Fragment，其推出的初衷就是为了解决传统Dialog无法与宿主的生命周期绑定导致需要后台时刻监听其动态变化，特别当在旋转屏幕的时候会出现问题。而使用DialogFragment就可以很好的去解决这个问题，下面就一起来看看DialogFragment。

DialogFragment的使用：

DialogFragment的使用很简单，首先新建一个类继承自DialogFragment：

class BlankDialogFragment : DialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = AlertDialog.Builder(context,R.style.dialogFullScreen)
        dialog.setTitle("测试Dialog")
        dialog.setMessage("使用Dialog显示DialogFragment")
        return dialog.create()
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.dialog_fragment_layout,container,false)
    }

    override fun onStart() {
        val params = dialog?.window?.attributes
        params?.width = ViewGroup.LayoutParams.WRAP_CONTENT
        params?.height = ViewGroup.LayoutParams.WRAP_CONTENT
        dialog?.window?.attributes = params
        dialog?.window?.decorView?.background = ColorDrawable(Color.TRANSPARENT)
        super.onStart()
    }
}

在宿主Activity点击显示

fun showNormal(view: View) {
    val dialogFragment = BlankDialogFragment()
    dialogFragment.setStyle(DialogFragment.STYLE_NORMAL,R.style.dialogFullScreen)
    dialogFragment.show(supportFragmentManager,"dialogFragment")
}
DialogFragment的使用比较简单，但是需要注意以下几点：

（1）当onCreateDialog与onCreateView同时都工作的时候，onCreateDialog的优先级高于onCreateView。

（2）无论是我们在onCreateDialog中创建的Dialog还是在onCreateView中创建的View都无法让整个View在宽度上填充整个屏幕，那是因为dialog自带的padding内边距属性导致的，可以通过设置Dialog的样式来解决。

（3）设置样式的时候分为两种，当显示方式为onCreateDialog的时候，直接在创建AlertDialog实例的时候加上style。当显示方式为onCreateView的时候，直接dialogFragment.setStyle(DialogFragment.STYLE_NORMAL,R.style.dialogFullScreen)。

（4）点击外部不关闭对话框的设置方式有两种：

  《1》在style样式中加上
   <item name="android:windowCloseOnTouchOutside">false</item>
 《2》直接通过代码设置 
  dialog?.setCanceledOnTouchOutside(false)

（5）屏蔽返回键 dialog?.setCancelable(false)，同时也会导致点击外部无法关闭对话框。

（6）给对话框设置透明背景：
dialog?.window?.decorView?.background = ColorDrawable(Color.TRANSPARENT)

Dialog的常见样式：
//Theme.AppCompat.Dialog主题常用的一般有以下属性：
<!-- 背景透明 -->  
<item name="android:windowBackground">@android:color/transparent</item>  
<!-- 边框 -->  
<item name="android:windowFrame">@null</item>  
<!-- 是否浮现在activity之上 -->  
<item name="android:windowIsFloating">true</item>  
<!-- 是否半透明 -->  
<item name="android:windowIsTranslucent">true</item>  
<!-- 是否无标题 -->  
<item name="android:windowNoTitle">true</item>  
<!-- Dialog背景样式 --> 
<item name="android:background">@android:color/transparent</item>  
<!-- 模糊 -->  
<item name="android:backgroundDimEnabled">true</item>  
<!-- 遮罩层 -->  
<item name="android:backgroundDimAmount">0.5</item>
设置动画：
override fun onStart() {
    val params = dialog?.window?.attributes
    params?.width = ViewGroup.LayoutParams.WRAP_CONTENT
    params?.height = ViewGroup.LayoutParams.WRAP_CONTENT
    dialog?.window?.attributes = params
    dialog?.window?.decorView?.background = ColorDrawable(Color.TRANSPARENT)
    dialog?.window?.setWindowAnimations(R.style.dialog_animation_style)
    super.onStart()
}

其中dialog?.window?.setWindowAnimations(R.style.dialog_animation_style)就是给dialogFragment设置动画效果。其中dialog_animation_style的写法为：

<style name="dialog_animation_style">
    <item name="android:windowEnterAnimation">@anim/dialog_show_anim</item>
    <item name="android:windowExitAnimation">@anim/dialog_miss_anim</item>
</style>

好了，到这里，dialogFragment的使用就结束了，是不是很容易。

（二）BottomSheetDialogFragment

首先贴一张图


1.png

这是Android 官方网站上面的一个介绍BottomSheetDialogFragment的结构图，从官方文档可以看出，BottomSheetDialogFragment是继承自AppCompatDialogFragment，而
AppCompatDialogFragment又是继承自DialogFragment，而DialogFragment是继承自Fragment。所以，BottomSheetDialogFragment是DialogFragment的子类，具有DialogFragment的所有特性。

一个最简单的BottomSheetDialogFragment的完整代码为：

class BlankBottomSheetDialogFragment : BottomSheetDialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(context!!)
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.dialog_fragment_layout,container,false)
    }

    override fun onStart() {
        super.onStart()
    }
}

最终呈现的效果为：


3.png

其中我们点击从底部弹出就呈现出BottomSheetDialogFragment的最终效果，其中蓝色部分就是我们在onCreateView里面设置的自定义布局。需要注意的是BottomSheetDialogFragment本身是支持向上、向下滑动的，在没有人为设置的情况下，其基本的滑动逻辑是这样的：

（1）当我们在onCreateView里面设置的最终显示的View的高度小于屏幕的60%的时候，是无法向上滑动的，而在手指进行拖动的时候，如果里面的View可以滑动，则这时候的手指滑动事件交由里面的View进行消费（无论是向上或者向下滑动），而一旦手指离开屏幕，再次下滑的时候事件会交给BottomSheetDialogFragment进行消费，这个时候会发现BottomSheetDialogFragment会被关闭。

（2）当我们在onCreateView里面设置的最终显示的View的高度大于屏幕的60%的时候，是可以向上滑动的，最终向上滑动的距离取决于View最终的高度。当我们手指进行滑动的时候，如果手指向上滑动，则事件交由BottomSheetDialogFragment进行消费，当滑动到顶部的时候，这个时候再继续向上滑动，事件则交由View进行消费。当向下滑动的时候，如果View展示的高度大于屏幕的60%的时候，松开手指，BottomSheetDialogFragment会自动停留在屏幕的60%的位置，如果View展示的高度小于屏幕的60%的时候，松开手指，BottomSheetDialogFragment会自动关闭。

（3）在进行滑动的时候，如果事件是由里面的View处理的话，无论是向上或者向下滑动，手指都不能离开屏幕，否则一旦离开屏幕后，再次滑动事件就由BottomSheetDialogFragment进行消费了。

一般情况下我们会在BottomSheetDialogFragment的onStart方法里面去做一些基本的设置，如下代码所示：

override fun onStart() {
    super.onStart()
    // 获取dialog对象
    val dialog = dialog
    // 获取dialog的根布局
    val bottomSheet = dialog?.window?.findViewById<FrameLayout>(R.id.design_bottom_sheet)
    // 把windows的默认背景颜色去掉，不然圆角看不见
    bottomSheet?.background = ColorDrawable(Color.TRANSPARENT)
    // 获取根布局的LayoutParams对象
    val layoutParams = bottomSheet?.layoutParams
    // 修改弹窗的最大高度，不允许上滑
    layoutParams?.height = getPeekHeight()
    bottomSheet?.layoutParams = layoutParams
    val behavior = BottomSheetBehavior.from(bottomSheet!!)
    behavior.peekHeight = getPeekHeight()
    // 初始化为展开状态(默认为展开状态)
    // BottomSheetBehavior.STATE_HIDDEN：对应为隐藏状态
    behavior.state = BottomSheetBehavior.STATE_EXPANDED
}

在这段代码里面实现了很重要的两个点：
（1）设置BottomSheetDialogFragment的背景为透明，方便自己设置的布局展现为自己想要的效果。
（2）修改弹窗的最大高度，不让BottomSheetDialogFragment实现上滑。

禁用BottomSheetDialog的滑动

第一步：

private val mBottomSheetBehaviorCallback: BottomSheetCallback = object : BottomSheetCallback() {
    override fun onStateChanged(bottomSheet: View, newState: Int) {
        //禁止拖拽，
        if (newState == BottomSheetBehavior.STATE_DRAGGING) {
            //设置为收缩状态
            behavior?.state = BottomSheetBehavior.STATE_COLLAPSED
        }
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {}
}

第二步：

behavior?.addBottomSheetCallback(mBottomSheetBehaviorCallback)

最后需要重点强调一点的就是，因为BottomSheetDialogFragment自己有滑动，如果在我们的View里面也有可以滑动的控件并且是同方向的，比如RecyclerView、ScrollView等等，会产生滑动冲突，这个时候只需要在我们的View里面使用NestedScrollView来进行嵌套，就能完美的解决滑动冲突问题。

关于BottomSheetDialogFragment的介绍就到这里了，欢迎大家在下面留言~

上一篇下一篇

猜你喜欢

热点阅读