5分钟带你了解Android Progress Bar 3

1、前言

书接上一回 5分钟带你了解Android Progress Bar 2

上一回说到，要自定义ProgressBar，自定义一个ProgressBar，但功用不如原生的完好版！！首要还是用来了解怎么写一个进展条，然后引出后面的，功用肯定没有原生的那么齐全啦。

假如您有任何疑问、对文章写的不满意、发现错误或许有更好的办法，欢迎在谈论、私信或邮件中提出，十分感谢您的支撑。

看看作用先

2、条形ProgressBar简单仿写

（1）预备好Attribute

attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="ZProgressBar2">
    <attr name="zTextColor" format="color" />
    <attr name="zBarHeight" format="dimension"/>
    <attr name="zMax" format="float" />
    <attr name="zProgress" format="float" />
    <attr name="zProgressColor" format="string" />
    <attr name="zRemainColor" format="string" />
    <attr name="zTextVisibility" format="boolean"/>
  </declare-styleable>
</resources>

随意想点特点啦

（2）新建一个ZProgressBar2.kt

class ZProgressBar2 @JvmOverloads constructor(
  context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {}

姓名随意，新建文件 -> 继承自 View -> 由编译器补全代码。

选@JvmOverloads的这条！这样Java也能用了

（3）预备好一些变量声明

声明啥，你自己看着办就行。我这儿根本便是预备了，Attribute中特点

/**
 * 默许进展条色彩
 */
private val DEFAULT_PROGRESS_COLOR: Int = Color.parseColor("#FFA5E05B")
private val DEFAULT_REMAIN_COLOR: Int = Color.parseColor("#FFFFFFFF")
private val DEFAULT_TEXT_COLOR: Int = Color.parseColor("#FFFFFFFF")
​
/**
 * 默许进展
 */
private val DEFAULT_MAX: Float = 100f
private val DEFAULT_PROGRESS: Float = 0f
​
/**
 * 进展条最大值
 */
var mMax: Float = DEFAULT_MAX
var mMin: Float = DEFAULT_PROGRESS
/**
 * 进展条当时进展值
 */
var mProgress: Float = DEFAULT_PROGRESS
/**
 * 进展条色彩
 * 完结
 */
var mProgressColor = DEFAULT_PROGRESS_COLOR
/**
 * 进展条色彩
 * 剩下
 */
var mRemainColor = DEFAULT_REMAIN_COLOR
/**
 * 进展条高度
 */
var mBarHeight = 30f.dp
/**
 * 剩下进展区域
 */
private val mRemainRectF = RectF(0f, 0f, 0f, 0f)
​
/**
 * 已完结进展区域
 */
private val mProgressRectF = RectF(0f, 0f, 0f, 0f)
​
/**
 * ANTI_ALIAS_FLAG 抗锯齿
 * isAntiAlias 防抖动
 * Paint.Cap.ROUND 笔画凸出成半圆形
 */
private val mPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
  strokeCap = Paint.Cap.ROUND
  isAntiAlias = true
}
​
/**
 * 进展文字色彩
 */
private var mTextColor = Color.WHITE
private var mTextVisibility = false
private var progressFormat = DecimalFormat("#")
​

（4）预备好读取Attribute的办法

记得在init中调用哈

/**
 * 读取自定义的布局特点
 */
private fun initArr(attrs: AttributeSet?) {
  val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ZProgressBar2)
  typedArray.run {
    mMax = getFloat(R.styleable.ZProgressBar2_zMax, mMax)
    mProgress = getFloat(R.styleable.ZProgressBar2_zProgress, mProgress)
    mProgressColor =
      getColor(R.styleable.ZProgressBar2_zProgressColor, DEFAULT_PROGRESS_COLOR)
    mRemainColor =
      getColor(R.styleable.ZProgressBar2_zRemainColor, DEFAULT_REMAIN_COLOR)
    mBarHeight = getDimension(R.styleable.ZProgressBar2_zBarHeight, 30f.dp)
    mTextColor = getColor(
      R.styleable.ZProgressBar2_zTextColor,
      DEFAULT_REMAIN_COLOR
     )
    mTextVisibility =
      getBoolean(R.styleable.ZProgressBar2_zTextVisibility, true)
   }
  typedArray.recycle()
}
init{
    initArr(attrs)
}

