在Android应用中显示材料设计对话框

最新推荐文章于 2021-05-26 21:31:34 发布

cunjie3951

最新推荐文章于 2021-05-26 21:31:34 发布

阅读量265

点赞数

文章标签： java android 移动开发 javascript js ViewUI

Google的材料设计团队定义了Android中对话框的功能，如下所示：

对话框通知用户有关特定任务的信息，可能包含关键信息，需要做出决定或涉及多个任务。

现在您已经了解了对话框的用途，现在该学习如何显示对话框了。在本教程中，我将指导您完成在Android中显示各种材料设计对话框的过程。我们将介绍以下对话框：

警报
单选和多选
时间和日期选择器
底页对话框
全屏对话框

您可以在我们的GitHub存储库中找到本教程的示例项目，以方便您继续学习。

1.警报对话框

根据Google的官方材料设计文档：

警报是紧急中断，需要确认，可以通知用户有关情况。

创建警报对话框

确保在build.gradle文件（应用程序模块）中包括最新的appcompat工件。支持的最低API级别为Android 4.0（API级别14）。

dependencies {
    implementation 'com.android.support:appcompat-v7:26.1.0'
}

接下来是创建AlertDialog.Builder的实例。

new AlertDialog.Builder(this)
        .setTitle("Nuke planet Jupiter?")
        .setMessage("Note that nuking planet Jupiter will destroy everything in there.")
        .setPositiveButton("Nuke", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Log.d("MainActivity", "Sending atomic bombs to Jupiter");
            }
        })
        .setNegativeButton("Abort", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Log.d("MainActivity", "Aborting mission...");
            }
        })
        .show();

在这里，我们创建了AlertDialog.Builder的实例，并通过在其上调用一些setter方法开始配置该实例。请注意，我们使用的AlertDialog来自Android支持工件的AlertDialog 。

import android.support.v7.app.AlertDialog;

这是我们在AlertDialog.Builder实例上调用的setter方法的详细信息。

setTitle() ：设置要显示在对话框标题栏中的文本。
setMessage() ：设置要在对话框中显示的消息。
setPositiveButton() ：提供的第一个参数是在肯定按钮中显示的文本，而第二个参数是单击肯定按钮时调用的侦听器。
setNegativeButton() ：提供的第一个参数是在否定按钮中显示的文本，而第二个参数是单击否定按钮时调用的侦听器。

注意AlertDialog.Builder有一个setView()来设置自定义布局视图。

要在屏幕上显示对话框，我们只需调用show() 。

还有另一个setter方法，称为setNeutralButton() 。调用此方法将在对话框的最左侧添加另一个按钮。要调用此方法，我们必须传递一个将用作按钮文本的String ，以及一个在点击按钮时调用的侦听器。

new AlertDialog.Builder(this)
    // other setter methods 
    .setNeutralButton("Neutral", null)
    .show()

请注意，触摸对话框外会自动将其关闭。为了避免这种情况的发生，您将必须在AlertDialog实例上调用setCanceledOnTouchOutside()并传递false作为参数。

AlertDialog dialog = new AlertDialog.Builder(this)
               // after calling setter methods
               .create();
dialog.setCanceledOnTouchOutside(false);
dialog.show();

为了进一步防止通过按BACK按钮来关闭对话框，您必须在AlertDialog实例上调用setCancelable()并将false传递给它作为参数。

设置警报对话框的样式

设置对话框样式非常容易。我们只是在样式中创建自定义样式。 xml资源。请注意，此样式父对象是Theme.AppCompat.Light.Dialog.Alert 。换句话说，此样式从其父项继承了一些样式属性。

<style name="CustomDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <!--buttons color-->
    <item name="colorAccent">@android:color/holo_orange_dark</item>
    <!--title and message color-->
    <item name="android:textColorPrimary">@android:color/white</item>
    <!--dialog background-->
    <item name="android:windowBackground">@drawable/background_dialog</item>
</style>

我们开始通过设置要应用于对话框的属性的值来自定义对话框样式-例如，我们可以将对话框按钮的颜色更改为@android: color /holo_orange_dark ，还可以在我们的对话框中将对话框背景设置为自定义可绘制对象可绘制资源文件夹（ android:windowBackground设置为@drawable/background_dialog ）。

这是我的background_dialog。 xml资源文件。

