阅读 55

Android通用UI组件之Dialog

背景

Dialog是Android开发中常用的UI组件,为了方便显示对话框,系统提供了AlertDialog,它提供了丰富的API,使用时只需要设置相应的属性即可。但通常情况下,不会直接使用AlertDialog, 因为APP的设计并不一定都遵循Material Design的设计标准,同时这种通用的UI组件的设计风格也会经常发生变化。所以通常情况下,都会对AlertDialog的样式进行自定义,使其能够适用于各种设计风格。

自定义Dialog

自定义Dialog通常使用以下三种方式:

  • 通过AlertDialog提供的setView方法设置布局;
  • 继承AlertDialog, 在onCreate中调用setContentView加载布局;
  • 继承DialogFragment, 在onCreateView中加载布局;

具体的核心代码实现如下所示:

// 方法一
View dialogView = View.inflate(this, R.layout.dialog_common_layout, null);
/**
 * 通过dialogView.findViewById获取相应的View并设置对应的值
 */
new AlertDialog.Builder(this)
	.setView(dialogView)
	.show();


// 方法二
public class CommonDialog extends AlertDialog {

	public CommonDialog(Context context) {
		super(context);
	}
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.dialog_common_layout);
		/**
		 * 通过findViewById获取相应的View,设置对应的值
		 */
	}
}


// 方法三
public class CommonDialog extends DialogFragment {

	@Nullable
	@Override
	public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
		View dialogView = inflater.inflate(R.layout.dialog_common_layout, null);
		/**
		 * 通过dialogView.findViewById获取相应的View并设置对应的值
		 */
		return dialogView;
	}
}
复制代码

第一种和第二种方法直接使用的Dialog类型, 这种方式Dialog的生命周期不好控制,容易出现WindowManager$BadTokenException异常。所以为了Dialog的生命周期能够和Activity同步,推荐使用DialogFragment。但是在使用DialogFragment时,最好不要在onCreateView中直接加载布局,因为这种方式相当于弃用了系统提供的AlertDialog样式,如果APP要求使用系统提供的原生组件,此时修改起来可能就比较麻烦。其实DialogFragment还有一个重要的API——onCreateDialog,返回Dialog对象,所以可在里面创建AlertDialog, 根据定义的样式返回相应的风格。

APP中使用Dialog的地方很多,但常用的也就那么几种:提示对话框,选择对话框,底部弹框,加载框,为了更好地进行风格切换,这里同时支持了Material Design的设计风格(系统默认的样式)和自定义的设计风格,只需要设置相应的风格即可。样式如下图所示,具体的源码参考CommonDilaog

image

修改Dialog默认样式

在使用默认的对话框时,有时可能需要改变这几个View的颜色,但AlertDialog并没有提供直接的API进行设置,通过以下方法对其中的View进行设置。

AlertDialog Title的样式可通过设置Dialog主题中的windowTitle属性实现:

<!-- Title的文字样式 -->
<style name="AlertDialogTitleStyle">
    <item name="android:textSize">48dp</item>
    <item name="android:textColor">#ff0000</item>
    <item name="android:textStyle">bold</item>
</style>

<!-- Dialog的主题样式 -->
<style name="CommonDialog" parent="Theme.AppCompat.Dialog">
    <!-- 引用定义的Title样式 -->
    <item name="android:windowTitleStyle">@style/AlertDialogTitleStyle</item>
    <item name="android:windowBackground">@color/transparent</item>
</style>
复制代码

其他的View可通过系统id进行获取:

MessageViewId: android.R.id.message
PositiveButtonId: android.R.id.button1
NegativeButtonId: android.R.id.button2
复制代码

先调用Dialog的show方法(因为调用show方法后Dialog才开始加载布局),然后获取相应的View进行设置样式,例如MessageView样式的修改:

AlertDialog dialog = builder.show();
TextView messageText = dialog.findViewById(android.R.id.message);
messageText.setTextColor(Color.RED);
messageText.setTextSize(20);
复制代码

Dialog主题

在自定义Dialog时,可能需要对Dialog所使用的主题进行定义,这里介绍Dialog主题中常用的几个属性:

<style name="CommonDialog" parent="Theme.AppCompat.Dialog">
    <!-- 背景遮罩的不透明度,backgroundDimEnabled为true时有效 -->
    <item name="android:backgroundDimAmount">0.4</item>
    <!-- 是否需要背景遮罩 -->
    <item name="android:backgroundDimEnabled">true</item>
    <!-- Dialog是否悬停 -->
    <item name="android:windowIsFloating">true</item>
    <!-- dialog的最小宽度占总屏幕宽度的百分比 -->
    <item name="android:windowMinWidthMinor">85%</item>
    <!-- Dialog内容区域的背景 -->
    <item name="android:windowBackground">@color/transparent</item>
</style>
复制代码

windowBackground属性需要注意一下,如果Dialog的自定义布局中设置了背景,那么这里可将其设置为透明,否则在低版本的Android系统上会出现黑色边框。如果自定义布局中没有设置背景,可将windowBackground属性设置为相应的Drawable资源。

当然,Dialog的主题中还有很多属性。但没有对齐相关的属性。如果需要修改Dialog的对齐方式,可在show方法调用之后,获取Dialog的LayoutParams参数进行相应的设置。例如让Dialog显示在底部:

WindowManager.LayoutParams params = dialog.getWindow().getAttributes();
params.gravity = Gravity.BOTTOM;
dialog.getWindow().setAttributes(params);
复制代码

总结

在对系统UI组件进行封装时,一定要考虑原生的样式,尽可能利用系统提供的组件实现。这样可在各种不同的UI风格之间进行切换。

关注下面的标签,发现更多相似文章
评论