解决DatePickerDialog和TimePickerDialog控件取消按钮问题

一. 问题提出

在Android程序中，我们通常需要使用DatePicker来设置日期，TimePicker来设置时间。其基本步骤是：
1.先定义DatePicker和TimePicker布局
2.然后通过Calendar类获得系统时间
3.接着通过init方法将日期传递给DatePicker初始化日期控件
4.在响应点击事件中可以通过DatePicker的getYear()、getDayOfMonth()、getMonth()函数获取具体日期
同时可以在OnDateChangedListener事件中监听日期变化，设置时间函数方法同理。但是使用DatePickerDialog或TimePickerDialog控件时会遇到的一个问题，它就是android版本4.0后没有取消(Cancel)按钮，同时点击界面任何部分都能获取日期或时间，据说它是版本存在的BUG。对比图如下所示：
 
但是我们期待的效果如下图所示：
 我采取的解决方法是通过自定义XML布局，经过DatePicker和TimePicker控件实现，同时在AlertDialog中设置取消按钮和确定按钮，通过函数setNegativeButton()和setPositiveButton()实现。

二. 简单实现日期和时间控件

简单实现方法非常简单，不需要设置日期或时间的XML布局，直接通过new DatePickerDialog或TimePickerDialog即可实现。代码如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//点击日期按钮布局 设置日期

layoutDate.setOnClickListener(newOnClickListener() {

    @Override

    publicvoid onClick(View v) {

        newDatePickerDialog(MainActivity.this,newDatePickerDialog.OnDateSetListener() {

            @Override

            publicvoid onDateSet(DatePicker view, intyear, intmonth, intday) {

                // TODO Auto-generated method stub

                mYear = year;

                mMonth = month;

                mDay = day;

                //更新EditText控件日期 小于10加0

                dateEdit.setText(newStringBuilder().append(mYear).append(-)

                    .append((mMonth + 1) < 10? 0+ (mMonth + 1) : (mMonth + 1))

                    .append(-)

                    .append((mDay < 10) ? 0+ mDay : mDay) );

            }

        }, calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH),

        calendar.get(Calendar.DAY_OF_MONTH) ).show();

    }

});

其中mYear、mMonth、mDay是定义变量，同时dateEdit是一个EditText控件用于显示具体日期，当数字小于10时前补0，如2015-01-01。下面是设置时间，显示效果和第三部分的效果相同。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

//点击时间按钮布局 设置时间

layoutTime.setOnClickListener(newOnClickListener() {

    @Override

    publicvoid onClick(View v) {

        newTimePickerDialog(MainActivity.this,

            newTimePickerDialog.OnTimeSetListener() {

                @Override

                publicvoid onTimeSet(TimePicker view, inthour, intminute) {

                    // TODO Auto-generated method stub

                    mHour = hour;

                    mMinute = minute;

                    //更新EditText控件时间 小于10加0

                    timeEdit.setText(newStringBuilder()

                        .append(mHour < 10? 0+ mHour : mHour).append(:)

                        .append(mMinute < 10? 0+ mMinute : mMinute).append(:00) );

                }

            }, calendar.get(Calendar.HOUR_OF_DAY),

                calendar.get(Calendar.MINUTE),true).show();

    }

});

三. 自定义布局实现

下面是自定义布局实现，而且我自认为该界面布局非常好看，这也是我“随手拍”项目自己最后总结出来的一个比较欣赏的界面吧！希望你也喜欢，效果如下：
  
如图所示，界面中日期、时间EditText不可编辑，需要通过点击底部布局来设置。同时备注信息的EditText通过自定义背景实现，设置日期、时间中有取消按钮。
源代码： 1.项目结构如下图所示
 2.activity_main.xml布局文件

?

1

2

3

4

5

6

<!--?xml version=1.0encoding=UTF-8?-->

<relativelayout android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools">

     <relativelayout android:background="#eee8cc"android:gravity="center"android:id="@+id/Content_Layout"android:layout_above="@id/MyLayout_bottom"android:layout_below="@id/MyLayout_top"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="horizontal">

    </relativelayout>

     

</relativelayout>

3.date_dialog.xml文件：日期控件布局

?

1

2

3

4

5

6

7

8

9

<!--?xml version=1.0encoding=utf-8?-->

<linearlayout android:layout_height="match_parent"android:layout_width="match_parent"android:orientation="vertical"android:padding="10dip"xmlns:android="http://schemas.android.com/apk/res/android">

     

    <textview android:layout_height="wrap_content"android:layout_width="fill_parent"android:singleline="true"android:text="请选择日期"android:textcolor="#000000"android:textsize="16sp">

    

    <datepicker android:id="@+id/date_picker"android:layout_gravity="center"android:layout_height="wrap_content"android:layout_margintop="5dip"android:layout_width="wrap_content">

    </datepicker>

 

</textview></linearlayout>

4.time_dialog.xml文件：时间控件布局

?

1

2

3

4

5

6

7

8

9

<!--?xml version=1.0encoding=utf-8?-->