<?xml version="1.0" encoding="utf-8"?>
<!-- From: support/v7/appcompat/res/drawable/abc_dialog_material_background_light.xml -->
<inset xmlns:android="https://schemas.android.com/apk/res/android"
       android:insetLeft="16dp"
       android:insetTop="16dp"
       android:insetRight="16dp"
       android:insetBottom="16dp">

    <shape android:shape="rectangle">
        <corners android:radius="10dp" />
        <solid android:color="@android:color/holo_green_dark" />
        <stroke android:width="5dp" android:color="@android:color/black" />
    </shape>
</inset>

在这里，我们创建了一个自定义InsetDrawable ，它允许我们在ShapeDrawable任何一侧添加插图。我们使用<shape>标签创建了一个矩形形状。我们将<shape>标签的android:shape属性设置为rectangle （其他可能的值是line ， oval ， ring ）。我们有一个子标签<corners> ，它设置矩形角的半径。对于纯色填充，我们在<solid>标签中添加了android:color属性，该属性指示要使用的颜色。最后，我们通过使用<shape>上的<shape> <stroke>标记为可绘制的对象添加边框。

要将这种样式应用于对话框，我们只需将自定义样式传递给AlertDialog.Builder构造函数中的第二个参数。

AlertDialog dialog = new AlertDialog.Builder(this, R.style.CustomDialogTheme)

2.确认对话框

根据材料设计文件：

确认对话框要求用户在提交选项之前明确确认其选择。例如，用户可以收听多个铃声，但只有在触摸“确定”后才能做出最终选择。

可以使用以下不同类型的确认对话框：

多选对话框
单选对话框
日期选择器
时间选择器

多项选择对话框

当我们希望用户在对话框中选择一个以上的项目时，我们会使用多选对话框。在多选对话框中，显示一个选择列表供用户选择。

String[] multiChoiceItems = getResources().getStringArray(R.array.dialog_multi_choice_array);
final boolean[] checkedItems = {false, false, false, false};
new AlertDialog.Builder(this)
        .setTitle("Select your favourite movies")
        .setMultiChoiceItems(multiChoiceItems, checkedItems, new DialogInterface.OnMultiChoiceClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int index, boolean isChecked) {
                Log.d("MainActivity", "clicked item index is " + index);
            }
        })
        .setPositiveButton("Ok", null)
        .setNegativeButton("Cancel", null)
        .show();

要创建多选对话框，我们只需在AlertDialog.Builder实例上调用setMultiChoiceItems() setter方法。在此方法内部，我们传递一个String类型的Array作为第一个参数。这是我的数组，位于数组资源文件/values/arrays.xml中 。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="dialog_multi_choice_array">
        <item>The Dark Knight</item>
        <item>The Shawshank Redemption</item>
        <item>Saving Private Ryan</item>
        <item>The Silence of the Lambs</item>
    </string-array>
</resources>

setMultiChoiceItems()方法的第二个参数接受一个数组，其中包含要检查的项目。在每个元素的值checkedItems阵列对应于在每个值multiChoiceItems阵列。我们使用了checkedItems数组（默认情况下其值均为false ）使所有项在默认情况下未选中。换句话说，因为“ checkedItems数组中的第一个元素为false ，所以未选中第一项"Dark Knight" 。如果checkedItems数组中的第一个元素为true，则将检查"Dark Knight" 。

请注意，当我们选择或单击显示的任何项目时，此数组checkedItems都会更新-例如，如果用户应选择"The Shawshank Redemption" ，则调用checkedItems[1]将返回true 。

最后一个参数接受OnMultiChoiceClickListener的实例。在这里，我们仅创建一个匿名类并覆盖onClick() 。我们在第一个参数中获得所示对话框的实例。在第二个参数中，我们获得所选项目的索引。最后，在最后一个参数中，我们查找是否已选中所选项目。

单选对话框

在单选对话框中，与多选对话框不同，只能选择一项。

String[] singleChoiceItems = getResources().getStringArray(R.array.dialog_single_choice_array);
int itemSelected = 0;
new AlertDialog.Builder(this)
        .setTitle("Select your gender")
        .setSingleChoiceItems(singleChoiceItems, itemSelected, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int selectedIndex) {

            }
        })
        .setPositiveButton("Ok", null)
        .setNegativeButton("Cancel", null)
        .show();

要创建一个单选对话框，我们只需在AlertDialog.Builder实例上调用setSingleChoiceItems() setter。在此方法内部，我们还传递了一个String类型的Array作为第一个参数。这是我们传递的数组，它位于数组资源文件： /values/arrays.xml中 。

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <! -- ... -->
   <string-array name="dialog_single_choice_array">
        <item>Male</item>
        <item>Female</item>
        <item>Others</item>
    </string-array>