（5）在onDraw中制作

首要代码就在这了，没多少，看注释！

override fun onDraw(canvas: Canvas?) {
  super.onDraw(canvas)
  calculateProgressRect()
  canvas?.run {
      //先画剩下的，要让进展压在上面
    mPaint.color = mRemainColor
    //进展和剩下进展，便是两个圆角方形叠在一同
    drawRoundRect(mRemainRectF, mBarHeight / 2, mBarHeight / 2, mPaint)
    //再画进展
    mPaint.color = mProgressColor
    drawRoundRect(mProgressRectF, mBarHeight / 2, mBarHeight / 2, mPaint)
    //然后文字在最上层
    mPaint.textSize = mBarHeight * 0.5f
    //格式化Progress
    var mCurrentDrawText: String = progressFormat.format(mProgress * 100 / mMax)
    //画文字的根本操作，先测一下宽度
    val mDrawTextWidth = mPaint.measureText(mCurrentDrawText)
    //要判别下进展的宽度，够不够画文字出来
    if (mTextVisibility && mProgress > 0 && mProgressRectF.right > mDrawTextWidth) {
        mPaint.color = mTextColor
      drawText(
        mCurrentDrawText,
        mProgressRectF.right - mDrawTextWidth - mBarHeight * 0.4f,
          //descent/ascent 关于文字的高度能够去看看相关文章
         (height / 2.0f - (mPaint.descent() + mPaint.ascent()) / 2.0f).toInt().toFloat(),
        mPaint
       )
     }
   }
}
/**
 * 很惯例的核算一个View的四个坐标的办法
 */
private fun calculateProgressRect() {
  val ttop = (height - mBarHeight) / 2.0f
  val bbottom = (height + mBarHeight) / 2.0f
  mProgressRectF.run {
    left = paddingLeft.toFloat()
    top = ttop
    /**
     * 核算已完结进展的长度
     */
    right = (width - paddingLeft - paddingRight) / (mMax * 1.0f) * mProgress + paddingLeft
    bottom = bbottom
   }
  mRemainRectF.run {
    left = paddingLeft.toFloat()
    top = ttop
    right = (width - paddingRight).toFloat()
    bottom = bbottom
   }
}

（6）露出更新办法

重写下set办法就好了，都去调用invalidate()办法。

/**
 * 进展条最大值
 */
var mMax: Float = DEFAULT_MAX
  set(value) {
    field = value
    invalidate()
   }
​
var mMin: Float = DEFAULT_PROGRESS
  set(value) {
    field = value
    invalidate()
   }
​
/**
 * 进展条当时进展值
 */
@set:Synchronized
var mProgress: Float = DEFAULT_PROGRESS
  set(value) {
    if (value == field) {
      // No change from current.
      return
     }
          //不能超过最大值，最小值啊
    field = value.coerceIn(mMin, mMax)
    invalidate()
   }
​
/**
 * 进展条色彩
 * 完结
 */
var mProgressColor = DEFAULT_PROGRESS_COLOR
  set(value) {
    field = value
    invalidate()
   }
​
/**
 * 进展条色彩
 * 剩下
 */
var mRemainColor = DEFAULT_REMAIN_COLOR
  set(value) {
    field = value
    invalidate()
   }
​
/**
 * 进展条高度
 */
var mBarHeight = 30f.dp
  set(value) {
    field = value
    invalidate()
   }

没啦，就这么多，一个看起来差不多的就行了，简单版～

（7）完好代码

下面是全部代码，以及调用代码

import android.animation.ObjectAnimator
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.view.View
import com.nf.framework.utillib.ext.dp
import com.nf.module_test.R
import java.text.DecimalFormat
/**
 * 仿制ProgressBar
 */
