一、 前言
随着网购的继续倒退,抢购类倒计时在各类电商利用中已非常常见,这种设计能够进步用户的点击率和下单率等。
然而国内的电商利用大部分都仅反对中文,不适配其余的语言,因而当倒计时与其余文案处于同一行展现时,无需思考倒计时的展现形式。在海内利用中,因为须要适配各种语言,有些小语种的文案较长,因而当倒计时和其余文案处于同一行展现时,须要充分考虑多语言的适配,如何优雅地实现倒计时自适应显示是一个值得沉思的问题。
为进一步优化倒计时成果,咱们为倒计时减少了数字滚动动画,如下图所示。倒计时的性能必然会带来性能的耗费,如何防止倒计时带来的性能问题,本文也将给出相应的解决方案。
二、 实现倒计时基本功能
2.1 需要与原理剖析
该控件预期展示两种状态,间隔流动开始还有X天XX:XX:XX 和间隔流动完结还有X天XX:XX:XX,因而须要一个活动状态属性,并通过这个流动开始与否的属性设置工夫前的文案。具体工夫时分秒之间互相独立,因而将它们拆分成独立的textview进行解决。
倒计时控件的外围是计时器,安卓中曾经有现成的CountDownTimer类可供使用以实现倒计时性能。此外,还须要实现一些监听的接口。
2.2 具体实现
2.2.1 回调监听接口设计
首先,定义回调接口
public interface OnCountDownTimerListener { /** * 倒计时正在进行时调用的办法 * * @param millisUntilFinished 残余的工夫(毫秒) */ void onRemain(long millisUntilFinished); /** * 倒计时完结 */ void onFinish(); /** * 每过一分钟调用的办法 */ void onArrivalOneMinute(); }
在该接口中定义三个办法:
onRemain(long millisUntilFinished):倒计时进行中回调的办法,用于后续性能的拓展
onFinish():倒计时完结回调,用于活动状态的切换和计时的暂停等
onArrivalOneMinute():每过一分钟回调,用于定时上报的埋点
2.2.2 view的构建与绑定
其次,初始化自定义view,基于理论开发需要,将整个控件细分为润饰文案、天数、时、分、秒等几个独立的textview,并在自定义BaseCountDownTimerView中初始化:
private void init() { mDayTextView = findViewById(R.id.days_tv); mHourTextView = findViewById(R.id.hours_tv); mMinTextView = findViewById(R.id.min_tv); mSecondTextView = findViewById(R.id.sec_tv); mHeaderText = findViewById(R.id.header_tv); mDayText = findViewById(R.id.new_arrival_day); }
2.2.3 构建外部应用的公有办法
首先结构设置剩余时间的办法,入参是残余的毫秒数,在办法外部将工夫转化为具体的天时分秒,并将后果赋予给textview
private void setSecond(long millis) { long day = millis / ONE_DAY; long hour = millis / ONE_HOUR - day * 24; long min = millis / ONE_MIN - day * 24 * 60 - hour * 60; long sec = millis / ONE_SEC - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60; String second = (int) sec + ""; // 秒 String minute = (int) min + ""; // 分 String hours = (int) hour + ""; // 时 String days = (int) day + ""; //天 if (hours.length() == 1) { hours = "0" + hours; } if (minute.length() == 1) { minute = "0" + minute; } if (second.length() == 1) { second = "0" + second; } if (day == 0) { mDayTextView.setVisibility(GONE); mDayText.setVisibility(GONE); } else { setDayText(day); mDayTextView.setVisibility(VISIBLE); mDayText.setVisibility(VISIBLE); } mDayTextView.setText(days); if (mFirstSetTimer) { mHourTextView.setInitialNumber(hours); mMinTextView.setInitialNumber(minute); mSecondTextView.setInitialNumber(second); mFirstSetTimer = false; } else { mHourTextView.flipNumber(hours); mMinTextView.flipNumber(minute); mSecondTextView.flipNumber(second); } }
须要留神的是,当单位工夫为个位数时,为了视觉效果的对立,要在数字前加“0”进行补位。
其次,构建一个创立倒计时的办法,其代码如下:
private void createCountDownTimer(final int eventStatus) { if (mCountDownTimer != null) { mCountDownTimer.cancel(); } mCountDownTimer = new CountDownTimer(mMillis, 1000) { @Override public void onTick(long millisUntilFinished) { //策动要求:倒计时为00:00:01时,活动状态刷新,倒计时不展现00:00:00这个状态 if (millisUntilFinished >= ONE_SEC) { setSecond(millisUntilFinished); //当活动状态为进行中时,每隔一分钟调用一次回调 if (eventStatus == HomeItemViewNewArrival.EVENT_START) { mArrivalOneMinuteFlag--; if (mArrivalOneMinuteFlag == Constant.ZERO) { mArrivalOneMinuteFlag = Constant.SIXTY; mOnCountDownTimerListener.onArrivalOneMinute(); } } } } @Override public void onFinish() { mOnCountDownTimerListener.onFinish(); } }; }
在该办法中,创立一个倒计时实例CountDownTimer,CountDownTimer() 有两个参数,别离是残余的总工夫和刷新距离。
在实例的onTick()办法中,调用setSecond()办法在每次间隔时间(也就是1s)后定期刷新view,实现倒计时控件的更新。此外,产品中还有一个一分钟定期上报埋点的需要,也能够在onTick()办法中实现。在理论我的项目事件中,若有定时的工作需要,也可在该办法中自在设置。最初,还需重写该CountDownTimer的onFinish()办法,触发listener接口里的onFinish()
2.2.4 构建私有办法供内部应用
首先是设置倒计时的监听事件:
public void setDownTimerListener(OnCountDownTimerListener listener) { this.mOnCountDownTimerListener = listener;}
其次是外露一个设置初始工夫和流动开始或完结文案的办法:
public void setDownTime(long millis) { this.mMillis = millis;} public void setHeaderText(int eventStatus) { if (eventStatus == HomeItemViewNewArrival.EVENT_NOT_START) { mHeaderText.setText("Start in"); } else { mHeaderText.setText("Ends in"); }}
最初,也是最重要的,须要给倒计时类设计开始与勾销倒计时的办法:
public void startDownTimer(int eventStatus) { mArrivalOneMinuteFlag = Constant.SIXTY; mFirstSetTimer = true; //设置须要倒计时的初始值 setSecond(mMillis); createCountDownTimer(eventStatus);// 创立倒计时 mCountDownTimer.start(); } public void cancelDownTimer() { mCountDownTimer.cancel(); }
在开始倒计时的办法中,初始化倒计时的初始值并创立倒计时,最初调用CountDownTimer实例的start()办法开始倒计时。在勾销的办法中,间接调用CountDownTimer实例的cancel()办法勾销倒计时。
2.3 倒计时类的理论调用
理论调用倒计时控件时,只需在具体布局中增加该倒计时类布局,在调用的类中实例化BaseCountDownTimerView。接着,应用实例的setDownTime()、setHeaderText()初始化数据,应用setDownTimerListener()给view实例设置监听。
最初调用startDownTimer()开启倒计时。
if (view != null) { view.setDownTime(mDuration); view.setHeaderText(mEventStatus); view.startDownTimer(mEventStatus); view.setDownTimerListener(new BaseCountDownTimerView.OnCountDownTimerListener() { @Override public void onRemain(long millisUntilFinished) { } @Override public void onFinish() { view.cancelDownTimer(); if (bean.mNewArrivalType == TYPE_EVENT && mEventStatus == EVENT_START) { mEventStatus = EVENT_END; //活动状态之前为进行中,倒计时变为0,如果还有下一个流动/新品,则刷新为下一个流动/新品的数据 refreshNewArrivalBeanDate(bean); onBindView(bean, 1, true, null); } else { setEventStatus(bean); } } @Override public void onArrivalOneMinute() { } });
三、实现倒计时整体布局
3.1 需要形容
在多语言环境或者不同屏幕条件下,某些语种的控件长度过长,须要自适应控件进行折行显示以适应UI标准
3.2 实施方案
本来思考只实例化一个自定义倒计时控件的对象,然而在设计对象布局的过程中发现,一个对象不不便同时实现在行尾展现或折行后在第二行行首显示。因而,本文采纳了在布局的时候同时预置两个倒计时对象的办法,一个对象位于行尾,另一个位于第二行的行首。
在measure过程中,如果测量失去控件的宽度大于某一个宽度阈值,则初始化次行行首的view,并将行尾的view可见状态置为Gone,若小于某一个宽度阈值,则初始化行尾的view,并将次行行首的view可见状态置为Gone
首先来看一看xml布局文件,以下是题目加倒计时位于行尾的一个整体布局文件main\_view\_header\_new\_arrival
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="@dimen/qb_px_48"> <com.example.website.general.ui.widget.TextView android:id="@+id/new_arrival_txt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_centerInParent="true" android:layout_marginStart="@dimen/qb_px_20" android:text="@string/new_arrival" android:textColor="@color/common_color_de000000" android:textSize="@dimen/qb_px_16" android:textStyle="bold" /> <com.example.website.widget.BaseCountDownTimerView android:id="@+id/count_down_timer_short" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentEnd="true" android:layout_marginEnd="@dimen/qb_px_20" android:gravity="center_vertical" /></RelativeLayout>
它的理论展现成果如下图所示
然而此布局只能展现单行能展现所有内容的状况,因而还须要在此布局上拓展双行展现的状况,再看一看main\_list\_item\_home\_new_arrival的布局
<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" tools:parentTag="android.widget.LinearLayout"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/main_view_header_new_arrival"/> <com.example.website.widget.BaseCountDownTimerView android:id="@+id/count_down_timer_long" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_marginStart="@dimen/qb_px_20" android:layout_marginTop="@dimen/qb_px_n_4" android:layout_marginEnd="@dimen/qb_px_20" android:layout_marginBottom="@dimen/qb_px_8" android:gravity="center_vertical" /> </LinearLayout> </merge>
它的理论展现成果如下图所示
在类中将以上两个view别离进行实例关联。
View.inflate(getContext(), R.layout.main_list_item_home_new_arrival, this);mBaseCountDownTimerViewShort = findViewById(R.id.count_down_timer_short); //行尾倒计时viewmBaseCountDownTimerViewLong = findViewById(R.id.count_down_timer_long); //次行行首倒计时view
通过以上的步骤搞定了两种状况下倒计时控件的布局,接下来就该思考折行展现的判断条件了。
在多语言环境中,题目textview与倒计时view的宽度都是不确定的,因而须要综合思考两个控件的宽度。同时,因为策动要求,还需思考某些语种非凡状况的展现要求。判断代码如下所示:
private boolean isShortCountDownTimerViewShow() { String languageCode = LocaleManager.getInstance().getCurrentLanguage(); if (Constant.EN_US.equals(languageCode) || Constant.EN_GB.equals(languageCode) || Constant.EN_AU.equals(languageCode)) { //因策动要求,美式英语、英国英语、澳大利亚英语,强制在New Arrivals标题栏右侧展现 return true; } else { View newArrivalHeader = inflate(mContext, R.layout.main_view_header_new_arrival, null); TextView newArrivalTextView = newArrivalHeader.findViewById(R.id.new_arrival_txt); LinearLayout countDownTimer = newArrivalHeader.findViewById(R.id.count_down_timer_short); int measureSpecW = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); int measureSpecH = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); newArrivalTextView.measure(measureSpecW, measureSpecH); countDownTimer.measure(measureSpecW, measureSpecH); VLog.i(TAG, countDownTimer.getMeasuredWidth() + "--" + newArrivalTextView.getMeasuredWidth()); if (countDownTimer.getMeasuredWidth() + newArrivalTextView.getMeasuredWidth() <= mContext.getResources().getDimensionPixelSize(R.dimen.qb_px_302)) { return true; } else { return false; } } }
在代码中,能够依据理论须要定制具体某几款语言是否换行显示。
而对于剩下的大多数语言,能够应用MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)获取measureSpecW 和 measureSpecH ,第一个参数是零碎测量该View后失去的规格值,这里应用0代表省略(在系统对该View绘制之前就间接调用了measure办法,所以宽高为0,该值与最终获取的宽高无关),第二个参数MeasureSpec.UNSPECIFIED代表父容器不对View有任何限度。获取实现后也就顺利完成具体view宽度的测量。
通过该办法的返回值,咱们就能够管制两个倒计时view的展现与暗藏,从而达到自适应折行展现的成果。
if (isShortCountDownTimerViewShow()) { initCountDownTimerView(mBaseCountDownTimerViewShort, bean); mBaseCountDownTimerViewShort.setVisibility(VISIBLE); mBaseCountDownTimerViewLong.setVisibility(GONE); } else { initCountDownTimerView(mBaseCountDownTimerViewLong, bean); mBaseCountDownTimerViewShort.setVisibility(GONE); mBaseCountDownTimerViewLong.setVisibility(VISIBLE); }
此外,该办法也不局限于倒计时控件view,针对多语言中各种各样的自定义view,仍然能够应用这种测量方法实现自适应换行的好看展现。
四、实现倒计时动画成果
4.1 倒计时数字滚动动画的原理剖析
从效果图上能够看到,时、分、秒都是两位数,且数字的变化规律都雷同:首先是从个位数开始变动,旧数字从失常展现区域向上挪动肯定间隔,新数字从下向上挪动肯定间隔达到失常展现区域。如果个位数递加至0,则十位数须要递加,所以变动是十位和个位一起挪动。
具体的实现思路为:
1、将时/分/秒的两位数当成一个数字滚动组件;
2、将数字滚动组件的两位数,拆分成一个数字数组,变动操作针对数组中的单个元素操作即可;
3、保留旧数字,将旧数字和新数字的数组元素一一比拟,数字雷同的位绘制新数字,数字不同的位一起挪动即可;
4、在挪动数字时,须要将旧数字向上挪动,挪动的间隔是 0 至 负的最大滚动间隔;同时要将新数字向上挪动,挪动间隔为最大滚动间隔 至 0;其中最大滚动间隔是数字滚动控件的高度,该值须要依据理论的UI稿确定。
4.2 具体实现
4.2.1 倒计时滚动组件初始化
倒计时滚动组件继承自TextView,在构造函数中设置【最大滚动间隔】和【画笔相干属性】,这两者都须要依据理论UI稿确定。
其中,最大滚动间隔mMaxMoveHeight是UI稿中时/分/秒数字控件的整体高度;画笔设置的字体色彩、大小等,均为UI稿中时/分/秒数字的字体色彩、大小等。具体代码如下所示:
//构造函数public NumberFlipView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); mResources = context.getResources(); //最大滚动高度18dp mMaxMoveHeight = mResources.getDimensionPixelSize(R.dimen.qb_px_18); //设置画笔相干属性 setPaint();} //设置画笔相干属性private void setPaint() { //设置绘制数字为红色 mPaint.setColor(Color.WHITE); //设置绘制数字款式为实心 mPaint.setStyle(Paint.Style.FILL); //设置绘制数字字体加粗 mPaint.setFakeBoldText(true); //设置绘制文字大小14dp mPaint.setTextSize(mResources.getDimensionPixelSize(R.dimen.qb_px_14));}
4.2.2 绘制倒计时滚动组件
绘制倒计时数字是通过重写onDraw()实现的。首先拆分旧数字和新数字成为相应的数字数组;
具体代码如下所示:
//拆分新数字成为新数字数组for (int i = 0; i < mNewNumber.length(); i++) { mNewNumberArray.add(String.valueOf(mNewNumber.charAt(i)));} //拆分老数字成为老数字数组for (int i = 0; i < mOldNumber.length(); i++) { mOldNumberArray.add(String.valueOf(mOldNumber.charAt(i)));}
而后绘制数字:绘制新数字时,逐位判断旧数字和新数字是否雷同,如果数字雷同,间接绘制新数字;如果数字不雷同,旧数字和新数字均须要挪动。
具体代码如下所示:
//两位数的newNumber的文字宽度int textWidth = mResources.getDimensionPixelSize(R.dimen.qb_px_16); float curTextWidth = 0; for (int i = 0; i < mNewNumberArray.size(); i++) { //newNumber中每个数字的边界 mPaint.getTextBounds(mNewNumberArray.get(i), 0, mNewNumberArray.get(i).length(), mTextRect); //newNumber中每个数字的宽度 int numWidth = mResources.getDimensionPixelSize(R.dimen.qb_px_5); //逐位判断旧数字和新数字是否雷同 if (mNewNumberArray.get(i).equals(mOldNumberArray.get(i))) { //数字雷同,间接绘制新数字 canvas.drawText(mNewNumberArray.get(i), getWidth() * ONE_HALF - textWidth * ONE_HALF + curTextWidth, getHeight() * ONE_HALF + mTextRect.height() * ONE_HALF, mPaint); } else { //数字不雷同,旧数字和新数字均须要挪动 canvas.drawText(mOldNumberArray.get(i), getWidth() * ONE_HALF - textWidth * ONE_HALF + curTextWidth, mOldNumberMoveHeight + getHeight() * ONE_HALF + mTextRect.height() * ONE_HALF, mPaint); canvas.drawText(mNewNumberArray.get(i), getWidth() * ONE_HALF - textWidth * ONE_HALF + curTextWidth, mNewNumberMoveHeight + getHeight() * ONE_HALF + mTextRect.height() * ONE_HALF, mPaint); } curTextWidth += (numWidth + mResources.getDimensionPixelSize(R.dimen.qb_px_3));
getWidth()获取的是倒计时控件的整个宽度;textWidth是两位数字的宽度;numWidth是单个数字的宽度;curTextWidth是每个数字程度起始绘制地位的间距,curTextWidth=numWidth+两个数字之间的间距。
十位数字的程度绘制起始地位为getWidth()/2 + textWidth/2;个位数字的程度绘制起始地位为getWidth()/2textWidth/2 + curTextWidth。getHight()获取的是倒计时控件的整个高度;textRect.height()获取的是数字的高度。
旧数字的垂直绘制起始地位为mOldNumberMoveHeight + getHeight()/2 + textRect.height()/2;新数字的垂直绘制起始地位为mNewNumberMoveHeightgetHeight()/2 + textRect.height()/2。
4.2.3 倒计时数字滚动成果实现
旧数字和新数字的滚动成果是通过ValueAnimator一直扭转旧数字的滚动间隔mOldNumberMoveHeight和新数字的滚动间隔mNewNumberMoveHeight实现的。
在规定的动画工夫FLIP\_NUMBER\_DURATION内,mNewNumberMoveHeight须要从最大滚动间隔mMaxMoveHeight变为0,mOldNumberMoveHeight须要从0变为负的最大滚动间隔mMaxMoveHeight;每次计算出新的滚动间隔后,调用invalidate()办法,触发onDraw()办法,一直地绘制旧数字和新数字,以实现数字滚动的成果。
具体代码如下所示:
/*利用ValueAnimator,在规定工夫FLIP_NUMBER_DURATION之内,将值从MAX_MOVE_HEIGHT变为0,每次值变动都赋给mNewNumberMoveHeight,同时将mNewNumberMoveHeight - MAX_MOVE_HEIGHT的值赋给mOldNumberMoveHeight,并从新绘制,实现新数字和旧数字的上滑; */mNumberAnimator = ValueAnimator.ofFloat(mMaxMoveHeight, 0);mNumberAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mNewNumberMoveHeight = (float) animation.getAnimatedValue(); mOldNumberMoveHeight = mNewNumberMoveHeight - mMaxMoveHeight; invalidate(); }});mNumberAnimator.setDuration(FLIP_NUMBER_DURATION);mNumberAnimator.start();
4.3 具体应用
首先在布局中引入,用法和TextView雷同。下图为时、分、秒对应的布局:
<!--时--><com.example.materialdesginpractice.NumberFlipView android:id="@+id/hours_tv" android:layout_width="@dimen/qb_px_22" android:layout_height="@dimen/qb_px_18" android:gravity="center" android:background="@drawable/number_bg" android:textSize="@dimen/qb_px_14" android:textColor="@color/common_color_ffffff"/> <!--分--><com.example.materialdesginpractice.NumberFlipView android:id="@+id/min_tv" android:layout_width="@dimen/qb_px_22" android:layout_height="@dimen/qb_px_18" android:gravity="center" android:background="@drawable/number_bg" android:textSize="@dimen/qb_px_14" android:textColor="@color/common_color_ffffff"/> <!--秒--><com.example.materialdesginpractice.NumberFlipView android:id="@+id/sec_tv" android:layout_width="@dimen/qb_px_22" android:layout_height="@dimen/qb_px_18" android:gravity="center" android:background="@drawable/number_bg" android:textSize="@dimen/qb_px_14" android:textColor="@color/common_color_ffffff"/>
而后通过id找到对应的倒计时数字控件:
mHourTextView = findViewById(R.id.hours_tv);mMinTextView = findViewById(R.id.min_tv);mSecondTextView = findViewById(R.id.sec_tv);
最初调用时/分/秒倒计时数字控件的办法,设置倒计时初始值或者倒计时新数字。如果是首次进行倒计时,须要调用setInitialNumber()办法设置初始值;否则调用flipNumber()办法设置新的倒计时数值。
具体用法如下所示:
if (mFirstSetTimer) { mHourTextView.setInitialNumber(hours); mMinTextView.setInitialNumber(minute); mSecondTextView.setInitialNumber(second); mFirstSetTimer = false;} else { mHourTextView.flipNumber(hours); mMinTextView.flipNumber(minute); mSecondTextView.flipNumber(second);}
五、优化倒计时性能
5.1 倒计时数字滚动动画的原理剖析
在实现中,倒计时控件是作为ListView的子元素,而且ListView是处于一个Fragment中。
为了缩小功耗,须要在倒计时控件不在可见范畴内时,暂停倒计时;当倒计时控件从新呈现在可见范畴内时,从新开始倒计时。下图是倒计时暂停与开始的场景。
5.2 具体实现
5.2.1 暂停倒计时
页面滑动,倒计时控件滑出可视区域,当倒计时控件滑出ListView的可视范畴内,须要暂停倒计时。该状况的重点是:须要判断出子view是否曾经移出ListView中。
如果利用只须要兼容安卓7及以上,能够通过重写onDetachedFromWindow()办法,在办法体内进行勾销倒计时的操作。因为每当子view移出ListView时就会调用这个办法。
@Overrideprotected void onDetachedFromWindow() { super.onDetachedFromWindow(); //移出屏幕调用,暂停倒计时 stopCountDownTimerAndAnimation();}
如果利用须要兼容安卓7以下,则上述办法会生效,因为onDetachedFromWindow()办法并不兼容低版本。然而可是通过重写onStartTemporaryDetach()办法实现雷同的成果。
@Overridepublic void onStartTemporaryDetach() { super.onStartTemporaryDetach(); //移出屏幕调用,暂停倒计时 stopCountDownTimerAndAnimation();}
通过tab切换到其余Fragment
当倒计时控件位于可视范畴内,此时通过tab切换到其余Fragment时,须要暂停倒计时。该状况下倒计时控件所在的Fragment会暗藏,能够在Fragment暗藏时获取倒计时控件的View,而后调用其办法暂停倒计时。
@Overridepublic void onFragmentHide() { super.onFragmentHide(); //暂停倒计时 stopNewArrivalCountDownTimerAndAnimation();}
为了获取倒计时控件所在的View对象,通过遍历ListView可视范畴内的子View,判断其是否是倒计时控件所在的View对象。而后调用倒计时控件所在View对象的stopCountDownTimerAndAnimation()办法,暂停倒计时。
/** * 获取倒计时控件所在的view对象,暂停倒计时 */private void stopNewArrivalCountDownTimerAndAnimation() { if (mListView != null) { for (int index = 0; index < mListView.getChildCount(); index++) { View view = mListView.getChildAt(index); if (view instanceof HomeItemViewNewArrival) { ((HomeItemViewNewArrival) view).stopCountDownTimerAndAnimation(); } } }}
利用切换至后盾/跳转到其余界面
当倒计时控件位于可视范畴内,此时利用切换到至后盾 或者 点击倒计时控件所在界面的其余内容,跳转到其余界面,都须要暂停倒计时。因为这些状况都会触发倒计时所在Fragment的onStop()办法。因而能够重写onStop(),并在该办法体内获取倒计时控件的View,而后暂停倒计时。
stopNewArrivalCountDownTimerAndAnimation()办法同上。
@Overridepublic void onStop() { super.onStop(); //暂停倒计时 stopNewArrivalCountDownTimerAndAnimation();}
5.2.2 开始倒计时
页面滑动,倒计时控件滑入可视区域
当倒计时控件滑出可视区域后,再次滑入可视区域,会主动调用Adapter的getView()办法,而后调用倒计时控件的onBindView()办法。因为onBindView()办法中会初始化倒计时控件,因而该状况下,无需再手动开始倒计时。
通过tab切换回到倒计时所在的Fragment
通过tab切换回到倒计时控件所在的Fragment,若此时倒计时控件在可视范畴内,则须要从新开始倒计时。因为该状况下Fragment会从新显示,因而能够在Fragment显示时获取倒计时控件的View,而后调用其办法从新开始倒计时。
@Overridepublic void onFragmentShow(int source, int floor) { super.onFragmentShow(source, floor); //从新开始倒计时 refreshNewArrival();}
同样,为了获取倒计时控件所在的View对象,须要通过遍历ListView可视范畴内的子View,判断其是否是倒计时控件所在的View对象。而后调用倒计时控件所在View对象的refreshEventStatus ()办法,开始倒计时。
/** * 获取倒计时控件所在的view对象,开始倒计时 */private void refreshNewArrival() { if (mListView != null) { for (int index = 0; index < mListView.getChildCount(); index++) { View view = mListView.getChildAt(index); if (view instanceof HomeItemViewNewArrival) { ((HomeItemViewNewArrival) view).refreshEventStatus(); } } }}
利用切换回前台/从其余界面回退
当利用切换到回前台 或者 从其余界面回退到倒计时控件所在的界面,若此时倒计时控件在可视范畴内,则都须要从新开始倒计时。因为这些状况都会触发倒计时所在Fragment的onResume()办法。因而能够重写onResume(),并在该办法体内获取倒计时控件的View,而后调用其办法从新开始倒计时。
其中refreshNewArrival()办法同上。
@Overridepublic void onResume() { super.onResume(); //从新开始倒计时 refreshNewArrival();}
作者:vivo 互联网客户端团队Liu Zhiyi、Zhen Yiqing