自定义背景的日历控件使用

485 阅读1分钟

#自定义日历控件的使用

一.DatePicker日期选择类的使用 DatePicker常用xml属性:

XML属性描述
android:calendarViewShown设置该日期选择是否显示CalendarView组件。
android:endYear设置日期选择器允许选择的最后一年
android:maxDate设置该日期选择器的最大日期。以mm/dd/yyyy格式指定最大日期
android:minDate设置该日期选择器的最小日期。以mm/dd/yyyy格式指定最小日期。
android:spinnersShown设置该日期选择器是否显示Spinner日期选择组件。
android:startYear设置日期选择器允许选择的第一年。

自定义布局文件xml展示: item_data_picker

<?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:background="@mipmap/dialog_bg"
    android:orientation="vertical"
    android:padding="@dimen/dp_20">

    <TextView
        android:layout_width="220dp"
        android:layout_height="45dp"
        android:layout_gravity="center_horizontal"
        android:background="@mipmap/icon_dialog_title_bg"
        android:gravity="center"
        android:padding="10dp"
        android:text="选择日期"
        android:textColor="@color/white"
        android:textSize="@dimen/sp_18"
        android:textStyle="bold" />

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@null"
        android:calendarTextColor="@color/white"
        android:calendarViewShown="false"
        android:datePickerMode="spinner"
        android:theme="@style/MyDatePicker"
        android:yearListSelectorColor="@color/white" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_20"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_data_cancel"
            android:layout_width="60dp"
            android:layout_height="35dp"
            android:layout_marginEnd="@dimen/dp_10"
            android:layout_weight="1"
            android:background="@mipmap/icon_dialog_bt_bg"
            android:gravity="center"
            android:text="取消"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_16" />

        <TextView
            android:id="@+id/tv_data_sure"
            android:layout_width="60dp"
            android:layout_height="35dp"
            android:layout_marginStart="@dimen/dp_10"
            android:layout_weight="1"
            android:background="@mipmap/icon_dialog_bt_bg"
            android:gravity="center"
            android:text="确定"
            android:textColor="@color/white"
            android:textSize="@dimen/sp_16" />

    </androidx.appcompat.widget.LinearLayoutCompat>


</LinearLayout>

这里关键代码是设置DataPicker主题颜色为白色: 在style中自定义:

<style name="MyDatePicker" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:textColorPrimary">@color/white</item>
    </style>

然后通过:

 android:theme="@style/MyDatePicker"

引入

对应图片: 在这里插入图片描述 接下来是通过AlertDialog对其进行加载:

AlertDialog.Builder builder = new AlertDialog.Builder(context);
        final View view = LayoutInflater.from(context).inflate(R.layout.item_data_picker, null);
        final DatePicker datePicker = view.findViewById(R.id.date_picker);
        final TextView textView = view.findViewById(R.id.tv_data_sure);
        final TextView mTvCancel = view.findViewById(R.id.tv_data_cancel);
        datePicker.setMaxDate(new Date().getTime());//设置日期的上限日期
        datePicker.setMinDate(lastMonth.getTime());//设置日期的下限日期
        builder.setView(view);
        AlertDialog alertDialog = builder.create();
        alertDialog.show();
        mTvCancel.setOnClickListener(v -> alertDialog.cancel());
        textView.setOnClickListener(v -> {
        	//数据回调:显示在自己想要的位置
            mTvTime.setText(datePicker.getYear() + "-" + (datePicker.getMonth() + 1) + "-" + datePicker.getDayOfMonth());
            alertDialog.cancel();
        });
        //设置日历间隔线的颜色
        DataPickerDivderUtils.setDataPickerDivderColor(datePicker, context.getResources().getColor(R.color.color00FFFF));
        //设置dialog的背景色为透明 ,dialog有个初始背景,view是叠加在上面的,如果不这样加载,则无法正常显示
        Objects.requireNonNull(alertDialog.getWindow()).setBackgroundDrawableResource(android.R.color.transparent);

上述代码主要是加载自定义的view,到这儿差不多就已经实现了自己想要的背景样式 下面是设置dataPicker 间隔线颜色辅助类 DataPickerDivderUtils

package com.tofly.gygps.uitils;

import android.content.res.Resources;
import android.graphics.drawable.ColorDrawable;
import android.widget.DatePicker;
import android.widget.LinearLayout;
import android.widget.NumberPicker;

import java.lang.reflect.Field;

//设置dataPicker 间隔线颜色辅助类
public class DataPickerDivderUtils {

    public static void setDataPickerDivderColor(DatePicker datePicker,int color){
        // Divider changing:

        // 获取 mSpinners
        LinearLayout llFirst = (LinearLayout) datePicker.getChildAt(0);
        // 获取 NumberPicker
        LinearLayout mSpinners = (LinearLayout) llFirst.getChildAt(0);
        for (int i = 0; i < mSpinners.getChildCount(); i++) {
            NumberPicker picker = (NumberPicker) mSpinners.getChildAt(i);
            Field[] pickerFields = NumberPicker.class.getDeclaredFields();
            for (Field pf : pickerFields) {
                if (pf.getName().equals("mSelectionDivider")) {
                    pf.setAccessible(true);
                    try {
                        pf.set(picker, new ColorDrawable(color));//设置分割线颜色
                    } catch (IllegalArgumentException | Resources.NotFoundException | IllegalAccessException e) {
                        e.printStackTrace();
                    }
                    break;
                }
            }
        }
    }
}

日历弹窗工具类完整代码如下:

package com.tofly.gygps.uitils;

import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.DatePicker;
import android.widget.TextView;

import com.tofly.gygps.R;

import java.util.Calendar;
import java.util.Date;
import java.util.Objects;

/**
 * @ClassName:      DataPickerUtils
 * @Description:    日历弹窗工具类
 * @Author:         Rivan
 * @CreateDate:     2020/9/14 0:20
 * @UpdateDate:     2020/9/14 0:20
 */
public class DataPickerUtils {

    @SuppressLint("SetTextI18n")
    public static void createDataPicker(Context context, TextView mTvTime){
        Calendar ca = Calendar.getInstance();
        //得到一个Calendar的实例
        ca.setTime(new Date());
        // 设置最小时间为当前年份-1
        ca.add(Calendar.YEAR, -1);
        // 年份减1
        Date lastMonth = ca.getTime(); //结果
        AlertDialog.Builder builder = new AlertDialog.Builder(context);
        final View view = LayoutInflater.from(context).inflate(R.layout.item_data_picker, null);
        final DatePicker datePicker = view.findViewById(R.id.date_picker);
        final TextView textView = view.findViewById(R.id.tv_data_sure);
        final TextView mTvCancel = view.findViewById(R.id.tv_data_cancel);
        datePicker.setMaxDate(new Date().getTime());//设置日期的上限日期为当前日期
        datePicker.setMinDate(lastMonth.getTime());//设置日期的下限日期
        builder.setView(view);
        AlertDialog alertDialog = builder.create();
        alertDialog.show();
        mTvCancel.setOnClickListener(v -> alertDialog.cancel());
        textView.setOnClickListener(v -> {
            mTvTime.setText(datePicker.getYear() + "-" + (datePicker.getMonth() + 1) + "-" + datePicker.getDayOfMonth());
            alertDialog.cancel();
        });
        DataPickerDivderUtils.setDataPickerDivderColor(datePicker, context.getResources().getColor(R.color.color00FFFF));
        Objects.requireNonNull(alertDialog.getWindow()).setBackgroundDrawableResource(android.R.color.transparent);
    }
}

最终实现效果: 在这里插入图片描述