class ZProgressBar2 @JvmOverloads constructor(
  context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
  /**
   * 默许进展条色彩
   */
  private val DEFAULT_PROGRESS_COLOR: Int = Color.parseColor("#FFA5E05B")
  private val DEFAULT_REMAIN_COLOR: Int = Color.parseColor("#FFFFFFFF")
  private val DEFAULT_TEXT_COLOR: Int = Color.parseColor("#FFFFFFFF")
​
  /**
   * 默许进展
   */
  private val DEFAULT_MAX: Float = 100f
  private val DEFAULT_PROGRESS: Float = 0f
​
  /**
   * 进展条最大值
   */
  var mMax: Float = DEFAULT_MAX
    set(value) {
      field = value
      invalidate()
     }
​
  var mMin: Float = DEFAULT_PROGRESS
    set(value) {
      field = value
      invalidate()
     }
​
  /**
   * 进展条当时进展值
   */
  @set:Synchronized
  var mProgress: Float = DEFAULT_PROGRESS
    set(value) {
      if (value == field) {
        // No change from current.
        return
       }
      field = value.coerceIn(mMin, mMax)
      invalidate()
     }
​
  /**
   * 进展条色彩
   * 完结
   */
  var mProgressColor = DEFAULT_PROGRESS_COLOR
    set(value) {
      field = value
      invalidate()
     }
​
  /**
   * 进展条色彩
   * 剩下
   */
  var mRemainColor = DEFAULT_REMAIN_COLOR
    set(value) {
      field = value
      invalidate()
     }
​
  /**
   * 进展条高度
   */
  var mBarHeight = 30f.dp
    set(value) {
      field = value
      invalidate()
     }
​
  /**
   * 剩下进展区域
   */
  private val mRemainRectF = RectF(0f, 0f, 0f, 0f)
​
  /**
   * 已完结进展区域
   */
  private val mProgressRectF = RectF(0f, 0f, 0f, 0f)
​
  /**
   * ANTI_ALIAS_FLAG 抗锯齿
   */
  private val mPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    /**
     * 笔画凸出成半圆形
     */
    strokeCap = Paint.Cap.ROUND
    /**
     * 防抖动
     */
    isAntiAlias = true
   }
​
  /**
   * 进展文字色彩
   */
  private var mTextColor = Color.WHITE
  private var mTextVisibility = false
  private var progressFormat = DecimalFormat("#")
​
  init {
    initArr(attrs)
   }
  /**
   * 读取自定义的布局特点
   */
  private fun initArr(attrs: AttributeSet?) {
    val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ZProgressBar2)
    typedArray.run {
      mMax = getFloat(R.styleable.ZProgressBar2_zMax, mMax)
      mProgress = getFloat(R.styleable.ZProgressBar2_zProgress, mProgress)
      mProgressColor =
        getColor(R.styleable.ZProgressBar2_zProgressColor, DEFAULT_PROGRESS_COLOR)
      mRemainColor =
        getColor(R.styleable.ZProgressBar2_zRemainColor, DEFAULT_REMAIN_COLOR)
      mBarHeight = getDimension(R.styleable.ZProgressBar2_zBarHeight, 30f.dp)
      mTextColor = getColor(
        R.styleable.ZProgressBar2_zTextColor,
        DEFAULT_REMAIN_COLOR
       )
      mTextVisibility =
        getBoolean(R.styleable.ZProgressBar2_zTextVisibility, true)
     }
    typedArray.recycle()
   }
​
  override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    calculateProgressRect()
    canvas?.run {
      mPaint.color = mRemainColor
      drawRoundRect(mRemainRectF, mBarHeight / 2, mBarHeight / 2, mPaint)
      mPaint.color = mProgressColor
      drawRoundRect(mProgressRectF, mBarHeight / 2, mBarHeight / 2, mPaint)
      mPaint.textSize = mBarHeight * 0.5f
      var mCurrentDrawText: String = progressFormat.format(mProgress * 100 / mMax)
      mPaint.color = mTextColor
      val mDrawTextWidth = mPaint.measureText(mCurrentDrawText)
      if (mTextVisibility && mProgress > 0 && mProgressRectF.right > mDrawTextWidth) {
        drawText(
          mCurrentDrawText,
          mProgressRectF.right - mDrawTextWidth - mBarHeight * 0.4f,
           (height / 2.0f - (mPaint.descent() + mPaint.ascent()) / 2.0f).toInt().toFloat(),
          mPaint
         )
       }
     }
​
   }
