解决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( new OnClickListener() {      @Override      public void onClick(View v) {          new DatePickerDialog(MainActivity. this , new DatePickerDialog.OnDateSetListener() {              @Override              public void onDateSet(DatePicker view, int year, int month, int day) {                  // TODO Auto-generated method stub                  mYear = year;                  mMonth = month;                  mDay = day;                  //更新EditText控件日期 小于10加0                  dateEdit.setText( new StringBuilder().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( new OnClickListener() {      @Override      public void onClick(View v) {          new TimePickerDialog(MainActivity. this ,              new TimePickerDialog.OnTimeSetListener() {                  @Override                  public void onTimeSet(TimePicker view, int hour, int minute) {                      // TODO Auto-generated method stub                      mHour = hour;                      mMinute = minute;                      //更新EditText控件时间 小于10加0                      timeEdit.setText( new StringBuilder()                          .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.0 encoding=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.0 encoding=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.0 encoding=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.0 encoding=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

public class MainActivity extends Activity {        //自定义变量      private EditText titleEdit;      private EditText dateEdit;      private EditText timeEdit;      private EditText contentEdit;      //底部四个布局按钮      private LinearLayout layoutDate;                  private LinearLayout layoutTime;               private LinearLayout layoutCancel;                   private LinearLayout layoutSave;      //定义显示时间控件      private Calendar calendar; //通过Calendar获取系统时间      private int mYear;      private int mMonth;      private int mDay;      private int mHour;      private int mMinute;            @Override      protected void 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( new OnClickListener() {              @Override              public void onClick(View v) {                                    //通过自定义控件AlertDialog实现                  AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity. this );                  View view = (LinearLayout) getLayoutInflater().inflate(R.layout.date_dialog, null );                  final DatePicker 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(确  定, new DialogInterface.OnClickListener() {                          @Override                          public void onClick(DialogInterface dialog, int which) {                              //日期格式                              StringBuffer sb = new StringBuffer();                              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(取  消, new DialogInterface.OnClickListener() {                      @Override                      public void onClick(DialogInterface dialog, int which) {                          dialog.cancel();                      }                  });                  builder.create().show();              }          });          layoutDate.setOnTouchListener( new OnTouchListener() { //设置布局背景              @Override              public boolean 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);                  }                  return false ;              }          });                    //点击时间按钮布局 设置时间          layoutTime.setOnClickListener( new OnClickListener() {              @Override              public void onClick(View v) {                  //自定义控件                  AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity. this );                  View view = (LinearLayout) getLayoutInflater().inflate(R.layout.time_dialog, null );                  final TimePicker 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(确  定, new DialogInterface.OnClickListener() {                          @Override                          public void onClick(DialogInterface dialog, int which) {                              mHour = timePicker.getCurrentHour();                              mMinute = timePicker.getCurrentMinute();                              //时间小于10的数字 前面补0 如01:12:00                              timeEdit.setText( new StringBuilder().append(mHour < 10 ? 0 + mHour : mHour).append(:)                      .append(mMinute < 10 ? 0 + mMinute : mMinute).append(: 00 ) );                              dialog.cancel();                          }                  });                  builder.setNegativeButton(取  消, new DialogInterface.OnClickListener() {                      @Override                      public void onClick(DialogInterface dialog, int which) {                          dialog.cancel();                      }                  });                  builder.create().show();              }          });          layoutTime.setOnTouchListener( new OnTouchListener() { //设置布局背景              @Override              public boolean 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);                  }                  return false ;              }          });                    //点击取消按钮          layoutCancel.setOnClickListener( new OnClickListener() {              @Override              public void onClick(View v) {                  dateEdit.setText();                  dateEdit.setHint( 2015 - 01 - 01 );                  timeEdit.setText();                  timeEdit.setHint( 00 : 00 : 00 );                  contentEdit.setText();                  contentEdit.setHint(记录旅途中的备注信息...);              }          });          layoutCancel.setOnTouchListener( new OnTouchListener() { //设置布局背景              @Override              public boolean 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);                  }                  return false ;              }          });                    //点击保存按钮          layoutSave.setOnClickListener( new OnClickListener() {              @Override              public void onClick(View v) {                                    //确认保存按钮                  new AlertDialog.Builder(MainActivity. this ).setTitle(确认保存吗？)                  .setIcon(android.R.drawable.ic_dialog_info)                  .setPositiveButton(确  定, new DialogInterface.OnClickListener() {                      @Override                      public void onClick(DialogInterface dialog, int which) {                                                    /**                           * 数据库插入操作                           */                                                }                                    })                  .setNegativeButton(返  回, new DialogInterface.OnClickListener() {                      @Override                      public void onClick(DialogInterface dialog, int which) {                                                }                  }).show();              }          });          layoutSave.setOnTouchListener( new OnTouchListener() { //设置布局背景              @Override              public boolean 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);                  }                  return false ;              }          });                } // End onCreate           }

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