Android自定义view之（优快云应用splash界面的倒计时View）

最新推荐文章于 2025-09-12 00:15:00 发布

原创

最新推荐文章于 2025-09-12 00:15:00 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android

这篇博客介绍了如何在Android中创建一个自定义的倒计时View，模仿优快云应用的欢迎页。作者详细阐述了实现过程，包括继承ProgressBar，重写onMeasure方法来测量View大小，以及在ondraw中不断绘制更新倒计时。通过属性动画测试了倒计时功能，并鼓励读者多尝试自定义View，以克服对它的畏惧感。

最近有点闲，准确来说是很闲，每天早上要在公车上度过一段时间，一般我就会打开csdn应用看看别人的博客，哎哟~！看到优快云欢迎页的倒计时view还不错哦，正好最近在学自定义View,所以就捣腾了一下，以前感觉遥不可及的东西真正做起来也不难哈，菜鸟一个，大牛勿喷^~^！！
先看一下效果图：
csdn的大致也是这样吧
思路：
1、肯定是自定义个View了，偷懒下一个，为了不自己定义progress就直接继承ProgressBar,通过getProgress和getMax获取当前进度跟最大值。
2、重写onMeasure,测量View,自定义View的老套路了，测量的规则大概是这样的，如果明确了宽高就用定义的宽高，如果没有也就是wrap_content类型的时候，拿到文本也就是这里的“跳过”字的长度+一个自定义的offset偏移量的东西。
3、在ondraw里面不断的绘制，通过改变弧的startAngle绘制。
4、当达到最大值的时候开始回调（我这里为了测试通过监听动画结束来实现回调了）

atrr文件：

 <!-- countdown view-->
    <attr name="text" format="string"></attr>
    <attr name="progress_color" format="color"></attr>
    <attr name="center_bg" format="color"></attr>
    <attr name="text_color" format="color"></attr>
    <attr name="progress_width" format="dimension"></attr>
    <declare-styleable name="count_down" >
        <attr name="text" />
        <attr name="progress_color" />
        <attr name="center_bg" />
        <attr name="text_color" />
        <attr name="text_size"/>
        <attr name="progress_width" />
    </declare-styleable>

第一步：自定义一个CountDownView继承ProgressBar,照样是覆盖三个构造方法。

public class CountDownView extends ProgressBar {
   
   
/**
     * 结束的位置
     */
    private int endAngle=270;
    private Paint mTextPaint;
    private Paint mBgPaint;
    /**
     * 绘画的半径
     */
    private int mRadius=dp2px(30);
    /**
     * 进度条color默认红色
     */
    private int mProgressColor = Color.RED;
    /**
     * 进度条宽度，默认2dp
     */
    private int mProgressWidth = dp2px(2);
    /**
     * 文本
     */
    private String mText="跳过";
    /**
     * 文本颜色
     */
    private int mTextColor=Color.WHITE;
    /**
     * 文本大小，默认14.5sp
     */
    private int mTextSize=sp2px(14.5f);
    /**
     * 默认中心背景色
     */
    private int centerBg=Color.GRAY;
    /**
     * 当wrapcontent的时候
     * 控件的宽高为文字的宽度加上offset
     */
    private float offset=15;
 public CountDownView(Context context) {
        this(context, null);
    }

    public CountDownView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);