​
  private fun calculateProgressRect() {
    val ttop = (height - mBarHeight) / 2.0f
    val bbottom = (height + mBarHeight) / 2.0f
    mProgressRectF.run {
      left = paddingLeft.toFloat()
      top = ttop
      /**
       * 核算已完结进展的长度
       */
      right = (width - paddingLeft - paddingRight) / (mMax * 1.0f) * mProgress + paddingLeft
      bottom = bbottom
     }
    mRemainRectF.run {
      left = paddingLeft.toFloat()
      top = ttop
      right = (width - paddingRight).toFloat()
      bottom = bbottom
     }
   }
}

<com.nf.module_test.seekbar.custom.ZProgressBar2
  android:id="@+id/zpb_01"
  android:layout_width="match_parent"
  android:layout_height="40dp"
  app:zBarHeight="40dp"
  app:zTextColor="#ffffff"
  app:zMax="100"
  app:zProgress="50" />

作用如下

3、圆形ProgressBar

嘻嘻嘻，直的写出来了，圆的也的有一个吧，交互也得有吧？就在这个基础上，咱们再扩展下

（1）依然咱们需求预备好Attribute

这儿咱们直接在本来的基础上加一点吧

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="ZProgressBar2">
    <attr name="zTextColor" format="color" />
    <attr name="zBarHeight" format="dimension" />
    <attr name="zMax" format="float" />
    <attr name="zProgress" format="float" />
    <attr name="zProgressColor" format="string" />
    <attr name="zRemainColor" format="string" />
    <attr name="zTextVisibility" format="boolean" />
    <attr name="zShape" format="integer">
      <enum name="line" value="0"/>
      <enum name="oval" value="1"/>
    </attr>
    <attr name="zFullDegree" format="integer" />
    <attr name="zAnimationDuration" format="integer" />
    <attr name="zDragEnabled" format="boolean" />
  </declare-styleable>
</resources>

（2）持续在ZProgressBar2中添加一些变量声明

还有一些变量在后面看吧

/**
 * 样式
 */
private var mShape = DEFAULT_SHAPE
/**
 *  进展条的视点
 */
private var mMaxDegree: Int = DEFAULT_FULL_DEGREE
  set(value) {
    field = value.coerceIn(0,360)
   }
/**
 * Thumb对象
 */
private var mThumbDraw: Drawable? = null
/**
 * Thumb对象约束宽高
 */
private var mThumbRadius = DEFAULT_BAR_WIDTH * 1.2f
/**
 * TODO
 */
private var mAnimationDuration: Int = 0
/**
 * 是否能够拖动
 */
private var mDragEnabled: Boolean = true
/**
 * 圆弧的半径
 */
private var mCircleRadius: Float = 0f
/**
 * 圆弧圆心方位
 */
private var centerX: Int = 0
/**
 * 圆弧圆心方位
 */
private var centerY: Int = 0
private var mWidth: Int = 0
private var mHeight: Int = 0

（3）预备好读取Attribute的办法

这儿咱们接着之前的写好就行了

private fun initArr(attrs: AttributeSet?) {
  val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ZProgressBar2)
  typedArray.run {
    mMax = getFloat(R.styleable.ZProgressBar2_zMax, mMax)
    mProgress = getFloat(R.styleable.ZProgressBar2_zProgress, mProgress)
    mProgressColor = getColor(R.styleable.ZProgressBar2_zProgressColor, DEFAULT_PROGRESS_COLOR)
    mRemainColor = getColor(R.styleable.ZProgressBar2_zRemainColor, DEFAULT_REMAIN_COLOR)
    mBarHeight = getDimension(R.styleable.ZProgressBar2_zBarHeight, DEFAULT_BAR_WIDTH)
    mTextColor = getColor(R.styleable.ZProgressBar2_zTextColor,DEFAULT_REMAIN_COLOR)
    mTextVisibility = getBoolean(R.styleable.ZProgressBar2_zTextVisibility, tr
    mMaxDegree = getInteger(R.styleable.ZProgressBar2_zFullDegree, DEFAULT_FULL_DEGREE)
    mAnimationDuration = getInteger(R.styleable.ZProgressBar2_zAnimationDuration, 500)
    mDragEnabled = getBoolean(R.styleable.ZProgressBar2_zDragEnabled, DEFAULT_ENABLE_TOUCH)
    mShape = getInteger(R.styleable.ZProgressBar2_zShape, DEFAULT_SHAPE)
    mThumbDraw = getDrawable(R.styleable.ZProgressBar2_zThumbDrawable)
    mThumbRadius = getDimension(R.styleable.ZProgressBar2_zThumbRadius, DEFAULT_BAR_WIDTH * 1.2f)
   }
  typedArray.recycle()
}

