Androidプロジェクトまとめ(二)IOS効果を模した日付セレクタと省・市・県の三級連動

13666 ワード

最初のプロジェクトのまとめ「Androidプロジェクトのまとめ(1)-の弧形ViewPagerと弧形HeaderView」から1週間余りが経ち、今日の週末に時間があれば、プロジェクトで使われているセレクタをお届けします.
一、需要
デルの開発では、ユーザーが手動で入力する必要がなく、ユーザーにいくつかのオプションを指定したり、ユーザーが必要な値を範囲から選択したりする必要があります.典型的なシーンは、電子商取引アプリの出荷先住所、ユーザーが省市県を選択することです.誕生日を記入するとき、ユーザーは年月日を選択したり、他の数を選択したりする価値があります.ちょうど最近のプロジェクトで似たような機能があるので、ここでまとめてみます.
の各見出しページがあります.
1,年月日の選択
2、省市区三級連動
3、時間選択
4、数値選択
二、セレクタPickerView
もしあなたが1つの時間セレクタあるいは省市県の3級連動のコントロールが必要ならば、勝手にgoogleを出して、たくさん出てきて、しかし本当に使いやすいのは多くなくて、今日みんなのために1つの使ったオープンソースのコントロールAndroid-PikerViewを推薦して、それは基本的にあなたのプロジェクトの中のすべての選択を満たすことができます:年月日の時間の選択、2級連動、3級連動、与えられたリストの中で選択など.
Githubアドレス:github.com/Bigkoo/Andr…
次の機能があります.
  • は三級連動
  • をサポートする.
  • 連動するか否かを設定
  • .
  • 循環モード
  • を設定する.
  • はカスタムレイアウトをサポートします.
  • はitemの区切り線設定をサポートします.
  • はitemピッチ設定をサポートします.
  • タイムセレクタは、開始日と終了日の設定をサポートします.
  • では、「年、月、日、時、分、秒」、「省、市、区」などのオプションの単位(label)の表示、非表示、カスタマイズがサポートされています.
  • は、カスタム文字、色、文字サイズなどの属性
  • をサポートする.
  • Itemの文字長が長すぎると、文字はItemの長さに適応して縮小する、不完全な問題が表示されないようにする
  • .
  • はDialogモードをサポートします.
  • はカスタム設定コンテナをサポートします.

  • PickerViewには2つのセレクタがあります.
  • 時間と日付を選択するセレクタ: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();

    効果は次のとおりです: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
    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
    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
    三、まとめ
    以上がプロジェクトで使われているいくつかのシーンです.もちろん、機能はそれだけではありません.また、2級連動やカスタムスタイルの機能がプレゼンテーションされていません.必要な学生はGithubのホームページに行って紹介を見たり、Demoに行ってセレクタの使い方を見たりすることができます.総じて6 k starに近いオープンソースプロジェクトです.必要な学生がいたら、早くやってみましょう.
    より多くの乾物の文章は、公衆番号に注目しています.
    Androidテクノロジー雑貨店jpg