自定义View之仿启动页圆形倒计时

最新推荐文章于 2021-12-20 19:31:19 发布

meijing11

最新推荐文章于 2021-12-20 19:31:19 发布

阅读量387

点赞数

分类专栏： Android自定义View

本文链接：https://blog.csdn.net/meijing11/article/details/83503665

版权

Android自定义View 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先来看一下效果图

使用场景

有时候，在应用的启动页需要有一个圆形View的倒计时，倒计时结束后跳转页面

主要思路

首先对于View我们要考虑整个View的测量问题，当View被设置为wrap_content时，默认View的宽高会被设置成match_parent.所以我们需要在onMeasure（）为其设置默认值
对于整个View我们把它分为4个部分：中心圆，外部圆环，覆盖在中心圆上的文字，以及覆盖在外部圆环上的动态进度圆环

代码实现

1.我们在attrs.xml自定义一些属性

2.自定义CountdownCircleView，在自定义View中，获取自定义属性配置信息

    val mTypeArray=mContext.obtainStyledAttributes(attrs, R.styleable.CountdownCircleView)
       mOutCircleColor=mTypeArray.getColor(R.styleable.CountdownCircleView_out_circle_color,mOutCircleColor)
       mOutCircleWidth=mTypeArray.getDimension(R.styleable.CountdownCircleView_out_circle_width,mOutCircleWidth)
       mInCircleColor=mTypeArray.getColor(R.styleable.CountdownCircleView_in_circle_color,mInCircleColor)
       mCountDownCircleColor=mTypeArray.getColor(R.styleable.CountdownCircleView_count_down_circle_color,mCountDownCircleColor)
       mCountDownStr=mTypeArray.getInt(R.styleable.CountdownCircleView_count_down_str,mCountDownStr)
       mCountDownTextColor=mTypeArray.getColor(R.styleable.CountdownCircleView_count_down_text_color,mCountDownTextColor)
       mCountDownTextSize=mTypeArray.getDimension(R.styleable.CountdownCircleView_count_down_text_size,mCountDownTextSize)
       mIsAutoPlayer=mTypeArray.getBoolean(R.styleable.CountdownCircleView_is_auth_player,mIsAutoPlayer)
       //释放
       mTypeArray.recycle()

3.在onMeasure（）中，根据测量模式为其View设置默认值

      /**
      * 对View进行测量
      * 1.我们需要考虑View为wrap_content时的宽高尺寸，我们需要给予一个默认值，
      *  否则将会和match_parent一样，占据整个父布局
      */
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec)
         var width=getMeasureWidth(widthMeasureSpec)
         var height=getMeasureHeight(heightMeasureSpec)
         setMeasuredDimension(width,height)
     }
 
     /**
      * 对View的宽度进行测量
      */
     private fun getMeasureWidth(widthMeasureSpec: Int): Int {
         val mode=MeasureSpec.getMode(widthMeasureSpec)
         var width=MeasureSpec.getSize(widthMeasureSpec)
         when(mode){
             MeasureSpec.EXACTLY ->{//match_parent  100dp
             }
             MeasureSpec.AT_MOST ->{//wrap_content
                 width=100
             }
             MeasureSpec.UNSPECIFIED ->{
             }
         }
         return  width
     }
     /**
      * 对View的高度进行测量
      */
     private fun getMeasureHeight(heightMeasureSpec: Int): Int {
         val mode=MeasureSpec.getMode(heightMeasureSpec)
         var height=MeasureSpec.getSize(heightMeasureSpec)
         when(mode){
             MeasureSpec.EXACTLY ->{//match_parent  100dp
             }
             MeasureSpec.AT_MOST ->{//wrap_content
                 height=100
             }
             MeasureSpec.UNSPECIFIED ->{
             }
         }
         return  height
     }