（4）处理onMeasure

/**
 * left：矩形左面线条离 y 轴的间隔
 * top：矩形上面线条离 x 轴的间隔
 * right：矩形右边线条离 y 轴的间隔
 * bottom：矩形底部线条离 x 轴的间隔
 * 这儿我没有专门去处理layout_height、width，只处理固定宽高，交给你自己做啦
 */
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    if (mWidth == 0 || mHeight == 0) {
        mWidth = measuredWidth
        mHeight = measuredHeight
        //两者取最大
        mCircleRadius = mWidth.coerceAtMost(mHeight) / 2f
        //给BarHeight一个默许值，假如没有
        if (mBarHeight <= 0) mBarHeight = mCircleRadius / 12f
        //实践的制作需求考虑到Thumb可能会超出中心圆一点点，所以减掉,假如没有就去减掉进展条的
        mCircleRadius -= if (mThumbDraw == null) {
            mBarHeight * 0.6f
        } else {
            mThumbRadius * 0.6f
        }
        centerX = mWidth / 2
        centerY = mHeight / 2
       	//进展的弧形便是靠这个
        mProgressRectF.run {
            left = centerX - mCircleRadius
            top = centerY - mCircleRadius
            right = centerX + mCircleRadius
            bottom = centerY + mCircleRadius
        }
    }
}

（5）处理下直线和圆的onDraw

这儿经过读取的mShape，来判别是显示哪个。onDrawDir便是前面写的直线bar啦

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    if (mShape == 0) {
        onDrawDir(canvas)
    } else {
        onDrawArc(canvas)
    }
}

思考下，由于咱们是支撑指定最大弧度的,所以进展条其实便是一个扇形，然后只画边就行了（不然你也能够用两个圆堆叠达到相同的作用）

一个扇形画当时进展，一个画剩下进展，完事。再到中间画一个文字，进展条前端画一个thumb~~~

private fun onDrawArc(canvas: Canvas?) {
    canvas?.run {
        /**
         * 进展条起始点
         * shr 1 便是/2的意思
         */
        val startAngle: Float = (90 + ((360 - mMaxDegree) shr 1)).toFloat()
        //当时进展的百分比
        val sweep1: Float = mMaxDegree * (mProgress / mMax)
        //剩下进展的百分比
        val sweep2: Float = mMaxDegree - sweep1
        //由于咱们是画进展条的，只需求画周边就行了，所用空心 描边
        mBarPaint.style = Paint.Style.STROKE
        //画笔的strokeWidth就相当于进展条宽度了
        mBarPaint.strokeWidth = mBarHeight
        mBarPaint.color = mRemainColor
        //很简单，制作区域咱们现已预备好了mProgressRectF
        //剩下起点用’当时进展起点+初始起点‘便是剩下进展的起点，结束明显便是sweep2
        drawArc(mProgressRectF, startAngle + sweep1, sweep2, false, mBarPaint)
        mBarPaint.color = mProgressColor
        //当时进展起点当然便是初始起点，结束当然是sweep1
        drawArc(mProgressRectF, startAngle, sweep1, false, mBarPaint)
        /**
         * 依据三角函数来核算出thumb的XY值
         * PS：你可能需求必定的数学知识和Android的坐标系知识
         * 假如你不会,记住就行，由于都相同~或许留言
         */
        val progressRadians =
            (((360.0f - mMaxDegree) /2 + sweep1) / 180 * Math.PI).toFloat()
        val thumbX: Float =
            centerX - mCircleRadius * sin(progressRadians.toDouble()).toFloat()
        val thumbY: Float =
            centerY + mCircleRadius * cos(progressRadians.toDouble()).toFloat()
        /**
         * 依据thumb的半径画出drawable对象
         */
        mThumbDraw?.let {
            it.setBounds(
                (thumbX - mThumbRadius / 2).toInt(), (thumbY - mThumbRadius / 2).toInt(),
                (thumbX + mThumbRadius / 2).toInt(), (thumbY + mThumbRadius / 2).toInt())
            it.draw(canvas)
        }
        /**
         * 文字制作
         */
        if (mTextVisibility) {
            mTextPaint.textSize = (mCircleRadius.toInt() shr 1).toFloat()
            mTextPaint.color = Color.parseColor("#FFCB47")
            val textProgress: String = progressFormat.format(100f * mProgress / mMax)
            val textLen: Float = mTextPaint.measureText(textProgress)
            mTextPaint.getTextBounds("8", 0, 1, mTextBounds)
            val textProgressHeight: Int = mTextBounds.height()
            val extra: Float =
                if (textProgress.startsWith("1")) -mTextPaint.measureText("1") / 2 else 0F
            /**
             * 首要是核算文字的左上角坐标
             * 让它画在中间
             */
            drawText(
                textProgress,
                centerX - textLen / 2 + extra,
                centerY + textProgressHeight / 2f,
                mTextPaint
            )
            /**
             * shr 2 便是/4啦
             */
            mTextPaint.textSize = (mCircleRadius.toInt() shr 2).toFloat()
            drawText(
                "%",
                centerX + textLen / 2 + extra + 5,
                centerY + textProgressHeight / 2f,
                mTextPaint
            )
        }
    }
}

