Android时间滚轮（一）_android 原生滚轮

Android开发中有很多地方都会使用到日期滚轮控件，本篇文章主要讲述如何采用Android原生的日期时间控件来自定义自己所需要的控件。

一、DatePicker和TimePicker的介绍

原生控件在Android5.0之后又提出了一种时钟的显示方式，但是我个人觉得这种效果不太好看，如果有兴趣的话可以自己去实验一下。

二、自定义日期时间控件

控件效果图如下所示：

上图中的效果是DatePicker和TimePicker相结合实现的。控件布局的具体代码如下所示：

<?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="#fff"
              android:gravity="center_horizontal"
              android:orientation="vertical"
              android:paddingTop="10dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:padding="10px"
            android:text="取消"
            android:textColor="#000"
            android:textSize="18sp"
            />

        <TextView
            android:id="@+id/tv_ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:padding="10px"
            android:text="确定"
            android:textColor="#000"
            android:textSize="18sp"
            />
    </RelativeLayout>

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

        <DatePicker
            android:id="@+id/dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:calendarViewShown="false"
            android:datePickerMode="spinner"
            />

        <TimePicker
            android:id="@+id/tp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:timePickerMode="spinner"
            />

    </LinearLayout>
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

具体控件的java代码如下所示：

package com.study.datepickerdialogdemo;

import android.app.Dialog;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.ColorDrawable;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.NumberPicker;
import android.widget.TextView;
import android.widget.TimePicker;

import java.lang.reflect.Field;


/**
 * Created by Administrator on 2017/10/18.
 */

public class DateTimePickerDialog implements View.OnClickListener {
    private final Context context;
    private Dialog dialog;
    private TimePicker tp;
    private DatePicker dp;
    private OnSelectedListener listener;

    public DateTimePickerDialog(Context context, int style) {
        this.context = context;
        initDialog(context, style);
    }

    private void initDialog(Context context, int style) {
        dialog = new Dialog(context, style);
        dialog.setContentView(R.layout.time_layout);

        TextView tvOk = (TextView) dialog.findViewById(R.id.tv_ok);
        TextView tvCancel = (TextView) dialog.findViewById(R.id.tv_cancel);
        tvCancel.setOnClickListener(this);
        tvOk.setOnClickListener(this);

        tp = (TimePicker) dialog.findViewById(R.id.tp);
        dp = (DatePicker) dialog.findViewById(R.id.dp);
        tp.setIs24HourView(true);
        set_time_picker_text_colour(tp, 60, false);
        set_date_picker_text_colour(dp, 60, true);

        //从屏幕底部弹出对话框
        Window window = dialog.getWindow();
        window.setGravity(Gravity.BOTTOM);
        WindowManager.LayoutParams lp = window.getAttributes();
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        lp.width = metrics.widthPixels;
        window.setAttributes(lp);

    }

    public void show() {
        if (dialog != null) {
            dialog.show();
        }
    }

    public void dismiss() {
        if (dialog != null) {
            dialog.dismiss();
        }
    }


    @Override
    public void onClick(View v) {
        if (listener == null) {
            return;
        }
        switch (v.getId()) {
            case R.id.tv_ok:
                listener.ok(this, formatUtils(dp.getYear()), formatUtils(dp.getMonth() + 1), formatUtils(dp.getDayOfMonth()),
                        formatUtils(tp.getCurrentHour()), formatUtils(tp.getCurrentMinute()));
                break;
            case R.id.tv_cancel:
                listener.cancel(this);
                break;
        }
    }

