如何使用 Material Design 风格下的 DatePickerDialog 控件

前言

Material Design 是 Google 提出的一种全新的设计语言，它的特点是简洁、直观、有层次感，使用 Material Design 风格可以使应用程序更加美观，易用。在 Material Design 风格中，DatePickerDialog 控件可以让用户方便地选择日期，本文将介绍如何使用 Material Design 风格下的 DatePickerDialog 控件。

步骤

第一步：添加依赖库

在 Android 项目的 build.gradle 文件中添加如下依赖：

implementation 'com.google.android.material:material:1.2.1'

第二步：布局文件中添加控件

在布局文件中添加如下代码：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/date_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="选择日期">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/date_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:focusable="false"
        android:inputType="none" />

</com.google.android.material.textfield.TextInputLayout>

以上代码中，我们使用了 TextInputLayout 和 TextInputEditText 控件，TextInputLayout 是一个容器控件，它可以将提示文字和 EditText 控件一起放在一起，形成一个更加美观的控件。同时，我们使用了 EditText 控件的属性使其不能被焦点所选中。

第三步：Java 代码中设置日期选择器

在 Java 代码中添加以下代码：

TextInputLayout dateContainer = findViewById(R.id.date_container);
TextInputEditText dateInput = findViewById(R.id.date_input);

dateInput.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View view, boolean hasFocus) {
        if (hasFocus) {
            // 获取当前日期
            Calendar calendar = Calendar.getInstance();
            int year = calendar.get(Calendar.YEAR);
            int month = calendar.get(Calendar.MONTH);
            int day = calendar.get(Calendar.DAY_OF_MONTH);

            // 创建日期选择器
            DatePickerDialog datePickerDialog = new DatePickerDialog(MainActivity.this,
                    new DatePickerDialog.OnDateSetListener() {
                        @Override
                        public void onDateSet(DatePicker datePicker, int year, int month, int dayOfMonth) {
                            dateInput.setText(String.format(Locale.getDefault(), "%d年%d月%d日", year, month + 1, dayOfMonth));
                        }
                    },
                    year, month, day);

            // 显示日期选择器
            datePickerDialog.show();
        }
    }
});

以上代码中，我们在 EditText 控件的 OnFocusChangeListener() 方法中添加了一个日期选择器。在日期选择器中，我们可以使用 Calendar、DatePickerDialog 类和 OnDateSetListener 接口来设置和获取日期。在日期选择完成后，我们将其显示在 EditText 中。

总结

通过本文，您已经学会了如何使用 Material Design 风格下的 DatePickerDialog 控件。您可以在自己的应用程序中使用相同的方式，为用户提供简便的日期选择功能。同时，您也可以自己修改控件的样式和逻辑，以满足您的项目需求。

示例代码

完整的示例代码如下所示：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextInputLayout dateContainer = findViewById(R.id.date_container);
        TextInputEditText dateInput = findViewById(R.id.date_input);

        dateInput.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean hasFocus) {
                if (hasFocus) {
                    // 获取当前日期
                    Calendar calendar = Calendar.getInstance();
                    int year = calendar.get(Calendar.YEAR);
                    int month = calendar.get(Calendar.MONTH);
                    int day = calendar.get(Calendar.DAY_OF_MONTH);

                    // 创建日期选择器
                    DatePickerDialog datePickerDialog = new DatePickerDialog(MainActivity.this,
                            new DatePickerDialog.OnDateSetListener() {
                                @Override
                                public void onDateSet(DatePicker datePicker, int year, int month, int dayOfMonth) {
                                    dateInput.setText(String.format(Locale.getDefault(), "%d年%d月%d日", year, month + 1, dayOfMonth));
                                }
                            },
                            year, month, day);

                    // 显示日期选择器
                    datePickerDialog.show();
                }
            }
        });

    }
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aa649cadd4f0e0ff400dd4