到这儿，制作就根本完毕了。接下啦咱们要考虑点击事情的问题了

（6）点击事情的处理

咱们直接分为两种，一种点击，一种按住滑动。话不多说，全在注释里

​
private var isDragging = true
private var lastProgress = -1F
/**
 * mDragEnabled变量用于控制是否启用拖拽功用
 * checkOnArc办法判别点击是否在圆弧上；
 * thumbProgress办法依据点击的方位核算进展并将进展更新到控件上；
 * isDragging变量用于标识当时是否在拖拽。
 * 当用户点击时，假如检测到点击方位在圆弧上，则执行进展核算并设置isDragging变量为true。
 * 当用户拖动时，假如当时正在拖拽，则执行进展核算；
 * 当用户抬起手指时，将isDragging设置为false。
 * 在办法结束，返回true，表明该办法现已处理了该事情，不需求再向上传递。
 */
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent): Boolean {
  if (!mDragEnabled) {
    return super.onTouchEvent(event)
   }
  val currentX = event.x
  val currentY = event.y
  when (event.action) {
    MotionEvent.ACTION_DOWN ->
      if (checkOnArc(currentX, currentY)) {
        thumbProgress(currentX, currentY)
        isDragging = true
       }
    MotionEvent.ACTION_MOVE -> if (isDragging) {
      thumbProgress(currentX, currentY)
     }
    MotionEvent.ACTION_UP -> isDragging = false
   }
  return true
}
​
/**
 * 保证滑块的拖动不会在进展条的相反方向进行。
 * 首要，经过核算当时点相对于中心点的极角
 * 并将其转换为当时进展。
 * 接着，将该进展与当时最终一次进展（lastProgress）进行比较
 * 假如两者差值小于最大值的一半，则更新当时进展（mProgress）为该进展；
 * 不然，当时进展不变。
 */
private fun thumbProgress(currentX: Float, currentY: Float) {
  var nextProgress = calculateDegree(currentX, currentY) / mMaxDegree * mMax
  nextProgress = nextProgress.coerceAtMost(mMax).coerceAtLeast(mMin)
  val delta = abs(nextProgress - lastProgress)
  if (delta < mMax / 2 || lastProgress == -1F) {
    lastProgress = nextProgress
    mProgress = nextProgress
   }
}
​
/**
 * 检查间隔是否在圆弧的内圈和外圈之间，并检查视点是否在圆弧的开端和完毕方位的必定范围内
 * 首要调用calculateDistance函数核算给定点（currentX，currentY）与（centerX，centerY）之间的间隔。
 * 然后调用calculateDegree函数核算给定点与圆心之间的视点。
 * 最终，该函数经过比较这个间隔和视点与圆弧上的特定范围，来判别给定的点是否在圆弧范围内。
 * return 给定的点（currentX，currentY）是否在一个弧形范围内
 */