    /**
     * 根据id获取DatePicker的NumberPicker控件
     * @param time_picker TimePicker控件
     * @param dpVal  DatePicker控件中NumberPicker的宽度
     * @param isDate 是否是日期控件，false代表不是
     */
    private void set_date_picker_text_colour(DatePicker time_picker, int dpVal, boolean isDate) {
        Resources system = Resources.getSystem();
        int hour_numberpicker_id = system.getIdentifier("year", "id", "android");
        int minute_numberpicker_id = system.getIdentifier("month", "id", "android");
        int ampm_numberpicker_id = system.getIdentifier("day", "id", "android");

        NumberPicker hour_numberpicker = (NumberPicker) time_picker.findViewById(hour_numberpicker_id);
        NumberPicker minute_numberpicker = (NumberPicker) time_picker.findViewById(minute_numberpicker_id);
        NumberPicker ampm_numberpicker = (NumberPicker) time_picker.findViewById(ampm_numberpicker_id);

        set_numberpicker_text_colour(hour_numberpicker, dpVal, isDate);
        set_numberpicker_text_colour(minute_numberpicker, dpVal, isDate);
        set_numberpicker_text_colour(ampm_numberpicker, dpVal, isDate);
    }
    /**
     * 根据id获取TimePicker的NumberPicker控件
     * @param time_picker TimePicker控件
     * @param dpVal  TimePicker控件中NumberPicker的宽度
     * @param isDate 是否是日期控件，false代表不是
     */
    private void set_time_picker_text_colour(TimePicker time_picker, int dpVal, boolean isDate) {
        Resources system = Resources.getSystem();
        int hour_numberpicker_id = system.getIdentifier("hour", "id", "android");
        int minute_numberpicker_id = system.getIdentifier("minute", "id", "android");
        int ampm_numberpicker_id = system.getIdentifier("amPm", "id", "android");
        //获取hour和minute中间分隔符的id值
        int divider = system.getIdentifier("divider", "id", "android");

        NumberPicker hour_numberpicker = (NumberPicker) time_picker.findViewById(hour_numberpicker_id);
        NumberPicker minute_numberpicker = (NumberPicker) time_picker.findViewById(minute_numberpicker_id);
        NumberPicker ampm_numberpicker = (NumberPicker) time_picker.findViewById(ampm_numberpicker_id);
        TextView divider_tv = (TextView) time_picker.findViewById(divider);
        //设置分隔符的颜色，因为在有些样式中分隔符的颜色为白色，肉眼将会看不到
        divider_tv.setTextColor(Color.BLACK);

        set_numberpicker_text_colour(hour_numberpicker, dpVal, isDate);
        set_numberpicker_text_colour(minute_numberpicker, dpVal, isDate);
        set_numberpicker_text_colour(ampm_numberpicker, dpVal, isDate);
    }

    private void set_numberpicker_text_colour(NumberPicker number_picker, int dpVal, boolean isDate) {
        //获取NumberPicker的子view数目
        final int count = number_picker.getChildCount();
        //这里就是要设置的颜色，修改一下作为参数传入会更好
        final int color = context.getResources().getColor(android.R.color.black);

        for (int i = 0; i < count; i++) {
            View child = number_picker.getChildAt(i);

            try {
                Field wheelpaint_field = number_picker.getClass().getDeclaredField("mSelectorWheelPaint");
                Field divider = number_picker.getClass().getDeclaredField("mSelectionDivider");

                wheelpaint_field.setAccessible(true);
                divider.setAccessible(true);
                //设置分割线颜色
                divider.set(number_picker, new ColorDrawable(Color.parseColor("#76CEED")));
               //设置文字的颜色
                ((Paint) wheelpaint_field.get(number_picker)).setColor(color); //
                if (child instanceof EditText) {
                    //设置选中文本的颜色
                    ((EditText) child).setTextColor(color);
                }
                //控件重绘
                number_picker.invalidate();
                if (isDate) {
                    setPickerSize(number_picker, dpVal, 0, 0, 30, 0);
                } else {
                    setPickerSize(number_picker, dpVal, 0, 0, 0, 0);
                }
            } catch (NoSuchFieldException e) {
                Log.w("setColor", e);
            } catch (IllegalAccessException e) {
                Log.w("setColor", e);
            } catch (IllegalArgumentException e) {
                Log.w("setColor", e);
            }
        }
    }


    /**
     *    这个方法是改变NumberPicker大小的方法，传入的参数为要修改的NumberPicker和NumberPicker的宽度值
     */
    private void setPickerSize(NumberPicker np, int widthDpValue, int left, int top, int right, int bottom) {
        int widthPxValue = dp2px(context, widthDpValue);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthPxValue, LinearLayout.LayoutParams.WRAP_CONTENT);
        //这儿参数可根据需要进行更改
        params.setMargins(left, top, right, bottom);
        np.setLayoutParams(params);
    }

    /**
     * 此方法将dp值转换为px值，以保证适配不同分辨率机型
     * @param context
     * @param dpVal
     * @return
     */
    public static int dp2px(Context context, float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
    }

    /**
     * 将长度为一的字符串转化为长度为二的字符串
     * @param count
     * @return
     */
    public String formatUtils(int count) {
        String str = count + "";
        if (str.length() == 1) {
            str = "0" + str;
        }
        return str;
    }


    public void setOnSelectedListener(OnSelectedListener listener) {
        this.listener = listener;
    }

    /**
     * 选中的监听
     */
    public interface OnSelectedListener {
        void ok(DateTimePickerDialog dialog, String year, String month, String day, String hour, String minute);

        void cancel(DateTimePickerDialog dialog);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

三、对于AlertDialog中的样式研究

Android中AlertDialog在创建时有一个构造函数可以传入样式参数，在本Demo中几乎尝试了到目前为止Android中所有关于Dialog的样式。由于比较简单我就不在一一赘述了，有兴趣的可以下载源码去看一下。

源码地址：
https://github.com/Duckdan/DatePickerDialogDemo