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

本篇内容介绍了“如何实现与优化抢购倒计时自定义控件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联自2013年起，先为庄浪等服务建站，庄浪等地企业，进行企业商务咨询服务。为庄浪企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一、前言

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

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

为进一步优化倒计时效果，我们为倒计时增加了数字滚动动画，如下图所示。

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

二、实现倒计时基本功能

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">

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

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

在类中将以上两个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() + "--">

在代码中，可以根据实际需要定制具体某几款语言是否换行显示。

而对于剩下的大多数语言，可以使用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时就会调用这个方法。

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

“如何实现与优化抢购倒计时自定义控件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

新闻标题：如何实现与优化抢购倒计时自定义控件
当前路径：https://www.cdcxhl.com/article22/pcehjc.html

成都网站建设公司_创新互联，为您提供小程序开发、App开发、响应式网站、网站排名、服务器托管、微信公众号

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

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

一、 前言

二、 实现倒计时基本功能

2.1 需求与原理分析

2.2 具体实现

2.2.1 回调监听接口设计

2.2.2 view的构建与绑定

2.2.3 构建内部使用的私有方法

2.2.4 构建公有方法供外部使用

2.3 倒计时类的实际调用

三、实现倒计时整体布局

3.1 需求描述

3.2 实施方案

四、实现倒计时动画效果

4.1 倒计时数字滚动动画的原理分析

4.2 具体实现

4.2.1 倒计时滚动组件初始化

4.2.2 绘制倒计时滚动组件

4.2.3 倒计时数字滚动效果实现

4.3 具体使用

五、优化倒计时性能

5.1 倒计时数字滚动动画的原理分析

5.2 具体实现

5.2.1 暂停倒计时

5.2.2 开始倒计时

一、前言

二、实现倒计时基本功能