離第一篇專案總結《Android 專案總結(1)- 之弧形ViewPager 和弧形HeaderView》過了一週多的時間了，趁今天週末有時間為大家帶來第二篇：專案中用到的選擇器。
一、需求
在我們的開發過程中，可能會遇到這樣的需求：給定使用者幾個選項或者讓使用者從某個範圍內選擇需要的值，而不需要使用者自己去手動輸入。典型的場景如：電商APP的收貨地址，使用者選擇省市縣。填寫生日的時候，使用者選擇年月日，或者其他一些數值得選擇等等。正好最近專案中有類似的功能，因此在此總結記錄總結一下。
專案中用到的幾個場景：
1，年月日的選擇
2，省市區三級聯動
3，時間選擇
4，數值選擇
二、選擇器PickerView
如果你需要一個時間選擇器或者省市縣三級聯動的控制元件，隨便一google ，出來一大把，但是正真能用好用的不多，今天就為大家推薦一個所用到的開源控制元件Android-PikerView, 它基本上能滿足你專案中所有的選擇：年月日時間選擇、二級聯動、三級聯動、在給定列表中選擇等。
Github 地址：github.com/Bigkoo/Andr…
有如下功能：
- 支援三級聯動
- 設定是否聯動
- 設定迴圈模式
- 支援自定義佈局。
- 支援item的分隔線設定。
- 支援item間距設定。
- 時間選擇器支援起始和終止日期設定。
- 支援“年，月，日，時，分，秒”，“省，市，區”等選項的單位（label）顯示、隱藏和自定義。
- 支援自定義文字、顏色、文字大小等屬性
- Item的文字長度過長時，文字會自適應縮放到Item的長度，避免顯示不完全的問題
- 支援Dialog 模式。
- 支援自定義設定容器。
PickerView 中有兩種選擇器：
- 選擇時間和日期的選擇器：TimePickerView
- 選擇給定範圍或者給定選項的選擇器、二級和三級聯動的選擇器：OptionsPickerView
使用很簡單，採用構造器模式，可配置項很多，可以根據自己的需求來配置，如下：
pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
@Override
public void onTimeSelect(Date date,View v) {//選中事件回撥
tvTime.setText(getTime(date));
}
})
.setType(new boolean[]{true, true, true, true, true, true})// 預設全部顯示
.setCancelText("Cancel")//取消按鈕文字
.setSubmitText("Sure")//確認按鈕文字
.setContentSize(18)//滾輪文字大小
.setTitleSize(20)//標題文字大小
.setTitleText("Title")//標題文字
.setOutSideCancelable(false)//點選螢幕，點在控制元件外部範圍時，是否取消顯示
.isCyclic(true)//是否迴圈滾動
.setTitleColor(Color.BLACK)//標題文字顏色
.setSubmitColor(Color.BLUE)//確定按鈕文字顏色
.setCancelColor(Color.BLUE)//取消按鈕文字顏色
.setTitleBgColor(0xFF666666)//標題背景顏色 Night mode
.setBgColor(0xFF333333)//滾輪背景顏色 Night mode
.setDate(selectedDate)// 如果不設定的話，預設是系統時間*/
.setRangDate(startDate,endDate)//起始終止年月日設定
.setLabel("年","月","日","時","分","秒")//預設設定為年月日時分秒
.isCenterLabel(false) //是否只顯示中間選中項的label文字，false則每項item全部都帶有label。
.isDialog(true)//是否顯示為對話方塊樣式
.build();複製程式碼三、專案實踐
1，年月日的選擇
程式碼如下：
TimePickerView pvTime = new TimePickerView.Builder(this, new TimePickerView.OnTimeSelectListener() {
@Override
public void onTimeSelect(Date date, View v) {
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
mTextViewYear.setText(calendar.get(Calendar.YEAR) + "");
mTextViewMonth.setText(calendar.get(Calendar.MONTH) + 1 + "");// 月份比實際的月份少1個月
mTextViewDay.setText(calendar.get(Calendar.DAY_OF_MONTH) + "");
mBirthday = DateUtils.getDateString(date);
Log.e("TAG", "birth:" + mBirthday);
}
})
.isCenterLabel(false)
.setType(new boolean[]{true, true, true, false, false, false})
.setDate(selectedDate)
.setRangDate(startDate, endDate)
.setTitleText("出生")
.setBgColor(Color.parseColor("#F6F7F6"))
.setTitleSize(getResources().getColor(R.color.text_color_333))
.setSubmitColor(getResources().getColor(R.color.text_color_main))
.setCancelColor(getResources().getColor(R.color.text_color_999))
.build();
pvTime.show();複製程式碼效果如下：
TimePickerView可以選擇開始日期、結束日期和彈出來時候預設選擇的日期，很方便。
2 ，省市縣三級聯動
程式碼如下：
private void showPickerView() {// 彈出選擇器
OptionsPickerView pvOptions = new OptionsPickerView.Builder(this, new OptionsPickerView.OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int options2, int options3, View v) {
//返回的分別是三個級別的選中位置
mProvince = mProvinceBean.options1Items.get(options1).getPickerViewText();
mCity = mProvinceBean.options2Items.get(options1).get(options2);
mArea = mProvinceBean.options3Items.get(options1).get(options2).get(options3);
setProvinceText();
}
})
.setTitleText("城市選擇")
.setDividerColor(Color.GRAY)
.setTextColorCenter(Color.BLACK) //設定選中項文字顏色
.setContentTextSize(20)
.setBgColor(Color.parseColor("#F6F7F6"))
.setTitleSize(getResources().getColor(R.color.text_color_333))
.setSubmitColor(getResources().getColor(R.color.text_color_main))
.setCancelColor(getResources().getColor(R.color.text_color_999))
.build();
pvOptions.setPicker(mProvinceBean.options1Items, mProvinceBean.options2Items, mProvinceBean.options3Items);//三級選擇器
pvOptions.show();
}複製程式碼效果如下：
3，時間選擇
程式碼如下：
protected void showTimePicker(TimePickerView.OnTimeSelectListener listener) {
if (mTimePicker != null) {
mTimePicker.show();
return;
}
Calendar selectedDate = Calendar.getInstance();
Calendar startDate = Calendar.getInstance();
Calendar endDate = Calendar.getInstance();
//正確設定方式 原因：注意事項有說明
selectedDate.set(1990, 0, 1);
startDate.set(1949, 0, 1);
// 獲取當前的年、月、日
endDate.setTimeInMillis(System.currentTimeMillis());
mTimePicker = new TimePickerView.Builder(this, listener)
.isCenterLabel(false)
.setType(new boolean[]{false, false, false, true, true, false})
.setDate(selectedDate)
.setRangDate(startDate, endDate)
.setTitleText("測量時間")
.setBgColor(Color.parseColor("#F6F7F6"))
.setTitleSize(getResources().getColor(R.color.text_color_333))
.setSubmitColor(getResources().getColor(R.color.text_color_main))
.setCancelColor(getResources().getColor(R.color.text_color_999))
.build();
mTimePicker.show();
}複製程式碼效果如下：
4, 數值選擇
程式碼如下：
mOptionsPickerView = createHighBasePicker(title, new OptionsPickerView.OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int options2, int options3, View v) {
mBsValue = datas.get(options1).bs;
mItemBloodSugar.setContent(mBsValue + "");
mStatusView.setBSValue(mBsValue);
}
});
mOptionsPickerView.setPicker(datas);
mOptionsPickerView.show();
//createHighBasePicker 方法如下：
protected OptionsPickerView createHighBasePicker(String title, OptionsPickerView.OnOptionsSelectListener listener) {
OptionsPickerView picker = new OptionsPickerView.Builder(this, listener)
.setTitleText(title)
.setBgColor(Color.parseColor("#F6F7F6"))
.setTitleSize(getResources().getColor(R.color.text_color_333))
.setSubmitColor(getResources().getColor(R.color.text_color_main))
.setCancelColor(getResources().getColor(R.color.text_color_999))
.build();
return picker;
}複製程式碼效果如下：
三、總結
以上就是專案中用到的幾種場景，當然了，功能還不止於此，還有一些二級聯動和自定義樣式的功能沒有演示，需要的同學可以去Github 主頁看相關介紹，或者去Demo裡面檢視各種選擇器的用法。總的來說是一個很不錯的開源專案，接近6k star。有需要的同學快去試一下吧！
更多幹貨文章，關注公眾號：