</resources>

setSingleChoiceItems()的第二个参数用于确定检查哪个项目。 onClick()的最后一个参数为我们提供了所选项目的索引-例如，选择Female项目， selectedIndex的值将为1 。

日期选择器对话框

这是一个对话框选择器，用于选择单个日期。

首先，我们将在MainActivity创建一个Calendar字段实例并对其进行初始化。

public class MainActivity extends AppCompatActivity {
    Calendar mCalendar = Calendar.getInstance();
// ...

在这里，我们调用Calendar.getInstance()来获取当前时间（在默认时区中）并将其设置为mCalendar字段。

DatePickerDialog datePickerDialog = new DatePickerDialog(this, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        mCalendar.set(Calendar.YEAR, year);
        mCalendar.set(Calendar.MONTH, monthOfYear);
        mCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);
        String date = DateFormat.getDateInstance(DateFormat.MEDIUM).format(calendar.getTime());
        Log.d("MainActivity", "Selected date is " + date);
    }
}, mCalendar.get(Calendar.YEAR), mCalendar.get(Calendar.MONTH), mCalendar.get(Calendar.DAY_OF_MONTH));
datePickerDialog.show();

为了显示日期选择器对话框，我们创建了DatePickerDialog的实例。这是创建此类实例时对参数定义的说明。

第一个参数接受父上下文-例如，在Activity使用this上下文，而在Fragment ，调用getActivity() 。
第二个参数接受OnDateSetListener类型的侦听OnDateSetListener 。用户设置日期时，将调用此侦听器onDateSet() 。在此方法内，我们得到选定的年份，年份的选定月份以及月份的选定日期。
第三个参数是最初选择的年份。
第四个参数是初始选择的月份（ 0 - 11 ）。
最后一个参数是月份（的初始选择的天1 - 31 ）。

最后，我们调用DatePickerDialog实例的show()方法将其显示在当前屏幕上。

设置自定义主题

定制日期选择器对话框的主题非常容易（类似于我们对警报对话框所做的操作）。

简要地说，您将创建一个自定义可绘制对象，创建一个自定义样式或主题，然后在第二个参数中创建DatePickerDialog实例时应用该主题。

DatePickerDialog datePickerDialog = 
  new DatePickerDialog(this, R.style.MyCustomDialogTheme, listener, 2017, 26, 11);

时间选择器对话框

时间选择器对话框允许用户选择时间，并调整为用户的首选时间设置，即12小时或24小时格式。

如下面的代码所示，创建TimePickerDialog与创建DatePickerDialog非常相似。在创建TimePickerDialog的实例时，我们传入以下参数：

第一个参数接受父上下文。
第二个参数接受用作侦听器的OnTimeSetListener实例。
第三个参数是一天中的第一个小时。
第四个参数是初始分钟。
最后一个参数是设置是否要以24小时或AM / PM格式显示视图。

TimePickerDialog timePickerDialog = 
new TimePickerDialog(this, new TimePickerDialog.OnTimeSetListener() {
    @Override
    public void onTimeSet(TimePicker timePicker, int hourOfDay, int minute) {
        mCalendar.set(Calendar.HOUR_OF_DAY, hourOfDay);
        mCalendar.set(Calendar.MINUTE, minute);
        String time = DateFormat.getTimeInstance(DateFormat.SHORT).format(calendar.getTime());
        Log.d("MainActivity", "Selected time is " + time);
    }
}, mCalendar.get(Calendar.HOUR_OF_DAY), calendar.get(Calendar.MINUTE), true);
timePickerDialog.show();

每次用户选择时间时都会调用onTimeSet()方法。在此方法内部，我们获得TimePicker的实例，选定的一天中的选定小时以及选定的分钟。

要显示此对话框，我们仍然调用show()方法。

可以使用与日期选择器对话框类似的方式设置时间选择器的样式。

3.底部对话框

根据Google的官方材料设计文档：

底页从屏幕底部向上滑动以显示更多内容。

要开始使用底部工作表对话框，您必须导入设计支持工件，因此请访问应用程序模块的build.gradle文件以将其导入。

dependencies {
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:design:26.1.0'
}

确保将弹出底部工作表对话框的活动或片段-其父布局为CoordinatorLayout 。

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    <!-- ... -->

    <!--bottom sheet container-->
    <FrameLayout
            android:id="@+id/framelayout_bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/bottom_sheet_behavior" />
