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

最新推荐文章于 2024-01-06 17:40:12 发布

vv_小虫

最新推荐文章于 2024-01-06 17:40:12 发布

阅读量1.5k

点赞数

分类专栏： Android初级 Android初级文章标签： android

本文链接：https://blog.csdn.net/vv_bug/article/details/52156240

版权

Android初级同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

Android初级

12 篇文章 0 订阅

订阅专栏

最近有点闲，准确来说是很闲，每天早上要在公车上度过一段时间，一般我就会打开csdn应用看看别人的博客，哎哟~！看到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);
        /**
        获取参数和初始化Paint
        */
        obtainStyleAttr(context, attrs, defStyleAttr);
        测试
        setMax(100);
        startAnim();
        ///测试
    }
     /**
     * 获取参数
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    private void obtainStyleAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.count_down, defStyleAttr, 0);
        int count=a.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr=a.getIndex(i);
            switch (attr){
                case R.styleable.count_down_center_bg:
                    centerBg=a.getColor(attr,centerBg);
                    break;
                case R.styleable.count_down_text:
                    mText=a.getString(attr);
                    break;
                case R.styleable.count_down_progress_color:
                    mProgressColor=a.getColor(attr,mProgressColor);
                    break;
                case R.styleable.count_down_text_color:
                    mTextColor=a.getColor(attr,mTextColor);
                    break;
                case R.styleable.count_down_text_size:
                    mTextSize=a.getDimensionPixelSize(attr,mTextSize);
                    break;
                case R.styleable.count_down_progress_width:
                    mProgressWidth=a.getDimensionPixelSize(attr,mProgressWidth);
                    break;
            }
        }
        a.recycle();
        mTextPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setDither(true);
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setStyle(Paint.Style.FILL);


        mBgPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mBgPaint.setDither(true);
        mBgPaint.setStyle(Paint.Style.STROKE);
        mBgPaint.setStrokeCap(Paint.Cap.ROUND);
        mBgPaint.setStrokeJoin(Paint.Join.ROUND);
        mBgPaint.setStrokeWidth(mProgressWidth);
        mBgPaint.setColor(mProgressColor);
    }
}

第二步：重写onMeasure方法告诉父控件大小

 @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        /**
         * 当为wrap_content的时候，返回的大小为 （文本的长度+红色进度条的宽度*2+一个自定义的offset）
         */
        int result= (int) (getPaddingLeft()+getPaddingRight()+mTextPaint.measureText(mText)+mProgressWidth*2)+dp2px(offset);
        /**
         * 传入一个result，当widthMode为MeasureSpec.UNSPECIFIED的时候返回result，
         * 否则为设定的值
         */
        MeasureSpec.UNSPECIFIED
        int width=resolveSize(result, widthMeasureSpec);
        int height=resolveSize(result,heightMeasureSpec);
        result=Math.min(width,height);
        setMeasuredDimension(result, result);
        mRadius=getMeasuredWidth()/2;

    }

点进resolveSize方法的代码你就懂了，

public static int resolveSizeAndState(int size, int measureSpec, int childMeasuredState) {
        final int specMode = MeasureSpec.getMode(measureSpec);
        final int specSize = MeasureSpec.getSize(measureSpec);
        final int result;
        switch (specMode) {
            case MeasureSpec.AT_MOST:
                if (specSize < size) {
                    result = specSize | MEASURED_STATE_TOO_SMALL;
                } else {
                    result = size;
                }
                break;
            case MeasureSpec.EXACTLY:
                result = specSize;
                break;
            case MeasureSpec.UNSPECIFIED:
            default:
                result = size;
        }
        return result | (childMeasuredState & MEASURED_STATE_MASK);
    }

是不是很熟悉。嘻嘻！~ 没事多ctrl+左键一下就可以了~

第三步：来到了最关键的代码了

 @Override
    protected synchronized void onDraw(Canvas canvas) {
        //画中间的圈
        mTextPaint.setColor(centerBg);
        canvas.drawCircle(mRadius, mRadius, mRadius-mProgressWidth/2, mTextPaint);
        //绘制文本
        mTextPaint.setColor(mTextColor);
        int baseX= (int) (mRadius-mTextPaint.measureText(mText)/2);
        int baseY= (int) (mRadius+(mTextPaint.getFontMetrics().bottom-mTextPaint.getFontMetrics().top)/2
                        -mTextPaint.getFontMetrics().bottom);
        canvas.drawText(mText, baseX, baseY, mTextPaint);
        /**
         * 绘制进度条，
         * 比如从startAngle从-90度的位置开始，endAngle为270位置（y的负轴位置）
         * 需要绘制的角度为
         * 270--90（开始）=360；
         * 270-0（开始）=270
         * 270-90（开始）=180
         * 所以sweepAngle=startAngle-270(endAngle)
         */
        int startAngle= (int) ((getProgress()*1.0f/getMax())*360)-90;
        canvas.drawArc(new RectF(0+mProgressWidth/2, 0+mProgressWidth/2,mRadius*2-mProgressWidth/2, mRadius*2-mProgressWidth/2), startAngle, endAngle-startAngle, false, mBgPaint);
    }

附带sp2px，dp2px的方法

 /**
     * dp2px
     * -90 360  0 270 90 180
     * @param value
     * @return px
     */
    private int dp2px(float value) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics());
    }

    /**
     * sp2px
     *
     * @param value
     * @return px
     */
    private int sp2px(float value) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, value, getResources().getDisplayMetrics());
    }

