The date selection dialog box of the system sometimes cannot meet our needs, especially when we need to modify the text, but it is too troublesome to customize one. Of course, we can choose a third-party date picker, but we need to introduce three-party dependencies. If we simply change the UI style and change the text content, there is no need to introduce three parties. Here I provide a way to customize the date selection dialog box.
First of all, it is still the old rules, we prepare some resources.
1. First, our colors, add the following colors in colors.xml
<color name="black">#000000</color>
<color name="white">#ffffff</color>
<color name="transparent">#00000000</color>
<color name="blue">#0099ff</color>Of course, we can define this according to our own needs when the time comes.
2. Next is our style, add the following code in styles.xml
<style name="CustomDateDialog" parent="@android:style/Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>3. Then is our bullet box layout, here I named it date_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="match_parent"
android:background="@color/transparent"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="40dp"
android:paddingRight="40dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/white" >
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="60dp"
android:paddingLeft="10dp"
android:gravity="left|center"
android:text="请选择日期"
android:textColor="@color/blue"
android:textSize="22sp" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@color/blue" />
<DatePicker
android:id="@+id/dp_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:calendarViewShown="false"
android:gravity="center"
android:spinnersShown="true"
android:datePickerMode="spinner" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/blue" />
<Button
android:id="@+id/btn_ok"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@null"
android:gravity="center"
android:text="确定"
android:textColor="@color/black"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
The DatePicker has two choices: spinner and calendar. If it is the spinner, it is the effect of sliding the wheel, if it is the calendar, it is the effect of the calendar.
4. Next is our custom bullet frame
import android.app.Dialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.DatePicker;
import android.widget.TextView;
public class CustomDateDialog implements View.OnClickListener {
private Dialog dialog; // 声明一个对话框对象
private View view; // 声明一个视图对象
private TextView tv_title;
private DatePicker dp_date; // 声明一个日期选择器对象
public CustomDateDialog(Context context) {
// 根据布局文件dialog_date.xml生成视图对象
view = LayoutInflater.from(context).inflate(R.layout.date_dialog, null);
// 创建一个指定风格的对话框对象
dialog = new Dialog(context, R.style.CustomDateDialog);
tv_title = view.findViewById(R.id.tv_title);
// 从布局文件中获取名叫dp_date的日期选择器
dp_date = view.findViewById(R.id.dp_date);
view.findViewById(R.id.btn_ok).setOnClickListener(this);
}
// 设置日期对话框的标题文本
public void setTitle(String title) {
tv_title.setText(title);
}
// 设置日期对话框内部的年、月、日，以及日期变更监听器
public void setDate(int year, int month, int day, OnDateSetListener listener) {
dp_date.init(year, month, day, null);
mDateSetListener = listener;
}
// 显示对话框
public void show() {
// 设置对话框窗口的内容视图
dialog.getWindow().setContentView(view);
// 设置对话框窗口的布局参数
dialog.getWindow().setLayout(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
dialog.show(); // 显示对话框
}
// 关闭对话框
public void dismiss() {
// 如果对话框显示出来了，就关闭它
if (dialog != null && dialog.isShowing()) {
dialog.dismiss();
}
}
// 判断对话框是否显示
public boolean isShowing() {
if (dialog != null) {
return dialog.isShowing();
} else {
return false;
}
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_ok) { // 点击了确定按钮
dismiss(); // 关闭对话框
if (mDateSetListener != null) { // 如果存在月份变更监听器
dp_date.clearFocus(); // 清除日期选择器的焦点
// 回调监听器的onDateSet方法
mDateSetListener.onDateSet(dp_date.getYear(),
dp_date.getMonth() + 1, dp_date.getDayOfMonth());
}
}
}
// 声明一个日期变更的监听器对象
private OnDateSetListener mDateSetListener;
// 定义一个日期变更的监听器接口
public interface OnDateSetListener {
void onDateSet(int year, int monthOfYear, int dayOfMonth);
}
}I also leave the imported packages to prevent you from introducing errors when importing packages.
5. Finally, add the following code to the page where we want to display the date selection
// 显示自定义的日期对话框
private void showDateDialog() {
Calendar calendar = Calendar.getInstance();
// 创建一个自定义的日期对话框实例
CustomDateDialog dialog = new CustomDateDialog(this);
// 设置日期对话框上面的年、月、日，并指定日期变更监听器
dialog.setDate(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH)
,calendar.get(Calendar.DAY_OF_MONTH), new DateListener());
dialog.show(); // 显示日期对话框
}
// 定义一个日期变更监听器，一旦点击对话框的确定按钮，就触发监听器的onDateSet方法
private class DateListener implements CustomDateDialog.OnDateSetListener {
@Override
public void onDateSet(int year, int month, int day) {
String desc = String.format("您选择的日期是%d年%d月%d日", year, month, day);
Toast.makeText(MainActivity.this,desc,Toast.LENGTH_SHORT).show();
}
}When we call the showDateDialog method, our date picker will be displayed. After the user selects and clicks OK, the onDateSet method in DateListener will be triggered. Here we mainly focus on the layout file in step 3. We can modify this file. If we just modify the layout, the theme elements have not changed. As long as it is ensured that the three id controls of tv_title (TextView), dp_date (DatePicker), and btn_ok (Button) exist normally, and the corresponding control types are the same. Other elements can be placed at will. If you need to make more modifications, you need to modify the CustomDateDialog in step 4.