根据用户设置的倒计时时间mCountDownStr*1000来获取总共有多少毫秒，然后我们每50毫秒累计一次时间，将相加的时间相比，判断时否等于，若等于则表示时间已到，停止倒计时。因此可以使runable来实现

  /**
    * 1. 计算整个外部倒计时圆环的进度，整个进度最大值为100，
    * 2. 计算显示的时间，因为是50毫秒一次，所以相当于50毫秒时间要加一次，所以走的时间为mCurrentCountDownTime+=50/1000 单位为妙
    *    因为是剩余时间，所以要用总时间来减 mCountDownStr-mCurrentCountDownTime/1000
    */
   override fun run() {
       //计算显示的时间
       mCurrentCountDownTime+=50
       if(mCurrentCountDownTime%1000==0){
           mShowText=if((mCountDownStr-(mCurrentCountDownTime/1000))==0) "跳过" else (mCountDownStr-mCurrentCountDownTime/1000).toString()+"秒"
       }
       //计算进度
       mCurrentProgress+=5/(mCountDownStr*1.0f).toInt()
       //刷新
       invalidate()
       //再次发送延时消息
       if(mCurrentProgress>=100){
           removeCallbacks { this }
       }else{
           postDelayed(this,50)
       }
       Log.d(TAG,"mShowText:$mShowText ->mCurrentCountDownTime:$mCurrentCountDownTime")

   }

在View被销毁的时候需要通知延时消息

  /**
   * 当View从界面移除时触发
   */
  override fun onDetachedFromWindow() {
      super.onDetachedFromWindow()
      stopCountDown()
      Log.d(TAG,"onDetachedFromWindow")
  }
  /**
   * 倒计时停止
   */
    fun stopCountDown() {
      removeCallbacks(this)
      mIsRunning=false
      mCurrentCountDownTime=0
      mCurrentProgress=0
      mShowText=""
  }

当我们知道进度后，现在就需要在onDraw()中对View进行绘制，绘制后才能在界面显示

   /**
   * 对View进行绘制
   */
  override fun onDraw(canvas: Canvas) {
      super.onDraw(canvas)
      //1.计算中心点x,y的坐标
      val mCenterX=width/2
      val mCenterY=height/2
      //2.计算坐标  因为是圆，所以需要考虑设置的宽高不相等时的情况，在这里我们取最小边的尺寸，用是要处理padding的影响
      var mRadius=if(width>height) (height-paddingTop-paddingBottom-mOutCircleWidth*2)/2 else  (width-paddingLeft-paddingRight-mOutCircleWidth*2)/2
      //3.绘制内部圆
      //设置画笔填充模式
      mPaint.style=Paint.Style.FILL
      //设置抗锯齿
      mPaint.isAntiAlias=true
      //设置画笔绘制内容的颜色
      mPaint.color=mInCircleColor
      //绘制圆
      canvas.drawCircle(mCenterX.toFloat(), mCenterY.toFloat(),mRadius,mPaint)
      //4.绘制外部圆
      //设置画笔填充模式
      mPaint.style=Paint.Style.STROKE
      //设置画笔的宽度
      mPaint.strokeWidth=mOutCircleWidth
      //设置画笔绘制内容的颜色
      mPaint.color=mOutCircleColor
      //绘制
      canvas.drawCircle(mCenterX.toFloat(), mCenterY.toFloat(), mRadius.toFloat(),mPaint)
      //5.绘制文字
      if(!mShowText.isEmpty()) {
          mPaint.style = Paint.Style.FILL
          //设置颜色
          mPaint.color = mCountDownTextColor
          //设置中心对称
          mPaint.textAlign = Paint.Align.CENTER
          //设置字体的大小
          mPaint.textSize = mCountDownTextSize
          //设置字体颜色
          mPaint.color = mCountDownTextColor
          val mFontMetrics=mPaint.fontMetrics
          val bottom=mFontMetrics.bottom
          val top=mFontMetrics.top
          canvas.drawText(mShowText, mCenterX.toFloat(), mCenterY-(top+bottom)/2, mPaint)
      }
      //6.绘制环形
      if(mCurrentProgress>=0){
          val oval=RectF(mCenterX-mRadius,mCenterY-mRadius,mCenterX+mRadius,mCenterY+mRadius)
          //设置画笔颜色
          mPaint.color=mCountDownCircleColor
          //设置画笔填充模式
          mPaint.style=Paint.Style.STROKE
          //设置画笔的宽度
          mPaint.strokeWidth=mOutCircleWidth
          //画圆弧
          canvas.drawArc(oval,-90f, (360-360*mCurrentProgress/100).toFloat(),false,mPaint)
          if(mCurrentProgress==100){
              mListener?.onCountDownFinish()
          }
      }
  }

完整代码