</android.support.design.widget.CoordinatorLayout>

在这里，我们还有一个FrameLayout可以用作底页的容器。请注意，此FrameLayout的属性之一是app:layout_behavior ，其值是一个特殊的字符串资源，该资源映射到android.support.design.widget.BottomSheetBehavior 。这将使我们的FrameLayout能够显示为底部。请注意，如果您不包括此属性，则您的应用将崩溃。

public class MainActivity extends AppCompatActivity {// ... 
   
    // ... 
    private BottomSheetDialog mBottomSheetDialog;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // ... 
        View bottomSheet = findViewById(R.id.framelayout_bottom_sheet);
    }
}

在这里，我们将BottomSheetDialog实例声明为MainActivity.java的字段，并在我们活动的onCreate()方法中对其进行了初始化。

final View bottomSheetLayout = getLayoutInflater().inflate(R.layout.bottom_sheet_dialog, null);
(bottomSheetLayout.findViewById(R.id.button_close)).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        mBottomSheetDialog.dismiss();
    }
});
(bottomSheetLayout.findViewById(R.id.button_ok)).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), "Ok button clicked", Toast.LENGTH_SHORT).show();
    }
});

mBottomSheetDialog = new BottomSheetDialog(this);
mBottomSheetDialog.setContentView(bottomSheetLayout);
mBottomSheetDialog.show();

在前面的代码中，我们扩大了底部工作表布局R.layout.bottom_sheet_dialog 。我们在bottom_sheet_dialog中为“ 取消”和“ 确定”按钮设置了侦听器。 xml 。单击“ 取消”按钮后，我们只需关闭对话框即可。

然后，我们初始化mBottomSheetDialog字段，并使用setContentView()设置视图。最后，我们调用show()方法将其显示在屏幕上。

这是我的bottom_sheet_dialog。 xml ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_gravity="bottom"
              android:orientation="vertical"
              android:padding="15dp">

    <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp"
            android:text="Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

    <TextView
            android:id="@+id/tv_detail"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="5dp"
            android:text="@string/lorem_ipsum"
            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:gravity="right"
            android:orientation="horizontal">

        <Button
                android:id="@+id/button_close"
                style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="CLOSE" />

        <Button
                android:id="@+id/button_ok"
                style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="OK" />
    </LinearLayout>
</LinearLayout>

4.全屏对话框

根据Google的官方材料设计文档：

全屏对话框将一系列任务（例如创建日历项）分组，然后将其提交或丢弃。除非触摸“保存”，否则不会保存任何选择。触摸“ X”将放弃所有更改并退出对话框。

现在让我们看看如何创建一个全屏对话框。首先，请确保在应用程序的模块build.gradle包含Android支持v4工件。这是支持Android 4.0（API级别14）及更高版本所必需的。

implementation 'com.android.support:support-v4:26.1.0'

接下来，我们将创建一个FullscreenDialogFragment ，它扩展了DialogFragment超类。

public class FullscreenDialogFragment extends DialogFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.full_screen_dialog, container, false);
       (rootView.findViewById(R.id.button_close)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dismiss();
            }
        });
        return rootView;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = super.onCreateDialog(savedInstanceState);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        return dialog;
    }
}

在这里，我们重写onCreateView() （就像处理普通Fragment ）。在此方法内部，我们只需膨胀并返回将用作对话框的自定义视图的布局（ R.layout.full_screen_dialog ）。我们在ImageButton （ R.id.button_close ）上设置一个OnClickListener ，单击该对话框将关闭该对话框。

我们还重写onCreateDialog()并返回Dialog 。在此方法内，您还可以返回使用AlertDialog创建的AlertDialog.Builder 。

我们的R.layout.full_screen_dialog由一个ImageButton ，一个Button和一些TextView标签组成：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@android:color/white"
              android:fitsSystemWindows="true"
              android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal">

            <ImageButton
                    android:id="@+id/button_close"
                    android:layout_width="?attr/actionBarSize"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:tint="@android:color/white"
                    app:srcCompat="@drawable/ic_close" />

            <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center_vertical"
                    android:text="Dialog title"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"
                    android:textColor="@android:color/white" />

            <Button
                    android:id="@+id/button_action"
                    style="@style/Widget.AppCompat.Button.Borderless"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingLeft="2dp"
                    android:paddingRight="2dp"
                    android:text="Action"
                    android:textColor="@android:color/white" />

        </LinearLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none"
            android:scrollingCache="true">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:text="Full Screen Dialog"/>

    </android.support.v4.widget.NestedScrollView>

