EditText 與日期校驗

作者：李旺成

時間：2016年5月13日

這個 Hack 將介紹關于表單校驗中的一個小技巧。

表單檢驗

大部分開發(fā)者應該都遇到過“表單校驗”的問題，該問題令人厭煩也容易出錯。

假設，有這樣一個需求，需要使用大量的日期輸入框。具體的要求是這樣的，點擊輸入框之后，彈出一個日期選擇器（DatePickerDialog），將選中的日期填充到輸入框中。具體效果，如下動態(tài)圖所示：

表單校驗

使用 EditText 的弊端

示意圖中的第一個輸入框是一個 EditText，要實現上面的需求很簡單。為 EditText 設置點擊監(jiān)聽，點擊輸入框的時候就彈出 DatePickerDialog，用戶對 DatePickerDialog 的操作，最終會通過回調反應到 EditText 中。（具體代碼，見示例項目吧！）

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

EditText “不安全”

EditText 是一個可以輸入的控件，當用戶通過 DatePickerDialog 選擇了日期之后，用戶仍然可以通過光標獲取 EditText 的焦點。這樣便可以繞過 DatePicker 控件來直接修改 EditText 的文本內容。

正因為這一點，所以說 EditText “不安全”，它的內容可以編輯，破壞了設計者使用 DatePicker 來選擇日期的初衷。

不建議使用 TextWatcher

當然，可以通過給 EditText 設置 TextWatcher 來驗證 EditText 中的文本。但是，這種方法繁瑣、低效而且耗時。

那有什么建議呢？

使用 Button 或者 TextView

上面介紹了使用 EditText 來實現上述需求的“弊端”，那更好的實踐就是去除這些“弊端”。

這里的思路是：使用一個外觀與 EditText 相同的 Button 或者 TextView，然后為該 Button 或 TextView 設置點擊監(jiān)聽，點擊時，彈出 DatePickerDialog 即可。

簡單實現

1、創(chuàng)建布局
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、日期變化監(jiān)聽

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