抢购倒计时自定义控件的实现与优化

一、 前言

随着网购的持续发展,抢购类倒计时在各类电商应用中已十分常见,这种设计可以提高用户的点击率和下单率等。

但是国内的电商应用大部分都仅支持中文,不适配其他的语言,因此当倒计时与其他文案处于同一行展示时,无需考虑倒计时的展示方式。在海外应用中,由于需要适配各种语言,有些小语种的文案较长,因此当倒计时和其他文案处于同一行展示时,需要充分考虑多语言的适配,如何优雅地完成倒计时自适应显示是一个值得深思的问题。

为进一步优化倒计时效果,我们为倒计时增加了数字滚动动画,如下图所示。倒计时的功能必然会带来性能的消耗,如何避免倒计时带来的性能问题,本文也将给出相应的解决方案。

image

二、 实现倒计时基本功能

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>

它的实际展示效果如下图所示:

image

但是此布局只能展示单行能展示所有内容的情况,因此还需要在此布局上拓展双行展示的情况,再看一看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>

它的实际展示效果如下图所示:

image

在类中将以上两个view分别进行实例关联。

View.inflate(getContext(), R.layout.main_list_item_home_new_arrival, this);
mBaseCountDownTimerViewShort = findViewById(R.id.count_down_timer_short); //行尾倒计时view
mBaseCountDownTimerViewLong = 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 倒计时数字滚动动画的原理分析

image

从效果图上可以看到,时、分、秒都是两位数,且数字的变化规律都相同:首先是从个位数开始变化,旧数字从正常展示区域向上移动一定距离,新数字从下向上移动一定距离到达正常展示区域。如果个位数递减至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时就会调用这个方法。

@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    //移出屏幕调用,暂停倒计时
    stopCountDownTimerAndAnimation();
}

如果应用需要兼容安卓7以下,则上述方法会失效,因为onDetachedFromWindow()方法并不兼容低版本。但是可是通过重写onStartTemporaryDetach()方法实现相同的效果。

@Override
public void onStartTemporaryDetach() {
    super.onStartTemporaryDetach();
    //移出屏幕调用,暂停倒计时
    stopCountDownTimerAndAnimation();
}

通过tab切换到其他Fragment

当倒计时控件位于可视范围内,此时通过tab切换到其他Fragment时,需要暂停倒计时。该情况下倒计时控件所在的Fragment会隐藏,可以在Fragment隐藏时获取倒计时控件的View,然后调用其方法暂停倒计时。

@Override
public 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()方法同上。

@Override
public void onStop() {
    super.onStop();
 
    //暂停倒计时
    stopNewArrivalCountDownTimerAndAnimation();
}

5.2.2 开始倒计时

页面滑动,倒计时控件滑入可视区域

当倒计时控件滑出可视区域后,再次滑入可视区域,会自动调用Adapter的getView()方法,然后调用倒计时控件的onBindView()方法。由于onBindView()方法中会初始化倒计时控件,因此该情况下,无需再手动开始倒计时。

通过tab切换回到倒计时所在的Fragment

通过tab切换回到倒计时控件所在的Fragment,若此时倒计时控件在可视范围内,则需要重新开始倒计时。由于该情况下Fragment会重新显示,因此可以在Fragment显示时获取倒计时控件的View,然后调用其方法重新开始倒计时。

@Override
public 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()方法同上。

@Override
public void onResume() {
    super.onResume();
    //重新开始倒计时
    refreshNewArrival();
}

作者:vivo 互联网客户端团队Liu Zhiyi、Zhen Yiqing

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容