Android項目總結（二）仿IOS效果的日期選擇器和省市縣三級聯動

時間  2019-11-24
標籤 android 項目 總結 ios 效果 日期 選擇器 市縣 三級 聯動 欄目 Android 简体版
原文   原文鏈接

離第一篇項目總結《Android 項目總結(1)- 之弧形ViewPager 和弧形HeaderView》過了一週多的時間了，趁今天週末有時間爲你們帶來第二篇：項目中用到的選擇器。java

1、需求

在咱們的開發過程當中，可能會遇到這樣的需求：給定用戶幾個選項或者讓用戶從某個範圍內選擇須要的值，而不須要用戶本身去手動輸入。典型的場景如：電商APP的收貨地址，用戶選擇省市縣。填寫生日的時候，用戶選擇年月日，或者其餘一些數值得選擇等等。正好最近項目中有相似的功能，所以在此總結記錄總結一下。git

項目中用到的幾個場景：github

1，年月日的選擇ide

2，省市區三級聯動佈局

3，時間選擇ui

4，數值選擇this

2、選擇器PickerView

若是你須要一個時間選擇器或者省市縣三級聯動的控件，隨便一google ，出來一大把，可是正真能用好用的很少，今天就爲你們推薦一個所用到的開源控件Android-PikerView, 它基本上能知足你項目中全部的選擇：年月日時間選擇、二級聯動、三級聯動、在給定列表中選擇等。google

Github 地址：github.com/Bigkoo/Andr…spa

有以下功能：code

  • 支持三級聯動
  • 設置是否聯動
  • 設置循環模式
  • 支持自定義佈局。
  • 支持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();複製代碼

3、項目實踐

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();複製代碼

效果以下：

year_select
year_select

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();
    }複製代碼

效果以下：

province_select3
province_select3

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();

    }複製代碼

效果以下：

time_select
time_select

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;
    }複製代碼

效果以下：

value_select
value_select

3、總結

以上就是項目中用到的幾種場景，固然了，功能還不止於此，還有一些二級聯動和自定義樣式的功能沒有演示，須要的同窗能夠去Github 主頁看相關介紹，或者去Demo裏面查看各類選擇器的用法。總的來講是一個很不錯的開源項目，接近6k star。有須要的同窗快去試一下吧！

更多幹貨文章，關注公衆號：

Android技術雜貨鋪.jpg
Android技術雜貨鋪.jpg
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程