EditText 与日期校验

作者：李旺成

时间：2016年5月13日

---

这个 Hack 将介绍关于表单校验中的一个小技巧。

表单检验

大部分开发者应该都遇到过“表单校验”的问题，该问题令人厌烦也容易出错。

假设，有这样一个需求，需要使用大量的日期输入框。具体的要求是这样的，点击输入框之后，弹出一个日期选择器（DatePickerDialog），将选中的日期填充到输入框中。具体效果，如下动态图所示：

表单校验

使用 EditText 的弊端

示意图中的第一个输入框是一个 EditText，要实现上面的需求很简单。为 EditText 设置点击监听，点击输入框的时候就弹出 DatePickerDialog，用户对 DatePickerDialog 的操作，最终会通过回调反应到 EditText 中。（具体代码，见示例项目吧！）

但是使用 EditText 是有弊端的，下面会分析这些弊端。

EditText “不安全”

EditText 是一个可以输入的控件，当用户通过 DatePickerDialog 选择了日期之后，用户仍然可以通过光标获取 EditText 的焦点。这样便可以绕过 DatePicker 控件来直接修改 EditText 的文本内容。

正因为这一点，所以说 EditText “不安全”，它的内容可以编辑，破坏了设计者使用 DatePicker 来选择日期的初衷。

不建议使用 TextWatcher

当然，可以通过给 EditText 设置 TextWatcher 来验证 EditText 中的文本。但是，这种方法繁琐、低效而且耗时。

那有什么建议呢？

使用 Button 或者 TextView

上面介绍了使用 EditText 来实现上述需求的“弊端”，那更好的实践就是去除这些“弊端”。

这里的思路是：使用一个外观与 EditText 相同的 Button 或者 TextView，然后为该 Button 或 TextView 设置点击监听，点击时，弹出 DatePickerDialog 即可。

简单实现

1、创建布局
activity_formdatevalidate.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    >
    
    ...
        
    <TextView
        android:id="@+id/tv_tip2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Button 显示日期"
        android:layout_below="@+id/et_date"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textAllCaps="false" />
    <Button
        android:id="@+id/btn_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_tip2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textAllCaps="false"
        android:onClick="onClick"
        android:background="@android:drawable/edit_text"/>
</RelativeLayout>

2、显示 DatePickerDialog

private void initData() {
    // get the current date
    final Calendar c = Calendar.getInstance();
    mYear = c.get(Calendar.YEAR);
    mMonth = c.get(Calendar.MONTH);
    mDay = c.get(Calendar.DAY_OF_MONTH);
}

new DatePickerDialog(this, mDateSetListener2, mYear,        mMonth, mDay).show();

3、日期变化监听

mDateSetListener2 = new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear,
                          int dayOfMonth) {
        String dateStr = getString(R.string.picked_date_format, monthOfYear,
                dayOfMonth, year);
        Toast.makeText(
                FormDateValidateActivity.this,
                dateStr, Toast.LENGTH_SHORT).show();
        mDateBtn.setText(dateStr);
    }
};

小结

这个 Hack 仅仅是希望起到抛砖引玉的作用，希望大家以后遇到类似的问题可稍微用点技巧，这样可能会省时省力很多。

项目地址

AndroidHacks合集
控件使用篇

项目示例代码：
FormDateValidateActivity.java
activity_formdatevalidate.xml