<linearlayout android:layout_height="match_parent"android:layout_width="match_parent"android:orientation="vertical"android:padding="10dip"xmlns:android="http://schemas.android.com/apk/res/android">

     

    <textview android:layout_height="wrap_content"android:layout_width="fill_parent"android:singleline="true"android:text="请选择日期"android:textcolor="#000000"android:textsize="16sp">

    

    <datepicker android:id="@+id/date_picker"android:layout_gravity="center"android:layout_height="wrap_content"android:layout_margintop="5dip"android:layout_width="wrap_content">

    </datepicker>

 

</textview></linearlayout>

5.drawable-hdpi中editview_shape.xml文件 实现自定义EditText控件格式

?

1

2

3

4

5

6

7

8

<!--?xml version=1.0encoding=utf-8?-->

<shape android:padding="10dp"android:shape="rectangle"xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 填充editView的颜色 -->

    <soild android:color="#ffffff/">

    <!-- 设置圆角的弧度，radius半径越大，editView的边角越圆 -->

    <corners android:bottomleftradius="15dp"android:bottomrightradius="15dp"android:radius="15dp"android:topleftradius="15dp"android:toprightradius="15dp/">

    <stroke android:color="#32CD32"android:width="4px">

</stroke></corners></soild></shape>

6.MainActivity.java源码

?

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