第四步：打工告成了，测试一下（我们这就偷偷懒，用属性动画测试了，不过开发中可以换子线程+Handler或者别的方式实现，因为属性动画不兼容低版本）

 public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        obtainStyleAttr(context, attrs, defStyleAttr);
        ////////////////测试
        setMax(100);
        startAnim();
    }
    private void startAnim() {
        ValueAnimator a=ValueAnimator.ofInt(0, getMax() + 1);
        a.setDuration(5000);
        a.setInterpolator(new LinearInterpolator());
        a.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                setProgress(value);
                postInvalidate();
            }
        });
        a.start();
        a.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Toast.makeText(getContext(), "计时完成，进入主页", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

其实很简单吧，加起来才几十行代码，以前总感觉自定义view离我是那么的远，只要动手敲敲，摸索着前进，一定会有结果的~！！！
最后附上CountDownView代码：

package com.cisetech.customer.customer.Animation;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.animation.LinearInterpolator;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.cisetech.customer.customer.R;

/**
 * Author:Yqy
 * Date:2016-08-08
 * Desc:倒计时View
 * Company:cisetech
 */
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);
        obtainStyleAttr(context, attrs, defStyleAttr);
        测试
        setMax(100);
        startAnim();
    }

    private void startAnim() {
        ValueAnimator a=ValueAnimator.ofInt(0, getMax() + 1);
        a.setDuration(5000);
        a.setInterpolator(new LinearInterpolator());
        a.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                setProgress(value);
                postInvalidate();
            }
        });
        a.start();
        a.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Toast.makeText(getContext(), "完成", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

    /**
     * 获取参数
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    private void obtainStyleAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.count_down, defStyleAttr, 0);
        int count=a.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr=a.getIndex(i);
            switch (attr){
                case R.styleable.count_down_center_bg:
                    centerBg=a.getColor(attr,centerBg);
                    break;
                case R.styleable.count_down_text:
                    mText=a.getString(attr);
                    break;
                case R.styleable.count_down_progress_color:
                    mProgressColor=a.getColor(attr,mProgressColor);
                    break;
                case R.styleable.count_down_text_color:
                    mTextColor=a.getColor(attr,mTextColor);
                    break;
                case R.styleable.count_down_text_size:
                    mTextSize=a.getDimensionPixelSize(attr,mTextSize);
                    break;
                case R.styleable.count_down_progress_width:
                    mProgressWidth=a.getDimensionPixelSize(attr,mProgressWidth);
                    break;
            }
        }
        a.recycle();
        mTextPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setDither(true);
        mTextPaint.setTextSize(mTextSize);
        mTextPaint.setColor(mTextColor);
        mTextPaint.setStyle(Paint.Style.FILL);


        mBgPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        mBgPaint.setDither(true);
        mBgPaint.setStyle(Paint.Style.STROKE);
        mBgPaint.setStrokeCap(Paint.Cap.ROUND);
        mBgPaint.setStrokeJoin(Paint.Join.ROUND);
        mBgPaint.setStrokeWidth(mProgressWidth);
        mBgPaint.setColor(mProgressColor);
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        /**
         * 当为wrap_content的时候，返回的大小为 （文本的长度+红色进度条的宽度*2+一个自定义的offset）
         */
        int result= (int) (getPaddingLeft()+getPaddingRight()+mTextPaint.measureText(mText)+mProgressWidth*2)+dp2px(offset);
        /**
         * 传入一个result，当widthMode为MeasureSpec.UNSPECIFIED的时候返回result，
         * 否则为设定的值
         */
        int width=resolveSize(result, widthMeasureSpec);
        int height=resolveSize(result,heightMeasureSpec);
        result=Math.min(width,height);
        setMeasuredDimension(result, result);
        mRadius=getMeasuredWidth()/2;

    }
    @Override
    protected synchronized void onDraw(Canvas canvas) {
        //画中间的圈
        mTextPaint.setColor(centerBg);
        canvas.drawCircle(mRadius, mRadius, mRadius-mProgressWidth/2, mTextPaint);
        //绘制文本
        mTextPaint.setColor(mTextColor);
        int baseX= (int) (mRadius-mTextPaint.measureText(mText)/2);
        int baseY= (int) (mRadius+(mTextPaint.getFontMetrics().bottom-mTextPaint.getFontMetrics().top)/2
                        -mTextPaint.getFontMetrics().bottom);
        canvas.drawText(mText, baseX, baseY, mTextPaint);
        /**
         * 绘制进度条，
         * 比如从startAngle从-90度的位置开始，endAngle为270位置（y的负轴位置）
         * 需要绘制的角度为
         * 270--90（开始）=360；
         * 270-0（开始）=270
         * 270-90（开始）=180
         * 所以sweepAngle=startAngle-270(endAngle)
         */
        int startAngle= (int) ((getProgress()*1.0f/getMax())*360)-90;
        canvas.drawArc(new RectF(0+mProgressWidth/2, 0+mProgressWidth/2,mRadius*2-mProgressWidth/2, mRadius*2-mProgressWidth/2), startAngle, endAngle-startAngle, false, mBgPaint);
    }
    /**
     * dp2px
     * -90 360  0 270 90 180
     * @param value
     * @return px
     */
    private int dp2px(float value) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics());
    }

    /**
     * sp2px
     *
     * @param value
     * @return px
     */
    private int sp2px(float value) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, value, getResources().getDisplayMetrics());
    }
}

vv_小虫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android自定义view之（CSDN应用splash界面的倒计时View）

最近有点闲，准确来说是很闲，每天早上要在公车上度过一段时间，一般我就会打开csdn应用看看别人的博客，哎哟~！看到CSDN欢迎页的倒计时view还不错哦，正好最近在学自定义View,所以就捣腾了一下，以前感觉遥不可及的东西真正做起来也不难哈，菜鸟一个，大牛勿喷^~^！！先看一下效果图：思路： 1、肯定是自定义个View了，偷懒下一个，为了不自己定义progress就直接继承Prog
复制链接

扫一扫