先展示一下静态作用图
介绍一下咱们的完成流程:
- 首先整个经历条有一个圆角边框的布景打底;
- 然后给经历条制作一条轨迹,让用户比较直观地看到总进展的长度;
- 在轨迹的上层制作咱们的突变色经历条;
- 在经历条的上层制作等级切割点,已达到的等级大圆点,未达到便是小圆点;
- 终究再给View加上经历变化的动画作用就完成了。
动态与静态作用图:
按流程完成作用
0.准备工作
界说需求用到的变量
重要的变量都加上注释了,没有注释的便是我觉得没必要注释
//整个View的宽度
private var mViewWidth = 0F
//整个View的高度
private var mViewHeight = 0F
//内部经历条的宽度
private var mLineWidth = 0F
//内部经历条的高度
private var mLineHeight = 0F
//内部经历条的左边距
private var mLineLeft = 0F
//内部经历条的上边距
private var mLineTop = 0F
//经历条的圆角
private var mRadius = 0F
//等级圆点的距离
private var mPointInterval = 0F
//当时经历值
private var mExperience = 0
//每一等级占总长的百分比
private var mLevelPercent = 1F
//经历条百分比(相对于总进展)
private var mExperiencePercent = 1F
//当时等级
private var mCurrentLevel = 0
//升级所需求的经历列表
private val mLevelList = mutableListOf<Int>()
//各种色彩值
private val mPointColor = Color.parseColor("#E1E1E1")
private val mLineColor = Color.parseColor("#666666")
private val mShaderStartColor = Color.parseColor("#18EFE2")
private val mShaderEndColor = Color.parseColor("#0CF191")
private val mStrokeColor = Color.parseColor("#323232")
//各种色彩值
//各种画笔
private val mStrokePaint by lazy {
Paint().apply {
color = mStrokeColor
}
}
private val mShaderPaint by lazy {
Paint().apply {
color = mShaderStartColor
}
}
private val mLinePaint by lazy {
Paint().apply {
color = mLineColor
}
}
private val mLevelAchievedPaint by lazy {
Paint().apply {
color = mShaderEndColor
}
}
private val mLevelNotAchievedPaint by lazy {
Paint().apply {
color = mPointColor
}
}
//各种画笔
重写onMeasure办法,核算View的宽高与各种参数
这儿的参数含义在上面大多都已经有注释了,这儿就不再多解释,主要说一下做了什么:
通过MeasureSpec去拿到终究的宽度,终究宽度减去咱们的左右内边距便是咱们要制作的实践宽度,咱们要制作的经历条宽高比为20:1,所以View的终究高度便是宽度的1/20加上上下的内边距;
经历条内部轨迹的高度为边框高度的1/3,由此算出内部轨迹对于边框的四个边距是多少(mLineTop、mLineLeft);
核算完前面的参数就依据轨迹的宽度去设置突变画笔的shader特点,也核算每个等级点之间的距离距离;
终究将实践的View宽高传给setMeasuredDimension,完成测量工作。
/**
* 测量各种尺度
*/
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val width = MeasureSpec.getSize(widthMeasureSpec)
mViewWidth = (width - paddingStart - paddingEnd).toFloat()
val height = mViewWidth / 20 + paddingTop + paddingBottom
mViewHeight = mViewWidth / 20
mRadius = mViewHeight
mLineHeight = mViewHeight / 3
mLineTop = (mViewHeight - mLineHeight) / 2
mLineWidth = mViewWidth - mLineTop * 2
mLineLeft = mLineTop
setShaderColor()
computerPointInterval()
setMeasuredDimension(width, height.toInt())
}
/**
* 设置经历条的突变色
*/
private fun setShaderColor() {
mShaderPaint.shader = LinearGradient(0F, 0F, mLineWidth, 0F,
mShaderStartColor, mShaderEndColor, Shader.TileMode.CLAMP)
}
/**
* 核算各个等级点之间的距离
*/
private fun computerPointInterval() {
if (mLineWidth > 0F || mLevelList.isNotEmpty()) {
mPointInterval = mLineWidth / mLevelList.size
}
}
1.制作经历条的打底圆角布景框
重写onDraw办法,将画布canvas进行偏移,移除内边距对咱们制作的影响。
save与restore这两个API是成对运用的,save会保存画布的当时状况,然后咱们就能够对画布进行偏移、旋转和缩放等操作,等咱们制作完之后再调用restore,就能够运用画布回到之前的状况了。
translate办法能够对画布进行偏移,偏移之后咱们的一切制作操作就都基于偏移后的坐标了。
drawBackground完成了底部边框的制作,只要一行代码,完成非常简略。
drawRoundRect这个API的作用便是制作一个圆角矩形,传入四个边角坐标、圆角和画笔即可。
作用图:
/**
* 制作View
*/
override fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(paddingStart.toFloat(), paddingTop.toFloat())
drawBackground(canvas)
canvas.restore()
}
/**
* 制作布景边框
*/
private fun drawBackground(canvas: Canvas) {
canvas.drawRoundRect(0F, 0F, mViewWidth, mViewHeight, mRadius, mRadius, mStrokePaint)
}
2.给经历条制作一条轨迹
修正onDraw办法,添加drawExperienceBar办法。
drawExperienceBar里边也做了一个画布的偏移,然后制作一个圆角矩形,跟上面的很类似,信任大家都能看懂。
作用图:
override fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(paddingStart.toFloat(), paddingTop.toFloat())
drawBackground(canvas)
drawExperienceBar(canvas)
canvas.restore()
}
/**
* 制作经历条
*/
private fun drawExperienceBar(canvas: Canvas) {
val save = canvas.saveCount
canvas.save()
canvas.translate(mLineLeft, mLineTop)
//制作经历条底部布景
canvas.drawRoundRect(0F, 0F, mLineWidth, mLineHeight, mRadius, mRadius, mLinePaint)
canvas.restoreToCount(save)
}
3.在轨迹的基础上再画一个突变色的经历条
还是drawExperienceBar这个办法,在制作轨迹之后,再调用一次drawRoundRect去制作经历条,这儿看起来没什么大的差异,可是需求注意的点有两个:
- 制作轨迹的第一个参数x0,从一开端的0F开端修正成了从经历条的右侧开端,这样做是为了尽可能减少过度制作,也便是下面作用图的图1,轨迹实践上只制作了一部分,假如这儿看不懂的话,能够直接忽略;
- 制作突变进展条的宽度是从0F开端,到mLineWidth * mExperiencePercent结束,mExperiencePercent是前面computerLevelInfo核算好的百分比,至于它为什么有突变色,已经在setShaderColor设置了shader特点,支持了线性突变。
作用图:
private fun drawExperienceBar(canvas: Canvas) {
val save = canvas.saveCount
canvas.save()
canvas.translate(mLineLeft, mLineTop)
//制作经历条底部布景
canvas.drawRoundRect((mLineWidth * mExperiencePercent - mLineHeight).coerceAtLeast(0F),
0F, mLineWidth, mLineHeight, mRadius, mRadius, mLinePaint)
//制作突变的经历条
canvas.drawRoundRect(0F, 0F, mLineWidth * mExperiencePercent, mLineHeight,
mRadius, mRadius, mShaderPaint)
canvas.restoreToCount(save)
}
4.在经历条的上层制作等级切割点,已达到的等级大圆点,未达到便是小圆点
修正onDraw办法,添加drawLevelPoint办法。
drawLevelPoint办法循环去制作每个等级的切割点,等级点的间距在上面的computerPointInterval已经核算好了,在循环里边会通过当时的经历进展是否大于等于当时等级的进展,假如是的话便是已达到的等级,不然便是未达到。
这儿的drawCircleAPI能够让咱们在画布上制作一个圆,只要传入圆心坐标、半径和画笔即可。
作用图:
override fun onDraw(canvas: Canvas) {
canvas.save()
canvas.translate(paddingStart.toFloat(), paddingTop.toFloat())
drawBackground(canvas)
drawExperienceBar(canvas)
drawLevelPoint(canvas)
canvas.restore()
}
/**
* 制作等级切割点
*/
private fun drawLevelPoint(canvas: Canvas) {
if (mLevelList.size > 1) {
val save = canvas.saveCount
canvas.save()
canvas.translate(mLineLeft, 0F)
//等级圆点的圆心Y轴坐标(由于经历条是水平的,所以一切Y轴坐标都一样)
val cy = mViewHeight / 2
//总共有n - 1个等级圆点,所以从1开端画,已达到的等级大圆点,未达到便是小圆点
for (level in 1 until mLevelList.size) {
//当时等级是否已达到
val achieved = mExperiencePercent >= mLevelPercent * level
canvas.drawCircle(mPointInterval * level, cy,
if (achieved) mLineHeight else mLineHeight / 2,
if (achieved) mLevelAchievedPaint else mLevelNotAchievedPaint)
}
canvas.restoreToCount(save)
}
}
加上经历变化的动画作用
动画这一块再界说一些变量,当咱们设置经历条的经历数据时,内部就会调用startAnimator办法,通过ValueAnimator的回调,不断地去更新mExperiencePercent,然后改写View,就能够完成经历条添加经历的动画了。
//动画相关
private var mAnimator : ValueAnimator? = null
//动画时长
private val mAnimatorDuration = 500L
//插值器
private val mInterpolator by lazy { DecelerateInterpolator() }
//动画值回调
private val mAnimatorListener by lazy {
ValueAnimator.AnimatorUpdateListener {
mExperiencePercent = it.animatedValue as Float
invalidate()
}
}
/**
* 开端经历条动画
*/
private fun startAnimator(start : Float, end : Float) {
mAnimator?.cancel()
mAnimator = ValueAnimator.ofFloat(start, end).apply {
duration = mAnimatorDuration
interpolator = mInterpolator
addUpdateListener(mAnimatorListener)
start()
}
}
//动画相关
开放两个API给外部设置等级和经历信息
不管是哪种更新方式,都会调用startAnimator办法去启动动画修正。
/**
* 外界更新经历
*/
fun updateExperience(experience : Int) {
if (mLevelList.isEmpty() || experience == mExperience) return
mExperience = experience
startAnimator(mExperiencePercent, computerLevelInfo())
}
/**
* 外界设置等级信息
*/
fun setLevelInfo(experience : Int, list : List<Int>) {
mExperience = experience
mLevelList.clear()
mLevelList.addAll(list)
computerPointInterval()
startAnimator(0F, computerLevelInfo())
}
自界说View的工作到这儿就完成了!
外部的运用代码
XML:
<com.hbh.customview.view.ExperienceBar
android:id="@+id/experience_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="20dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginVertical="16dp"
app:layout_constraintTop_toBottomOf="@id/experience_bar">
<Button
android:id="@+id/btn_test1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test1"
android:layout_gravity="center"/>
<Button
android:id="@+id/btn_test2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test2"
android:layout_gravity="center"/>
</LinearLayout>
Activity:
val experience_bar = findViewById<ExperienceBar>(R.id.experience_bar)
val a = 5
val b = listOf(10,50,100,250,500,1000)
val btn_test1 = findViewById<Button>(R.id.btn_test1).apply {
setOnClickListener {
experience_bar.setLevelInfo(a, b)
}
}
val btn_test2 = findViewById<Button>(R.id.btn_test2).apply {
var index = 0
val c = listOf(888, 188)
setOnClickListener {
experience_bar.updateExperience(c[(index++) % c.size])
}
}
总结
10分钟过去了,这个简略的自界说View你拿下没有?
觉得不错的话,就不要小气你的点赞!
需求整份代码的话,下面链接自提。
代码链接 : github.MyCustomView