publicclass MainActivity extendsActivity {

 

    //自定义变量

    privateEditText titleEdit;

    privateEditText dateEdit;

    privateEditText timeEdit;

    privateEditText contentEdit;

    //底部四个布局按钮

    privateLinearLayout layoutDate;            

    privateLinearLayout layoutTime;         

    privateLinearLayout layoutCancel;             

    privateLinearLayout layoutSave;

    //定义显示时间控件

    privateCalendar calendar; //通过Calendar获取系统时间

    privateint mYear;

    privateint mMonth;

    privateint mDay;

    privateint mHour;

    privateint mMinute;

     

    @Override

    protectedvoid onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        //锁定屏幕

        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

        setContentView(R.layout.activity_main);

        //获取对象

        titleEdit = (EditText) findViewById(R.id.showtitle);

        dateEdit = (EditText) findViewById(R.id.showdate);

        timeEdit = (EditText) findViewById(R.id.showtime);

        contentEdit = (EditText) findViewById(R.id.editText1);

        layoutDate = (LinearLayout) findViewById(R.id.layout_date);

        layoutTime = (LinearLayout) findViewById(R.id.layout_time);

        layoutCancel = (LinearLayout) findViewById(R.id.layout_cancel);

        layoutSave = (LinearLayout) findViewById(R.id.layout_save);

         

        calendar = Calendar.getInstance();

         

        //点击日期按钮布局 设置日期

        layoutDate.setOnClickListener(newOnClickListener() {

            @Override

            publicvoid onClick(View v) {

                 

                //通过自定义控件AlertDialog实现

                AlertDialog.Builder builder = newAlertDialog.Builder(MainActivity.this);

                View view = (LinearLayout) getLayoutInflater().inflate(R.layout.date_dialog, null);

                finalDatePicker datePicker = (DatePicker) view.findViewById(R.id.date_picker);

                //设置日期简略显示 否则详细显示 包括:星期周

                datePicker.setCalendarViewShown(false);

                //初始化当前日期

                calendar.setTimeInMillis(System.currentTimeMillis());

                datePicker.init(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH),

                        calendar.get(Calendar.DAY_OF_MONTH),null);

                //设置date布局

                builder.setView(view);

                builder.setTitle(设置日期信息);

                builder.setPositiveButton(确  定, newDialogInterface.OnClickListener() {

                        @Override

                        publicvoid onClick(DialogInterface dialog, intwhich) {

                            //日期格式

                            StringBuffer sb = newStringBuffer();

                            sb.append(String.format(%d-%02d-%02d, 

                                    datePicker.getYear(), 

                                    datePicker.getMonth() + 1,

                                    datePicker.getDayOfMonth()));

                            dateEdit.setText(sb);

                            //赋值后面闹钟使用

                            mYear = datePicker.getYear();

                            mMonth = datePicker.getMonth();

                            mDay = datePicker.getDayOfMonth();

                            dialog.cancel();

                        }

                });

                builder.setNegativeButton(取  消, newDialogInterface.OnClickListener() {

                    @Override

                    publicvoid onClick(DialogInterface dialog, intwhich) {

                        dialog.cancel();

                    }

                });

                builder.create().show();

            }

        });

        layoutDate.setOnTouchListener(newOnTouchListener() { //设置布局背景

            @Override

            publicboolean onTouch(View v, MotionEvent event) {              

                if(event.getAction() == MotionEvent.ACTION_DOWN)  {

                    layoutDate.setBackgroundColor(Color.WHITE);

                    layoutTime.setBackgroundColor(Color.TRANSPARENT);

                    layoutCancel.setBackgroundColor(Color.TRANSPARENT);

                    layoutSave.setBackgroundColor(Color.TRANSPARENT);

                }

                returnfalse;

            }

        });

         

        //点击时间按钮布局 设置时间

        layoutTime.setOnClickListener(newOnClickListener() {

            @Override

            publicvoid onClick(View v) {

                //自定义控件

                AlertDialog.Builder builder = newAlertDialog.Builder(MainActivity.this);

                View view = (LinearLayout) getLayoutInflater().inflate(R.layout.time_dialog, null);

                finalTimePicker timePicker = (TimePicker) view.findViewById(R.id.time_picker);

                //初始化时间

                calendar.setTimeInMillis(System.currentTimeMillis());

                timePicker.setIs24HourView(true);

                timePicker.setCurrentHour(calendar.get(Calendar.HOUR_OF_DAY));

                timePicker.setCurrentMinute(Calendar.MINUTE);

                //设置time布局

                builder.setView(view);

                builder.setTitle(设置时间信息);

                builder.setPositiveButton(确  定, newDialogInterface.OnClickListener() {

                        @Override

                        publicvoid onClick(DialogInterface dialog, intwhich) {

                            mHour = timePicker.getCurrentHour();

                            mMinute = timePicker.getCurrentMinute();

                            //时间小于10的数字 前面补0 如01:12:00

                            timeEdit.setText(newStringBuilder().append(mHour < 10? 0+ mHour : mHour).append(:)

                    .append(mMinute < 10? 0+ mMinute : mMinute).append(:00) );

                            dialog.cancel();

                        }

                });

                builder.setNegativeButton(取  消, newDialogInterface.OnClickListener() {

                    @Override

                    publicvoid onClick(DialogInterface dialog, intwhich) {

                        dialog.cancel();

                    }

                });

                builder.create().show();

            }

        });

        layoutTime.setOnTouchListener(newOnTouchListener() { //设置布局背景

            @Override

            publicboolean onTouch(View v, MotionEvent event) {              

                if(event.getAction() == MotionEvent.ACTION_DOWN)  {

                    layoutDate.setBackgroundColor(Color.TRANSPARENT);

                    layoutTime.setBackgroundColor(Color.WHITE);

                    layoutCancel.setBackgroundColor(Color.TRANSPARENT);

                    layoutSave.setBackgroundColor(Color.TRANSPARENT);

                }

                returnfalse;

            }

        });

         

        //点击取消按钮

        layoutCancel.setOnClickListener(newOnClickListener() {

            @Override

            publicvoid onClick(View v) {

                dateEdit.setText();

                dateEdit.setHint(2015-01-01);

                timeEdit.setText();

                timeEdit.setHint(00:00:00);

                contentEdit.setText();

                contentEdit.setHint(记录旅途中的备注信息...);

            }

        });

        layoutCancel.setOnTouchListener(newOnTouchListener() { //设置布局背景

            @Override

            publicboolean onTouch(View v, MotionEvent event) {              

                if(event.getAction() == MotionEvent.ACTION_DOWN)  {

                    layoutDate.setBackgroundColor(Color.TRANSPARENT);

                    layoutTime.setBackgroundColor(Color.TRANSPARENT);

                    layoutCancel.setBackgroundColor(Color.WHITE);

                    layoutSave.setBackgroundColor(Color.TRANSPARENT);

                }

                returnfalse;

            }

        });

         

        //点击保存按钮

        layoutSave.setOnClickListener(newOnClickListener() {

            @Override

            publicvoid onClick(View v) {

                 

                //确认保存按钮

                newAlertDialog.Builder(MainActivity.this).setTitle(确认保存吗？)

                .setIcon(android.R.drawable.ic_dialog_info)

                .setPositiveButton(确  定, newDialogInterface.OnClickListener() {

                    @Override

                    publicvoid onClick(DialogInterface dialog, intwhich) {

                         

                        /**

                         * 数据库插入操作

                         */

                         

                    }

                 

                })

                .setNegativeButton(返  回, newDialogInterface.OnClickListener() {

                    @Override

                    publicvoid onClick(DialogInterface dialog, intwhich) {

                         

                    }

                }).show();

            }

        });

        layoutSave.setOnTouchListener(newOnTouchListener() { //设置布局背景

            @Override

            publicboolean onTouch(View v, MotionEvent event) {              

                if(event.getAction() == MotionEvent.ACTION_DOWN)  {

                    layoutDate.setBackgroundColor(Color.TRANSPARENT);

                    layoutTime.setBackgroundColor(Color.TRANSPARENT);

                    layoutCancel.setBackgroundColor(Color.TRANSPARENT);

                    layoutSave.setBackgroundColor(Color.WHITE);

                }

                returnfalse;

            }

        });

         

    }// End onCreate

         

}

最后希望文章对大家有所帮助！如果你知道我这篇文章想要阐述的内容是什么？为什么要写这篇文章？或许它会对你有所帮助，一方面是布局可能对你有启发；另一方面就是刚好遇到那个问题的同学。
在点击“保存”按钮时，也可把数据存储至数据库中调用MySQLiteOpenHelper，这里就不再介绍。写着写着就到了凌晨5点了，程序猿生活还是要改下啊~自己保重自己的身体吧！期待改正自己的作息，难难难~