private fun checkOnArc(currentX: Float, currentY: Float): Boolean {
  val distance = calculateDistance(currentX, currentY, centerX.toFloat(), centerY.toFloat())
  val degree = calculateDegree(currentX, currentY)
  return distance > mCircleRadius - mBarHeight * 3 //点击区域弧内
      && distance < mCircleRadius + mBarHeight * 3 //点击区域弧外
      && degree >= -8 && //圆弧开端方位
      degree <= mMaxDegree + 8 //圆弧完毕方位
}
​
/**
 * 核算两点（x1，y1）和（x2，y2）之间的间隔
 * 经过公式√((x1-x2)+(y1-y2))核算两点间的欧几里得间隔
 */
private fun calculateDistance(x1: Float, y1: Float, x2: Float, y2: Float): Float {
  return sqrt(((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)).toDouble()).toFloat()
}
​
/**
 *  核算当时点（currentX，currentY）与圆心（centerX，centerY）之间的视点
 *  首要，经过反正切函数atan核算出视点a1
 *  接着，依据当时点的方位与圆心的联系，分三种状况谈论
 *  假如当时点在圆心下方，则在a1上加180
 *  假如当时点在圆心上方且在圆心右方，则在a1上加360
 *  最终，减去360与mMaxDegree的差的一半，并返回结果
 *  这样就得到了当时点相对于圆心的视点值，并约束在了mMaxDegree范围内。
 */
private fun calculateDegree(currentX: Float, currentY: Float): Float {
  var a1 =
     (atan((1.0f * (centerX - currentX) / (currentY - centerY)).toDouble()) / Math.PI * 180).toFloat()
  if (currentY < centerY) {
    a1 += 180f
   } else if (currentY > centerY && currentX > centerX) {
    a1 += 360f
   }
  return a1 - (360 - mMaxDegree) / 2
}

（7）完结！

调用下~

    <LinearLayout
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:layout_gravity="center"
      android:gravity="center"
      android:layout_height="wrap_content">
      <com.nf.module_test.seekbar.custom.ZProgressBar2
        android:id="@+id/zpb_01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:zBarHeight="5dp"
        app:zTextColor="#ffffff"
        app:zShape="oval"
        app:zFullDegree="90"
        app:zThumbDrawable="@drawable/icon_seekbar_thum"
        app:zMax="100"
        app:zProgress="50" />
​
      <com.nf.module_test.seekbar.custom.ZProgressBar2
        android:id="@+id/zpb_02"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:zBarHeight="5dp"
        app:zFullDegree="180"
        app:zMax="100"
        app:zProgress="50"
        app:zShape="oval"
        app:zTextColor="#ffffff"
        app:zThumbDrawable="@drawable/icon_seekbar_thum" />
​
      <com.nf.module_test.seekbar.custom.ZProgressBar2
        android:id="@+id/zpb_03"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:zBarHeight="5dp"
        app:zTextColor="#ffffff"
        app:zShape="oval"
        app:zFullDegree="360"
        app:zThumbDrawable="@drawable/icon_seekbar_thum"
        app:zMax="100"
        app:zProgress="50" />
    </LinearLayout>

看看作用

完好代码ZProgressBar2.kt 和 完好代码attr.xml

还有许多功用，都没有做完，不过这些看完，相信你现已能够自己接着来了，个人认为，自定义View的中心都在怎么准确的核算View的坐标，那么这个圆形的相关，根本都在三角函数上啦。

结束

这个系列现已3篇了，还有许多奇怪的进展条我都没有写，由于写了3篇了我感觉我的脑子里都是进展条，所以先暂停一会啦，当然假如谁真的很需求下一篇，谈论、私信、邮箱我，我会速更第四篇，嘻嘻x.x

那么下篇见

“开启成长之旅！这是我参与「日新方案 2 月更文挑战」的第 3 天，点击查看活动概况”