</LinearLayout>

在ImageButton小部件中，您将看到一个属性app:srcCompat ，该属性引用了一个自定义VectorDrawable （ @drawable/ic_close ）。此自定义VectorDrawable创建X按钮，点击该按钮将关闭全屏对话框。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>

为了使用此app:srcCompat属性，请确保将其包括在build.gradle文件中。接下来，配置您的应用程序以使用矢量支持库，并将vectorDrawables元素添加到app模块中的build.gradle文件中。

android {
    defaultConfig {
       vectorDrawables.useSupportLibrary = true
    }

我们这样做是为了能够支持所有Android平台版本回到Android 2.1（API级别7+）。

最后，为了显示FullscreenDialogFragment ，我们只需要使用FragmentTransaction将片段添加到UI。

FragmentManager fragmentManager = getSupportFragmentManager();
FullscreenDialogFragment newFragment = new FullscreenDialogFragment();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
transaction.add(android.R.id.content, newFragment).addToBackStack(null).commit();

5.适应设备方向

请注意，当用户更改Android设备的屏幕方向（从纵向到横向（反之亦然））时，此处讨论的所有对话框（全屏对话框除外）都将自动关闭。这是因为Android系统已销毁并重新创建了Activity以适应新的方向。

为了在整个屏幕方向变化中维持对话框，我们必须创建一个Fragment来扩展DialogFragment超类（就像我们在全屏对话框示例中所做的那样）。

让我们看一个简单的警报对话框示例。

public class AlertDialogFragment extends DialogFragment implements DialogInterface.OnClickListener {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        return (builder.setTitle("Activate superpowers?").setMessage("By activating superpowers, you'll have more powers to save the world.")
                       .setPositiveButton("Activate", this)
                       .setNegativeButton("Cancel", this)
                       .create());
    }

    @Override
    public void onCancel(DialogInterface dialog) {
        super.onCancel(dialog);
    }

    @Override
    public void onDismiss(DialogInterface dialog) {
        super.onDismiss(dialog);
    }

    @Override
    public void onClick(DialogInterface dialog, int which) {
        Toast.makeText(getActivity(), "which is " + which, Toast.LENGTH_LONG).show();
    }
}

在这里，我们创建了一个扩展DialogFragment的类，并且还实现了DialogInterface.OnClickListener 。因为我们实现了此侦听器，所以我们必须重写onClick()方法。请注意，如果我们点击肯定或否定按钮，则会调用此onClick()方法。

在我们的onCreateDialog()内部，我们创建并返回AlertDialog的实例。

我们还覆盖了：

onCancel() ：如果用户按下BACK按钮退出对话框，则调用此方法。
onDismiss() ：每当出于任何原因（后退或单击按钮）而将对话框强制退出时，都会调用此方法。

要显示此对话框，我们只需在AlertDialogFragment的实例上调用show()方法。

new AlertDialogFragment().show(getSupportFragmentManager(), "alertdialog_sample");

第一个参数是FragmentManager的实例。第二个参数是一个标记，以后可通过findFragmentByTag()从FragmentManager再次检索该片段。

现在，如果将设备方向从纵向更改为横向（反之亦然），则不会关闭警报对话框。

您可以对其他对话框类型执行类似的步骤，以在设备旋转期间维护对话框。您只需创建一个扩展DialogFragment超类的Fragment ，然后在onCreateDialog()创建并返回特定对话框。

进度对话框（不建议使用）

你们中有些人可能听说过ProgressDialog 。这只是显示一个带有进度指示器的对话框。我之所以未在其中添加它，是因为ProgressDialog已在API级别26中弃用，因为它可能给您的用户带来不良的用户体验。根据官方文件：

ProgressDialog是一个模式对话框，可防止用户与应用程序进行交互。而不是使用此类，您应该使用进度指示器（例如ProgressBar ，可以将其嵌入到应用程序的UI中。或者，您可以使用通知来通知用户任务的进度。

结论

在本教程中，您学习了在Android应用程序中显示物料设计对话框的不同方法。我们介绍了以下材料设计对话框类型：

您还学习了如何为对话框创建自定义样式，以及如何使用DialogFragment使对话框在横向和纵向之间的方向配置更改中DialogFragment 。

强烈建议您查看对话框的官方材料设计指南，以了解如何在Android中正确设计和使用对话框。

翻译自: https://code.tutsplus.com/tutorials/showing-material-design-dialogs-in-an-android-app--cms-30013

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