Android自定義View（RollWeekView－炫酷的星期日期選擇控件）

Android自定義View（RollWeekView－炫酷的星期日期選擇控件）一次展示一個(gè)星期的5天，中間放大的為當(dāng)前選中的；如果點(diǎn)擊了其中一個(gè)日期，比如星期五，那么整體向左滑動(dòng)，并將星期五慢慢放大，星期三慢慢縮小，星期六和星期天就展示出來(lái)了；如果繼續(xù)點(diǎn)擊星期六，那么照樣是整體向左滑動(dòng)一個(gè)單位，星期日右邊就需要塞進(jìn)一個(gè)星期一。就是一個(gè)無(wú)限循環(huán)的過(guò)程，中間選中的需要展示當(dāng)天的日期。1、分析??最開(kāi)始，我想到在LinearLayout中依次排開(kāi)7個(gè)子控件（星期幾），當(dāng)點(diǎn)擊之后，把所有的子控件通過(guò)動(dòng)畫(huà)移動(dòng)相應(yīng)的偏移量，但是，如果移動(dòng)后就會(huì)出現(xiàn)空位的情況（周一的左邊和周日的右邊沒(méi)有了），所以這種方式可是可以，但是要解決無(wú)限循環(huán)空位的情況。??于是就想到能不能多添加幾個(gè)子控件作為空位替補(bǔ)？這個(gè)方法肯定能實(shí)現(xiàn)，但是究竟需要多少個(gè)替補(bǔ)呢？這些替補(bǔ)應(yīng)該放在什么位置呢？??當(dāng)前展示的5個(gè)子控件中，如果點(diǎn)擊最左邊或者最右邊，這樣的偏移量是最大的，需要便宜兩個(gè)子控件單位，所以左邊和右邊最多個(gè)需要2個(gè)替補(bǔ)就行了，算起來(lái)也不多，一共才9個(gè)（當(dāng)前展示5個(gè)，左邊隱藏替補(bǔ)2個(gè)，右邊隱藏替補(bǔ)2個(gè)）。在點(diǎn)擊之前，先將替補(bǔ)位置設(shè)置好，當(dāng)點(diǎn)擊之后，所有子控件執(zhí)行偏移動(dòng)畫(huà)（不可能出現(xiàn)空位，最多偏移2位），動(dòng)畫(huà)結(jié)束之后，再重新為隱藏的4個(gè)替補(bǔ)分配位置并綁定數(shù)據(jù)，綁定什么數(shù)據(jù)那就看當(dāng)前中間顯示的是星期幾了。分析圖如下：但是新的問(wèn)題又來(lái)了，動(dòng)畫(huà)執(zhí)行完畢之后，怎么判斷哪些子控件是當(dāng)前正在顯示的呢（中間五個(gè)）？由于正在顯示的子控件的位置是可以確定的，因?yàn)橐貙?xiě)onMeasure()，在onMeasure()方法中可以得到單個(gè)子控件的寬度（item_width=getMeasureWidth()/5），動(dòng)畫(huà)結(jié)束之后，遍歷這些子控件，如果x==0的那肯定就是當(dāng)前正在展示的第一個(gè)子控件，x==item_width則是第二個(gè)….，剩余的4個(gè)就不用判斷了，直接將兩個(gè)移動(dòng)到左邊，兩個(gè)移動(dòng)到右邊，然后重新為這四個(gè)替補(bǔ)設(shè)置數(shù)據(jù)。2、定義控件布局組合控件的布局如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"android:gravity="center_vertical"><LinearLayoutandroid:id="@+id/ll_1"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_2"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_3"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_4"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_5"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_6"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_7"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_8"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/ll_9"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center"><LinearLayoutandroid:layout_width="@dimen/week_item_sise"android:layout_height="@dimen/week_item_sise"android:background="@drawable/week_one_bg"android:orientation="vertical"android:gravity="center"><TextViewandroid:id="@+id/tv_9"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/><TextViewandroid:id="@+id/tv_date9"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:text="周"/></LinearLayout></LinearLayout></LinearLayout>布局寫(xiě)完后，接下來(lái)應(yīng)該找一個(gè)容器接納他們，這個(gè)容器就是我們定義的CustomWeekView，讓其繼承LinearLayout，然后重寫(xiě)構(gòu)造方法，并初始化子控件；此處自定義屬性就不再贅述，之前的所有自定義控件案例中都講解過(guò)publicclassCustomWeekViewextendsLinearLayout{publicCustomWeekView(Contextcontext){this(context,null);}publicCustomWeekView(Contextcontext,AttributeSetattrs){this(context,attrs,0);}publicCustomWeekView(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);init(context,attrs);}privatevoidinit(Contextcontext,AttributeSetattrs){LayoutInflater.from(context).inflate(R.layout.custom_week_layout,this,true);ll_1=(LinearLayout)findViewById(R.id.ll_1);ll_2=(LinearLayout)findViewById(R.id.ll_2);...tv_1=(TextView)findViewById(R.id.tv_1);tv_2=(TextView)findViewById(R.id.tv_2);...tv_date1=(TextView)findViewById(R.id.tv_date1);tv_date2=(TextView)findViewById(R.id.tv_date2);...if(attrs!=null){TypedArrayta=context.obtainStyledAttributes(attrs,R.styleable.LimitScroller);limit=5;background=ta.getColor(R.styleable.LimitScroller_android_background,Color.TRANSPARENT);textSize=ta.getDimension(R.styleable.LimitScroller_android_textSize,15f);finalfloatfontScale=context.getResources().getDisplayMetrics().scaledDensity;textSize=textSize/fontScale+0.5f;dateTextSize=ta.getInteger(R.styleable.LimitScroller_dateTextSize,12);textColor=ta.getColor(R.styleable.LimitScroller_android_textColor,Color.BLACK);dateTextColor=ta.getColor(R.styleable.LimitScroller_dateTextColor,Color.RED);durationTime=ta.getInt(R.styleable.LimitScroller_durationTime,1000);scaleSize=ta.getFloat(R.styleable.LimitScroller_scaleSize,0);ta.recycle();//注意回收}}}4、重寫(xiě)onMeasure??由于本控件寬度是填充父窗體，高度是包裹內(nèi)容，這里不需要我們手動(dòng)寫(xiě)代碼測(cè)量，直接調(diào)用super.onMeasure()好了。。但是我們需要在測(cè)量完畢后，計(jì)算子控件的寬度并初次安置每個(gè)子控件的位置，這個(gè)寬度就是后面移動(dòng)的單位，也作為位置判斷的依據(jù)。由于onMeasure()方法會(huì)被調(diào)用多次（后面設(shè)置位置、顯示隱藏等等操作都會(huì)導(dǎo)致onMeasure()觸發(fā)），所以需要判斷一下如果ITEM_WIDTH<=0才需要計(jì)算；然后還要為子控件設(shè)置初始日期：@OverrideprotectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){super.onMeasure(widthMeasureSpec,heightMeasureSpec);//Log.w(TAG,"測(cè)量完成，寬度*高度="+getMeasuredWidth()+"*"+getMeasuredHeight());if(ITEM_WIDTH<=0){ITEM_WIDTH=getMeasuredWidth()/limit;//Log.w(TAG,"每小項(xiàng)尺寸："+ITEM_WIDTH+"*"+getMeasuredHeight());measureInit();}if(ll_2.getX()>0&&!isFirstSeted){//設(shè)置今天的日期在中間animalFinish=false;Calendarcal=Calendar.getInstance();inttodayNum=cal.get(Calendar.DAY_OF_WEEK)-1;Log.d(TAG,"今天是星期"+WEEK_STR[todayNum]);setCenter(getEnumByNum(todayNum));animalFinish=true;isFirstSeted=true;}}/**根據(jù)屏幕的寬度和顯示的個(gè)數(shù)，設(shè)置item的寬度*/privatevoidmeasureInit(){LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)ll_1.getLayoutParams();lp.width=ITEM_WIDTH;ll_1.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_2.getLayoutParams();lp.width=ITEM_WIDTH;ll_2.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_3.getLayoutParams();lp.width=ITEM_WIDTH;ll_3.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_4.getLayoutParams();lp.width=ITEM_WIDTH;ll_4.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_5.getLayoutParams();lp.width=ITEM_WIDTH;ll_5.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_6.getLayoutParams();lp.width=ITEM_WIDTH;ll_6.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_7.getLayoutParams();lp.width=ITEM_WIDTH;ll_7.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_8.getLayoutParams();lp.width=ITEM_WIDTH;ll_8.setLayoutParams(lp);lp=(LinearLayout.LayoutParams)ll_9.getLayoutParams();lp.width=ITEM_WIDTH;ll_9.setLayoutParams(lp);}5、點(diǎn)擊后執(zhí)行動(dòng)畫(huà)??上面的步驟完成之后，基本上已經(jīng)完成的控件的初始設(shè)置，接下來(lái)就是點(diǎn)擊子控件后執(zhí)行動(dòng)畫(huà)了。這里一共需要執(zhí)行兩套動(dòng)畫(huà)，一套是縮放動(dòng)畫(huà)、一套是移動(dòng)動(dòng)畫(huà)。添加點(diǎn)擊事件的代碼就不貼出來(lái)了，下面是執(zhí)行動(dòng)畫(huà)的方法：privatevoidstartAnimation(finalWEEKDAYcenterWitch,finalLinearLayoutllClickView){if(centerWitch==centerNow)return;animalFinish=false;LinearLayoutinnerLL=(LinearLayout)ll3.getChildAt(0);TextViewtvDate=(TextView)innerLL.getChildAt(1);tvDate.setVisibility(View.GONE);innerLL=(LinearLayout)llClickView.getChildAt(0);tvDate=(TextView)innerLL.getChildAt(1);tvDate.setVisibility(View.VISIBLE);//根據(jù)當(dāng)前中間位置顯示的和被點(diǎn)擊的日期，獲取需要偏移的增量intoffset=getXOffset(centerWitch);Log.d(TAG,"當(dāng)前中間為"+centerNow+"，點(diǎn)擊的是"+centerWitch+"偏移量："+offset);//當(dāng)前中間位置的需要縮放到原尺寸//Log.v(TAG,"中間item縮放量scaleX＝"+ll3.getChildAt(0).getScaleX()+"scaleY="+ll3.getChildAt(0).getScaleY());ObjectAnimatoranim100=ObjectAnimator.ofFloat(ll3.getChildAt(0),"scaleX",ll3.getChildAt(0).getScaleX(),1.0f);ObjectAnimatoranim101=ObjectAnimator.ofFloat(ll3.getChildAt(0),"scaleY",ll3.getChildAt(0).getScaleY(),1.0f);//被點(diǎn)擊的需要放大ObjectAnimatoranim102=ObjectAnimator.ofFloat(llClickView.getChildAt(0),"scaleX",1,scaleSize);ObjectAnimatoranim103=ObjectAnimator.ofFloat(llClickView.getChildAt(0),"scaleY",1,scaleSize);//透明度動(dòng)畫(huà)ObjectAnimatoranim104=ObjectAnimator.ofFloat(llClickView.getChildAt(0),"scaleY",1,scaleSize);//位移動(dòng)畫(huà)ObjectAnimatoranim1=ObjectAnimator.ofFloat(ll_1,"X",ll_1.getX(),ll_1.getX()+offset);ObjectAnimatoranim2=ObjectAnimator.ofFloat(ll_2,"X",ll_2.getX(),ll_2.getX()+offset);ObjectAnimatoranim3=ObjectAnimator.ofFloat(ll_3,"X",ll_3.getX(),ll_3.getX()+offset);ObjectAnimatoranim4=ObjectAnimator.ofFloat(ll_4,"X",ll_4.getX(),ll_4.getX()+offset);ObjectAnimatoranim5=ObjectAnimator.ofFloat(ll_5,"X",ll_5.getX(),ll_5.getX()+offset);ObjectAnimatoranim6=ObjectAnimator.ofFloat(ll_6,"X",ll_6.getX(),ll_6.getX()+offset);ObjectAnimatoranim7=ObjectAnimator.ofFloat(ll_7,"X",ll_7.getX(),ll_7.getX()+offset);ObjectAnimatoranim8=ObjectAnimator.ofFloat(ll_8,"X",ll_8.getX(),ll_8.getX()+offset);ObjectAnimatoranim9=ObjectAnimator.ofFloat(ll_9,"X",ll_9.getX(),ll_9.getX()+offset);AnimatorSetanimSet=newAnimatorSet();animSet.setDuration(rationTime);animSet.playTogether(anim100,anim101,anim102,anim103,anim1,anim2,anim3,anim4,anim5,anim6,anim7,anim8,anim9);animSet.addListener(newAnimator.AnimatorListener(){@OverridepublicvoidonAnimationStart(Animatoranimation){}@OverridepublicvoidonAnimationEnd(Animatoranimation){Log.w(TAG,"動(dòng)畫(huà)結(jié)束后位置："+ll_1.getX()+""+ll_2.getX()+""+ll_3.getX()+""+ll_4.getX()+""+ll_5.getX()+""+ll_6.getX()+""+ll_7.getX()+""+ll_8.getX()+""+ll_9.getX());setCenter(centerWitch);animalFinish=true;}@OverridepublicvoidonAnimationCancel(Animatoranimation){}@OverridepublicvoidonAnimationRepeat(Animatoranimation){}});animSet.start();}7、重置預(yù)備控件??動(dòng)畫(huà)執(zhí)行完畢之后，要做兩個(gè)操作。第一個(gè)就是將當(dāng)前不在顯示范圍的4個(gè)子控件左右各放2個(gè)，第二步就是為預(yù)備控件綁定新的星期日期。下面的方法是根據(jù)各個(gè)子控件的坐標(biāo)來(lái)判斷是隱藏還是展示，然后為隱藏的控件重新安排位置；然后綁定數(shù)據(jù)：/*這些引用代表當(dāng)前正在顯示的5個(gè)條目和四個(gè)預(yù)備條目，*由于ll_x系列條目是不斷移動(dòng)的，所以此處需要根據(jù)ll_x的位置重新為llx賦值*其中l(wèi)l1-ll5為當(dāng)前正在顯示的條目，ll6、ll7為右邊隱藏的預(yù)備條目，ll8、ll9為左邊的隱藏預(yù)備條目*/privateLinearLayoutll1,ll2,ll3,ll4,ll5,ll6,ll7,ll8,ll9;/**1、找到正在展示的五個(gè)item，并將預(yù)備item復(fù)位*/privatevoidsetCenter(WEEKDAYweekDay){//記錄當(dāng)前顯示在中間的星期XcenterNow=weekDay;//1、找到當(dāng)前顯示的5個(gè)條目的位置List<LinearLayout>list=newArrayList<>(llList);for(inti=0;i<5;i++){for(intj=0;j<list.size();j++){LinearLayoutll=list.get(j);if(ll.getX()==ITEM_WIDTH*i){list.remove(ll);//找到之后就remove可以減少后面遍歷的次數(shù)//Log.d(TAG,"找到"+i+"了"+ll);switch(i){case0:ll1=ll;break;case1:ll2=ll;break;case2:ll3=ll;//當(dāng)前中間位置item放大ll3.getChildAt(0).setScaleX(scaleSize);ll3.getChildAt(0).setScaleY(scaleSize);break;case3:ll4=ll;break;case4:ll5=ll;break;}}}}Log.i(TAG,"找完后還剩"+list.size()+"總："+llList.size());//2、剩余的四個(gè)作為預(yù)備，歸位，左邊隱藏兩個(gè)，右邊隱藏兩個(gè)for(inti=0;i<list.size();i++){LinearLayoutll=list.get(i);switch(i){case0://左1ll.setX(-ITEM_WIDTH*2);ll8=ll;break;case1://左2ll.setX(-ITEM_WIDTH*1);ll9=ll;break;case2://右1ll.setX(ITEM_WIDTH*5);ll6=ll;break;case3://右2ll.setX(ITEM_WIDTH*6);ll7=ll;break;}}//綁定數(shù)據(jù)reBoundDataByCenter(weekDay);}/**2、重新綁定數(shù)據(jù)*/privatevoidreBoundDataByCenter(WEEKDAYweekDay){if(weekDay==WEEKDAY.wk1){/*星期1在中間，依次為4、5、6、7、1、2、3、4、5*/setLLText(ll8,4,false);setLLText(ll9,5,false);setLLText(ll1,6,false);setLLText(ll2,7,false);setLLText(ll3,1,true);setLLText(ll4,2,false);setLLText(ll5,3,false);setLLText(ll6,4,false);setLLText(ll7,5,false);}elseif(weekDay==WEEKDAY.wk2){/*星期2在中間，依次為5、6、7、1、2、3、4、5、6*/setLLText(ll8,5,false);setLLText(ll9,6,false);setLLText(ll1,7,false);setLLText(ll2,1,false);setLLText(ll3,2,true);setLLText(ll4,3,false);setLLText(ll5,4,false);setLLText(ll6,5,false);setLLText(ll7,6,false);}elseif(weekDay==WEEKDAY.wk3){/*星期3在中間，依次為6、7、1、2、3、4、5、6、7*/setLLText(ll8,6,false);setLLText(ll9,7,false);setLLText(ll1,1,false);setLLText(ll2,2,false);setLLText(ll3,3,true);setLLText(ll4,4,false);setLLText(ll5,5,false);setLLText(ll6,6,false);setLLText(ll7,7,false);}else