在移动端应用开发中，弹窗式对话框是经常用到的设计元素之一。Material Design 是 Google 推出的移动应用设计规范，其中对话框设计十分重要。本文将介绍如何使用 DialogFragment 方式创建弹窗式对话框。
DialogFragment 是什么？
DialogFragment 是一种特殊类型的 Fragment。与常规 Fragment 不同的是，DialogFragment 常用于创建对话框，它包含了一个 Dialog，但是与 Dialog 直接使用不同的是，DialogFragment 更加方便地管理 Dialog 生命周期，并允许使用 Fragment 的多种优点，如与 Activity 通信，具有灵活性等等。
如何创建 DialogFragment 弹窗式对话框
下面将详细介绍如何使用 DialogFragment 创建弹窗式对话框。
- 创建 DialogFragment 类，继承自 DialogFragment 类。
// javascriptcn.com 代码示例
public class MyDialogFragment extends DialogFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.dialog_fragment, container, false);
// 在这里可以进行 Dialog 属性的设置，如设置 Dialog 的风格、大小、位置等。
getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);
return view;
}
}- 创建弹窗式对话框布局。
在项目中创建一个 layout 文件夹，然后在该文件夹下创建 dialog_fragment.xml 文件：
// javascriptcn.com 代码示例
<TextView
android:id="@+id/tv_dialog_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dialog Title"/>
<Button
android:id="@+id/btn_dialog_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"/>
<Button
android:id="@+id/btn_dialog_confirm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Confirm"/>这里我们简单的创建了一个包含标题和两个按钮的布局。
- 在 Activity 中调用 DialogFragment
// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {
private Button btnOpenDialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnOpenDialog = findViewById(R.id.btn_open_dialog);
btnOpenDialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
MyDialogFragment dialogFragment = new MyDialogFragment();
dialogFragment.show(getSupportFragmentManager(), "MyDialogFragment");
}
});
}
}这里我们创建了一个 Button，当点击按钮时，会创建一个 DialogFragment 并显示出来。
- 给按钮添加点击事件并处理回调逻辑
我们在弹窗布局中添加了两个按钮，现在需要给它们分别添加监听事件。当用户点击对应按钮时，我们需要分别触发相应的操作。我们可以在 MyDialogFragment 类中添加如下回调方法：
// javascriptcn.com 代码示例
public interface OnDialogClickListener {
void onCancelClick();
void onConfirmClick();
}
public void setOnDialogClickListener(OnDialogClickListener listener) {
mListener = listener;
}在 onCreateView 方法中给两个按钮添加点击监听，当用户点击按钮时触发相应的回调方法：
// javascriptcn.com 代码示例
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.dialog_fragment, container, false);
Button btnCancel = view.findViewById(R.id.btn_dialog_cancel);
btnCancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mListener.onCancelClick();
dismiss();
}
});
Button btnConfirm = view.findViewById(R.id.btn_dialog_confirm);
btnConfirm.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mListener.onConfirmClick();
dismiss();
}
});
return view;
}这里我们给按钮添加了监听事件，并在回调方法中触发相应操作。
- 在 Activity 中实现回调方法
最后一步是在 Activity 中实现 MyDialogFragment.OnDialogClickListener 的两个回调方法。
// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity implements MyDialogFragment.OnDialogClickListener {
private Button btnOpenDialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnOpenDialog = findViewById(R.id.btn_open_dialog);
btnOpenDialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
MyDialogFragment dialogFragment = new MyDialogFragment();
dialogFragment.setOnDialogClickListener(MainActivity.this);
dialogFragment.show(getSupportFragmentManager(), "MyDialogFragment");
}
});
}
@Override
public void onCancelClick() {
Toast.makeText(this, "Cancel", Toast.LENGTH_SHORT).show();
}
@Override
public void onConfirmClick() {
Toast.makeText(this, "Confirm", Toast.LENGTH_SHORT).show();
}
}这里我们在 MainActivity 中实现了 MyDialogFragment.OnDialogClickListener 的两个回调方法，当用户点击按钮时，我们将触发相应的回调方法，从而处理用户的操作。
总结
本文介绍了如何使用 DialogFragment 方式创建弹窗式对话框，并且详细讲解了每一步的具体实现细节。DialogFragment 在对话框创建方面比 Dialog 更加灵活、方便，我们可以轻松地实现自定义的对话框，并且方便地处理回调逻辑。通过学习本文的内容，读者可以掌握使用 DialogFragment 的方法，进一步提高移动应用开发的能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a2a797d4982a6ebc84017