0%

精选翻译 拜拜Progress Dialog,你好Alter Dialog

首语

最终还是选择继续Android这条路,那就和老伙伴继续前行吧。在复习原来的基础时,发现对于对话框的使用官方的例子很完备了。但是,Medium上的这篇文章也足够清晰简明,当做未来拾遗的参考吧。做做翻译工作,如果有幸能帮到谁,那就更好不过了。

原文出处:Bye-Bye Progress Dialog, Hello Alert Dialog

译文

我们所看到的所有漂亮的等待圈或者是进度条都代表着一个特定的任务在后台执行。这些组件都是通过自定义的形式来实现并且涵盖了很棒的视觉效果内容。

之前,我们实现进度对话框都是使用Progress Dialog,但现在有了Alter Dialog,所以他也就退出历史舞台(Deprecated)了。在App中,总需要一些弹出式窗口来处理另写任务,如果单独使用一个Activity或者Fragment又不太合适。这些任务通常包含权限请求、确认例如登出或者开启事务等。

因此,本文着重关注如何使用Alter Dialog来实现Progress Dialog功能,因此我们在本文中不会关注Alter Dialog的功能细节。我将会另起一篇文章来针对这些细节进行介绍。

现在就开始吧!

步骤一. 自定义一个Layout

你可以使用任意的进度指示条或者根据需求自行创建。在此处我就直接使用Material Design所提供的进度条。因此,一个自定义的Layout内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">


<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingLeft="30dp"
android:paddingTop="30dp"
android:paddingRight="30dp"
android:paddingBottom="30dp">

<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:paddingRight="20dp" />

<TextView
android:id="@+id/text_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp" />


</androidx.appcompat.widget.LinearLayoutCompat>
</layout>

这里我使用了Text View来展示进度条提示信息:“请稍后,正在加载”。当然你也可以在后续步骤中隐藏文字信息。

同时,这里我使用的对话框并没有同步真实的更新进度,但是,如果是下载任务的话,使用带有进度的指示条会好一些。我这里的进度条只会旋转直到其结束任务。

步骤二. 创建一个通用的Alter Dialog创建器

这里我创建了一个通用的创建器,以便于你可以在不同地方、不同任务场景下来创建不同类型的对话框。

1
2
3
4
5
6
7
8
9
10
11
12
13
fun getAlertDialog(
context: Context,
layout: Int,
setCancellationOnTouchOutside: Boolean
): AlertDialog {
val builder: AlertDialog.Builder = AlertDialog.Builder(context)
val customLayout: View =
layoutInflater.inflate(layout, null)
builder.setView(customLayout)
val dialog = builder.create()
dialog.setCanceledOnTouchOutside(setCancellationOnTouchOutside)
return dialog
}

此处,setCancellationOnTouchOutside用于帮助用户在对话框弹出后进行取消,以便于进行后续的屏幕交互操作。我们可以开启或者关闭它。这个方法会返回一个Dialog对象,以便于添加类似行为按钮的操作。我们可以可以设置加载时的对话框文字并且在对话框弹出时进行展示。

步骤3. 创建一个等待对话框

传入正确的参数到上述方法,我们就可以创建一个Dialog对象并设置文字了。

1
2
3
4
5
6
fun showProgressDialog(context: Context, message: String): AlertDialog {
val dialog = getAlertDialog(context, R.layout.custom_progressbar, setCancellationOnTouchOutside = false)
dialog.show()
dialog.text_progress_bar.text = message
return dialog
}

这个方法用于返回展示的对话框对象,你可以在任何你需要调用dismiss()函数的时候使用它。

现在,你可以正常的创建一个漂亮的进度对话框了,期待你可以让用户的等待过程变得有趣!

对话框效果

补充

因为作者这里封装了一个函数来作为调用,但是原文中并没有指出Alter Dialog所在的包,因此,本人在实践时,遭遇到类似的情况,在设置了确认和取消按钮后,按钮样式和背景颜色都很奇怪。如果使用了android.app.AlertDialog,那么效果就会是这样:

错误包里的AlterDialog效果

而使用androidx.appcompat.app.AlertDialog,那么效果就是正常的:

正确包里的AlterDialog效果

这是一个值得注意的细节,android.app.AlertDialog会显示Android 5.0版本前的老样式,而androidx.appcompat.app.AlertDialog则是更新后的样式,两者的使用方式完全相同。

另外,官方文档中使用Dialog的方式也有一些不同,原文作者是直接使用了AlertDialog对象来创建对话框。而官方则使用了DialogFragment来托管Alertdialog对象,证明官方推荐使用DialogFragment来创建对象,这样做的好处在于对话框的状态也能够通过FragmentManager来进行管理,在旋转屏幕等一系列需要重绘的场景下,都能使对话框不会消失,状态得以保存。如果直接使用Dialog对象的话,对话框会在旋转屏幕后消失。

官方Dialog的使用方式

既然官方推荐使用DialogFragment来创建对话框,那么作为补充内容,本人也将创建对话框的方式进行搬运保存,以便未来复查。

官方和译文中唯一不同的点在于,译文使用一个方法来创建Dialog对象,而官方文档则使用继承DialogFragment的方式,在onCreateDialog()函数中创建对话框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class WaitingDialog: DialogFragment() {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
return activity.let {
// 实例化加载的布局
val view = activity?.layoutInflater?.inflate(R.layout.dialog_waiting, null)

// 创建对话框的构建器
val builder = AlertDialog.Builder(it)
// 填充view对象
builder.setView(view)
builder.create()
} ?: throw IllegalStateException("Activity cannot be null")
}
}

在使用时,只需要实例话对应的对话框对象,就可以为显示对话框或者为对话框添加额外的属性了。

1
2
3
// 显示等待条
val waitingDialog = WaitingDialog()
waitingDialog.show(supportFragmentManager, null)

至此,关于对话框的使用就介绍到这,后面本人也会针对这些工具整理一个工具文档来方便查阅和实现组件。

参考

我为何要封装DialogFragment?

官方文档-对话框

Dialog,AlertDialog和DialogFragment