1.自定义属性

   <declare-styleable name="CountdownCircleView">
       <!--倒计时时间数字-->
       <attr name="count_down_str"  format="integer"/>
       <!--倒计时的字体的颜色-->
       <attr name="count_down_text_color" format="color"/>
       <!--倒计时文字的大小-->
       <attr name="count_down_text_size" format="dimension"/>
       <!--实心圆之外部圆环的颜色-->
       <attr name="out_circle_color" format="color"/>
       <!--实心圆之内部圆的颜色-->
       <attr name="in_circle_color" format="color"/>
       <!--实心圆之倒计时的圆环的颜色-->
       <attr name="count_down_circle_color" format="color"/>
       <!--实心圆之外部圆环的宽度-->
       <attr name="out_circle_width" format="dimension"/>
       <!--是否自动实现倒计时功能-->
       <attr name="is_auth_player" format="boolean"/>
   </declare-styleable>

2.自定义CountdownCircleView

	/**
	 
	 * Time: 2018/10/19 15:17
	 * 描述：启动页圆形的倒计时
	 *      1.可自定义实心外部圆颜色和宽度
	 *      2.可自定义实心内部圆的颜色
	 *      3.可自定义倒计时时圆圈的颜色
	 *      4.可自定义中间文字的颜色和字体以及初始时间
	 *      5.倒计时是在界面添加到界面时就触发了
	 */
	
	class  CountdownCircleView @JvmOverloads constructor(
	        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
	) : View(context, attrs, defStyleAttr),Runnable {
	
	    private val TAG="CountdownCircleView"
	    /**倒计时字体时间  默认5秒*/
	    private var mCountDownStr=5
	    /**圆中心显示的文字*/
	    private var mShowText=""
	    /**倒计时字体大小*/
	    private var mCountDownTextSize=30f
	    /**倒计时字体颜色*/
	    private var mCountDownTextColor=Color.WHITE
	    /**实心圆之外部圆环的颜色*/
	    private var mOutCircleColor=Color.GRAY
	    /**实心圆之外部圆环的宽度*/
	    private var mOutCircleWidth=15f
	    /**实心圆的内部圆的颜色*/
	    private var mInCircleColor=Color.GREEN
	    /**倒计时圆环的颜色*/
	    private var mCountDownCircleColor=Color.RED
	    /**是否自动触发倒计时功能 默认true View被添加到界面时触发 false 需要自己触发*/
	    private var mIsAutoPlayer=true
	    /**是否正在倒计时*/
	    private var mIsRunning=false
	    /**倒计时 绘制倒计时圆环的进度 0-100 */
	    private var mCurrentProgress=0
	    /**当前已经倒计时过去了多少时间  毫秒*/
	    private var mCurrentCountDownTime=0
	    /**事件监听*/
	    private var mListener:OnCountDownListener?=null
	    /**画笔*/
	    private val mPaint:Paint by lazy {
	        Paint()
	    }
	
	    init {
	        initAttrs(context,attrs)
	    }
	    /**
	     * 初始化 获取用户自定义属性
	     */
	    private fun initAttrs(mContext: Context, attrs: AttributeSet?) {
	        val mTypeArray=mContext.obtainStyledAttributes(attrs, R.styleable.CountdownCircleView)
	        mOutCircleColor=mTypeArray.getColor(R.styleable.CountdownCircleView_out_circle_color,mOutCircleColor)
	        mOutCircleWidth=mTypeArray.getDimension(R.styleable.CountdownCircleView_out_circle_width,mOutCircleWidth)
	        mInCircleColor=mTypeArray.getColor(R.styleable.CountdownCircleView_in_circle_color,mInCircleColor)
	        mCountDownCircleColor=mTypeArray.getColor(R.styleable.CountdownCircleView_count_down_circle_color,mCountDownCircleColor)
	        mCountDownStr=mTypeArray.getInt(R.styleable.CountdownCircleView_count_down_str,mCountDownStr)
	        mCountDownTextColor=mTypeArray.getColor(R.styleable.CountdownCircleView_count_down_text_color,mCountDownTextColor)
	        mCountDownTextSize=mTypeArray.getDimension(R.styleable.CountdownCircleView_count_down_text_size,mCountDownTextSize)
	        mIsAutoPlayer=mTypeArray.getBoolean(R.styleable.CountdownCircleView_is_auth_player,mIsAutoPlayer)
	        //释放
	        mTypeArray.recycle()
	        setOnClickListener {
	           var isJumpActvity= mListener?.onViewClick(mCurrentCountDownTime/1000,mCountDownStr)
	           if(isJumpActvity==true) {
	               stopCountDown()
	           }
	        }
	    }
	
	    /**
	     * 对View进行测量
	     * 1.我们需要考虑View为wrap_content时的宽高尺寸，我们需要给予一个默认值，
	     *  否则将会和match_parent一样，占据整个父布局
	     */
	    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
	        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
	        var width=getMeasureWidth(widthMeasureSpec)
	        var height=getMeasureHeight(heightMeasureSpec)
	        setMeasuredDimension(width,height)
	    }
	
	    /**
	     * 对View的宽度进行测量
	     */
	    private fun getMeasureWidth(widthMeasureSpec: Int): Int {
	        val mode=MeasureSpec.getMode(widthMeasureSpec)
	        var width=MeasureSpec.getSize(widthMeasureSpec)
	        when(mode){
	            MeasureSpec.EXACTLY ->{//match_parent  100dp
	            }
	            MeasureSpec.AT_MOST ->{//wrap_content
	                width=100
	            }
	            MeasureSpec.UNSPECIFIED ->{
	            }
	        }
	        return  width
	    }
	    /**
	     * 对View的高度进行测量
	     */
	    private fun getMeasureHeight(heightMeasureSpec: Int): Int {
	        val mode=MeasureSpec.getMode(heightMeasureSpec)
	        var height=MeasureSpec.getSize(heightMeasureSpec)
	        when(mode){
	            MeasureSpec.EXACTLY ->{//match_parent  100dp
	            }
	            MeasureSpec.AT_MOST ->{//wrap_content
	                height=100
	            }
	            MeasureSpec.UNSPECIFIED ->{
	            }
	        }
	        return  height
	    }
	
	    /**
	     * 对View进行绘制
	     */
	    override fun onDraw(canvas: Canvas) {
	        super.onDraw(canvas)
	        //1.计算中心点x,y的坐标
	        val mCenterX=width/2
	        val mCenterY=height/2
	        //2.计算坐标  因为是圆，所以需要考虑设置的宽高不相等时的情况，在这里我们取最小边的尺寸，用是要处理padding的影响
	        var mRadius=if(width>height) (height-paddingTop-paddingBottom-mOutCircleWidth*2)/2 else  (width-paddingLeft-paddingRight-mOutCircleWidth*2)/2
	        //3.绘制内部圆
	        //设置画笔填充模式
	        mPaint.style=Paint.Style.FILL
	        //设置抗锯齿
	        mPaint.isAntiAlias=true
	        //设置画笔绘制内容的颜色
	        mPaint.color=mInCircleColor
	        //绘制圆
	        canvas.drawCircle(mCenterX.toFloat(), mCenterY.toFloat(),mRadius,mPaint)
	        //4.绘制外部圆
	        //设置画笔填充模式
	        mPaint.style=Paint.Style.STROKE
	        //设置画笔的宽度
	        mPaint.strokeWidth=mOutCircleWidth
	        //设置画笔绘制内容的颜色
	        mPaint.color=mOutCircleColor
	        //绘制
	        canvas.drawCircle(mCenterX.toFloat(), mCenterY.toFloat(), mRadius.toFloat(),mPaint)
	        //5.绘制文字
	        if(!mShowText.isEmpty()) {
	            mPaint.style = Paint.Style.FILL
	            //设置颜色
	            mPaint.color = mCountDownTextColor
	            //设置中心对称
	            mPaint.textAlign = Paint.Align.CENTER
	            //设置字体的大小
	            mPaint.textSize = mCountDownTextSize
	            //设置字体颜色
	            mPaint.color = mCountDownTextColor
	            val mFontMetrics=mPaint.fontMetrics
	            val bottom=mFontMetrics.bottom
	            val top=mFontMetrics.top
	            canvas.drawText(mShowText, mCenterX.toFloat(), mCenterY-(top+bottom)/2, mPaint)
	        }
	        //6.绘制环形
	        if(mCurrentProgress>=0){
	            val oval=RectF(mCenterX-mRadius,mCenterY-mRadius,mCenterX+mRadius,mCenterY+mRadius)
	            //设置画笔颜色
	            mPaint.color=mCountDownCircleColor
	            //设置画笔填充模式
	            mPaint.style=Paint.Style.STROKE
	            //设置画笔的宽度
	            mPaint.strokeWidth=mOutCircleWidth
	            //画圆弧
	            canvas.drawArc(oval,-90f, (360-360*mCurrentProgress/100).toFloat(),false,mPaint)
	            if(mCurrentProgress==100){
	                mListener?.onCountDownFinish()
	            }
	        }
	    }
	
	
	    /**
	     * 当View被添加到界面时触发
	     */
	    override fun onAttachedToWindow() {
	        super.onAttachedToWindow()
	        if(mIsAutoPlayer) startCountDown()
	        Log.d(TAG,"onAttachedToWindow:$mIsAutoPlayer")
	    }
	
	
	
	
	    /**
	     * 倒计时开始
	     */
	      fun startCountDown() {
	        if(mIsRunning) return
	        mIsRunning=true
	        mCurrentCountDownTime=0
	        mCurrentProgress=0
	        mShowText=mCountDownStr.toString()+"秒"
	        postDelayed(this,50)
	    }
	
	    /**
	     * 当View从界面移除时触发
	     */
	    override fun onDetachedFromWindow() {
	        super.onDetachedFromWindow()
	        stopCountDown()
	        Log.d(TAG,"onDetachedFromWindow")
	    }
	    /**
	     * 倒计时停止
	     */
	      fun stopCountDown() {
	        removeCallbacks(this)
	        mIsRunning=false
	        mCurrentCountDownTime=0
	        mCurrentProgress=0
	        mShowText=""
	    }
	
	    /**
	     * 1. 计算整个外部倒计时圆环的进度，整个进度最大值为100，
	     * 2. 计算显示的时间，因为是50毫秒一次，所以相当于50毫秒时间要加一次，所以走的时间为mCurrentCountDownTime+=50/1000 单位为妙
	     *    因为是剩余时间，所以要用总时间来减 mCountDownStr-mCurrentCountDownTime/1000
	     */
	    override fun run() {
	        //计算显示的时间
	        mCurrentCountDownTime+=50
	        if(mCurrentCountDownTime%1000==0){
	            mShowText=if((mCountDownStr-(mCurrentCountDownTime/1000))==0) "跳过" else (mCountDownStr-mCurrentCountDownTime/1000).toString()+"秒"
	        }
	        //计算进度
	        mCurrentProgress+=5/(mCountDownStr*1.0f).toInt()
	        //刷新
	        invalidate()
	        //再次发送延时消息
	        if(mCurrentProgress>=100){
	            removeCallbacks { this }
	        }else{
	            postDelayed(this,50)
	        }
	        Log.d(TAG,"mShowText:$mShowText ->mCurrentCountDownTime:$mCurrentCountDownTime")
	
	    }
	
	
	    interface  OnCountDownListener{
	        /**view点击事件回调*/
	        fun  onViewClick(mCurrentTime:Int,mAllTime:Int):Boolean
	        /**倒计时结束回调*/
	        fun  onCountDownFinish()
	    }
	
	    fun setCountDownListener(listener: OnCountDownListener){
	        this.mListener=listener
	    }
	}

布局

   <com.view.circleview.widget.CountdownCircleView
    android:id="@+id/mCustomCircleView"
    android:layout_width="80dp"
    android:layout_height="80dp"
    app:out_circle_color="#A9A9A9"
    app:in_circle_color="#D3D3D3"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"/>

调用

  mCustomCircleView.setCountDownListener(object : CountdownCircleView.OnCountDownListener {
        override fun onViewClick(mCurrentTime: Int, mAllTime: Int):Boolean {
            startActivity(Intent(this@MainActivity,LoginActivity::class.java))
            return true
        }

        override fun onCountDownFinish() {

         }

    })

meijing11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义View之仿启动页圆形倒计时

先来看一下效果图使用场景有时候，在应用的启动页需要有一个圆形View的倒计时，倒计时结束后跳转页面主要思路首先对于View我们要考虑整个View的测量问题，当View被设置为wrap_content时，默认View的宽高会被设置成match_parent.所以我们需要在onMeasure（）为其设置默认值对于整个View我们把它分为4个部分：中心圆，外部圆环，覆盖在...
复制链接

扫一扫