前言
一直以来 , 做弹窗功能的时候都是使用的Dialog , 布局复杂的弹窗则使用Activity , 把背景设置成透明, 最近了解到一个DialogFragment , 发现使用起来更加方便, 也是谷歌建议的做法.
简介
DialogFragment 继承自Fragment , 所以它的用法基本跟Fragment一致 , 也包含了一些生命周期和上下文context 和 监听之类的东西. 而且fragment可以定义它的布局, 非常适合我们开发时候用做复杂UI弹窗的实现.
DialogFragment内嵌了一个Dialog , 可以在fragment中管理它的dialog , 比普通的Dialog用起来更加方便 .
因为Fragment中有onCreateView展示自己的布局, 又内嵌了一个dialog来展示布局 , 所以其实重写其中一个方法就够了 , 如果重写两个呢?
DialogFragment优先查找Dialog , 如果实现了onCreateDialog则会展示onCreateDialog中的内容 , 否则才会展示onCreateView中的布局.
使用
创建
首先创建一个集成自DiaglogFragment的类 , 并实现onCreateDialog / onCreateView .
class MyDialogFragment constructor(private var title: String = "", private var msg: String = "") :
DialogFragment() {
companion object {
private const val KEY_TITLE = "key_title_extra"
private const val KEY_MSG = "key_msg_extra"
fun newInstance(title: String = "", msg: String = ""): MyDialogFragment {
val fragment = MyDialogFragment()
val bundle = Bundle()
bundle.putString(KEY_TITLE, title)
bundle.putString(KEY_MSG, msg)
fragment.arguments = bundle
return fragment
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val bundle = arguments
title = bundle?.getString(KEY_TITLE).toString()
msg = bundle?.getString(KEY_MSG).toString()
}
/**
* 有[onCreateDialog]的时候优先显示[onCreateDialog]
* 如果没有则显示[onCreateView]
*/
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val builder = context?.let { AlertDialog.Builder(it) }
builder?.setTitle(title)
builder?.setMessage(msg)
return builder?.create()!!
}
@SuppressLint("InflateParams", "SetTextI18n")
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = LayoutInflater.from(context).inflate(R.layout.dialog_test, null)
view.dialog_title.text = title
view.dialog_msg.text = msg
return view
}
}
这里我先写了一个简单的MyDialogFragment , 重写了onCreateDialog 和 onCreateView 两个方法
-
onCreateDialog很简单, 只有一个标题和一个内容, 共两个字符串 -
onCreateView中的layout其实也只有两个textview, 分别显示标题和内容.
标题和内容是由调用的地方传进来的, 所以我写了一个默认的方法 , 用来传入参数 , 并在 onCreate 中接收传来的参数.
调用
因为我们已经封装了一个传入参数的方法, 所以调用的时候就很简单了:
MyDialogFragment.newInstance("hello title", "hello world")
.show(supportFragmentManager, "1")
其实这个拆开来就是:
val myDialogFragment = MyDialogFragment.newInstance("hello title", "hello world")
myDialogFragment.show(supportFragmentManager, "1")
先创建了MyDialogFragment的实例 , 然后调用了它的show()方法 .
对应的则是有一个dissmiss方法来关闭弹窗 :
myDialogFragment.dismiss()
代码写完, 我们看一下效果:
这个布局, 很明显是dialog的默认布局了 ,
而我们实现了onCreateDialog 和 onCreateView两个方法, 也证实了我们上面说的会优先显示dialog的UI.
之后 , 我们注释掉onCreateDialog 再看一下:
这次 , 就只显示了onCreateView中的UI. 然后我们给这个textview添加一个关闭它自己的方法:
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = LayoutInflater.from(context).inflate(R.layout.dialog_test, null)
view.dialog_title.text = title
view.dialog_msg.text = msg
//add this
view.dialog_msg.setOnClickListener { dismiss() }
return view
}
这次点击这个msg的textview就会关闭这个弹窗了 .
当然了, 它跟dialog的默认逻辑一样 , 可以点击灰色部分关闭弹窗.
我们也可以设置它是否允许点击外部和返回键来关闭弹窗 :
默认为true , 允许关闭.
在kotlin中只需要一行代码
isCancelable = false
在onCreate中写即可, 如果你想根据onCreateDiakog和onCreateiew中使用不同的逻辑 , 也可以分别在这两个方法中写.
在java中则需要调用setCancelable (boolean)方法
设置弹窗位置和尺寸大小
创建弹窗时 .弹窗的位置和大小是固定的. 始终在中间显示, 并且距离左右两侧有一定的边距 .
有时候UI设计出来的会边距更大/更小, 甚至没有边距, 这时候就要设置它的尺寸了 . 但直接在xml中写是没有效果的, 需要代码来控制.
我们可以在dialogFragment中重写onStart方法:
override fun onStart() {
super.onStart()
val window = dialog!!.window
//设置弹窗的背景色,才能设置弹窗的尺寸和位置
window?.setBackgroundDrawableResource(zhuoyuan.li.kotlinstudy.R.color.colorAccent)
val attributes = window!!.attributes
//获取屏幕数据
val displayMetrics = resources.displayMetrics
//获取屏幕宽高
val widthPixels = displayMetrics.widthPixels
//指定弹窗内容宽高
attributes.width = widthPixels
attributes.height = 600
//默认位置就是居中
attributes.gravity = Gravity.CENTER
window.attributes = attributes
}
可以看到, 如果想设置弹窗的大小, 一定要给它设置一个背景色, 不过要注意 ,
-
onCreateDialog和onCreateView的背景色都会使用这个. -
onCreateView创建的弹窗, 如果在 xml中布局设置了背景色是会覆盖掉这个颜色的. 使用xml中的颜色