关键词：
好久没有写文章啦。记录一下此时的心情，哈哈。先上效果图：
布局
样式：
<declare-styleable name="SlidingScaleBarView">
<!--刻度文字的大小-->
<attr name="scaleTextSize" format="dimension" />
<!--刻度文字的颜色-->
<attr name="scaleTextColor" format="color" />
<!--最大值-->
<attr name="maxScaleValue" format="integer" />
<!--step-->
<attr name="step" format="integer" />
<!--精度,默认小数点0位-->
<attr name="precision" format="integer" />
<!--单位-->
<attr name="unit" format="string" />
<!--改变的步幅大小 默认1,如果 precision 精度不等于0，changeStep始终等于1 -->
<attr name="changeStep" format="integer" />
</declare-styleable>
布局文件：
<com.ypk.tablayout.view.fram.SlidingScaleBarView
android:id="@+id/scaleBarView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:changeStep="100"
app:maxScaleValue="40"
app:precision="0"
app:scaleTextColor="@color/green"
app:scaleTextSize="12sp"
app:step="10"
app:unit="" />
自定义view完整代码 SlidingScaleBarView：
package com.ypk.tablayout.view.fram
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import android.widget.TextView
import androidx.core.content.ContextCompat
import com.blankj.utilcode.util.ConvertUtils
import com.ypk.tablayout.R
/**
* Created by ypk on 2022/7/4
* 滑动刻度条
*
* 点击任意位置，就可以滑动
*/
class SlidingScaleBarView : View
private var viewWidth = 0f
private var viewHeight = 0f
private lateinit var bgPaint: Paint
private lateinit var bgSlidePaint: Paint
private lateinit var linePaint: Paint
private lateinit var scaleTextPaint: Paint
private lateinit var auxiliaryLinePaint: Paint
lateinit var bgRect: RectF
//背景进度条的高度
private var bgRectHeight = 0f
//背景矩形圆角大小
private var bgRoundedCorners = ConvertUtils.dp2px(10f).toFloat()
private var bgRectMarginHorizontal = 0f
//改变的步幅大小
var changeStep = 1
//最大刻度值
var maxScaleValue = 100;
var step = 10
//精度
var precision = 0
//分的份数
var number = 0
//分割后，每个间隔的宽度
var spaceWidth = 0f
//刻度线的高度
private var lineHeight = ConvertUtils.dp2px(8f).toFloat()
//刻度线的宽度
private var lineWidth = ConvertUtils.dp2px(2f).toFloat()
//刻度数字距离背景条的间距
private var scaleTextMarginTop = ConvertUtils.dp2px(3f).toFloat()
//滑块
private var sliceSpace = ConvertUtils.dp2px(5f).toFloat()
private var sliceWidth = ConvertUtils.dp2px(50f).toFloat()
private var sliceHeight = ConvertUtils.dp2px(25f).toFloat()
//刻度指示器图标
lateinit var bitmapIndicator: Bitmap
lateinit var bitmapSlide: Bitmap
//百分比单位
private var percentUnit = "%"
var colorArray = intArrayOf(
ContextCompat.getColor(context, R.color.green),
ContextCompat.getColor(context, R.color.tab_select_color),
ContextCompat.getColor(context, R.color.red_light)
)
var positionArray = floatArrayOf(0f, 0.8f, 1f)
var maxValue = 0f
var minValue = 0f
private var customizeViewDefaultHeight = ConvertUtils.dp2px(45f).toFloat() //自定义的控件默认高度
var mContext: Context
constructor(context: Context) : this(context, null)
constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
context,
attrs,
defStyleAttr
)
this.mContext = context
initAttr(context, attrs, defStyleAttr);
initData()
private var scaleTextSize = ConvertUtils.sp2px(15f).toFloat()
private var scaleTextColor = ContextCompat.getColor(context, R.color.white)
private fun initData()
//如果 precision 精度不等于0，changeStep要始终等于1
if (precision > 0)
changeStep = 1;
currentPercentageProgress = (maxScaleValue / 2).toFloat()
number = maxScaleValue / step
//控制条背景画笔
bgPaint = Paint(Paint.ANTI_ALIAS_FLAG)
bgPaint.isAntiAlias = true
bgPaint.style = Paint.Style.FILL
//bgPaint.color = ContextCompat.getColor(context, R.color.task_type_bg)
bgSlidePaint = Paint(Paint.ANTI_ALIAS_FLAG)
bgSlidePaint.isAntiAlias = true
bgSlidePaint.alpha = 180
linePaint = Paint(Paint.ANTI_ALIAS_FLAG)
linePaint.isAntiAlias = true
linePaint.style = Paint.Style.STROKE
linePaint.strokeWidth = lineWidth
linePaint.color = ContextCompat.getColor(context, R.color.white)
//刻度文字
scaleTextPaint = Paint(Paint.ANTI_ALIAS_FLAG)
scaleTextPaint.isAntiAlias = true
//scaleTextPaint.style = Paint.Style.FILL
//caleTextPaint.strokeWidth = lineWidth
scaleTextPaint.color = scaleTextColor
scaleTextPaint.textSize = scaleTextSize
bitmapIndicator = bitmapScale(
ConvertUtils.drawable2Bitmap(resources.getDrawable(R.mipmap.ic_slide_indicator2)),
1.4f
)
//辅助线画笔
auxiliaryLinePaint = Paint(Paint.ANTI_ALIAS_FLAG)
auxiliaryLinePaint.isAntiAlias = true
auxiliaryLinePaint.style = Paint.Style.STROKE
//auxiliaryLinePaint.strokeWidth = ringWidth
auxiliaryLinePaint.color = Color.RED
val rectText = Rect()
scaleTextPaint.getTextBounds("0", 0, 1, rectText)
customizeViewDefaultHeight =
sliceHeight + sliceSpace + bitmapIndicator.height + rectText.height() + scaleTextMarginTop
private fun initAttr(context: Context, attrs: AttributeSet?, defStyleAttr: Int)
val typedArray =
context.obtainStyledAttributes(attrs, R.styleable.SlidingScaleBarView, defStyleAttr, 0)
val indexCount = typedArray.indexCount
for (i in 0 until indexCount)
val index = typedArray.getIndex(i)
when (index)
R.styleable.SlidingScaleBarView_scaleTextSize ->
scaleTextSize = typedArray.getDimension(index, scaleTextSize)
R.styleable.SlidingScaleBarView_scaleTextColor ->
scaleTextColor = typedArray.getColor(index, scaleTextColor)
R.styleable.SlidingScaleBarView_maxScaleValue ->
maxScaleValue = typedArray.getInteger(index, maxScaleValue)
R.styleable.SlidingScaleBarView_step ->
step = typedArray.getInteger(index, step)
R.styleable.SlidingScaleBarView_precision ->
precision = typedArray.getInteger(index, precision)
R.styleable.SlidingScaleBarView_unit ->
percentUnit = typedArray.getString(index).toString()
R.styleable.SlidingScaleBarView_changeStep ->
changeStep = typedArray.getInteger(index, 1)
typedArray.recycle()
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int)
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
setMeasuredDimension(widthMeasureSpec, measureHeight(heightMeasureSpec))
private fun measureHeight(measureSpec: Int): Int
var result = 0
val mode = MeasureSpec.getMode(measureSpec)
val size = MeasureSpec.getSize(measureSpec)
if (mode == MeasureSpec.EXACTLY) //表示父控件已经确切的指定了子View的大小。
result = size
// System.out.println("YPKTabLayoutView.measureHeight result1=" + result);
else if (mode == MeasureSpec.AT_MOST) //表示子View具体大小没有尺寸限制，但是存在上限，上限一般为父View大小。
result = Math.min(customizeViewDefaultHeight.toInt(), size)
// System.out.println("YPKTabLayoutView.measureHeight result2=" + result);
else if (mode == MeasureSpec.UNSPECIFIED) //默认值，父控件没有给子view任何限制，子View可以设置为任意大小。
result = customizeViewDefaultHeight.toInt()
//System.out.println("YPKTabLayoutView.measureHeight result3=" + result);
return result
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int)
super.onSizeChanged(w, h, oldw, oldh)
viewWidth = (w - oldw).toFloat()
viewHeight = (h - oldh).toFloat()
//进度条的高度和指示器一样
bgRectHeight = bitmapIndicator.height.toFloat()
bgRectMarginHorizontal = sliceWidth / 2
spaceWidth = (viewWidth - bgRectMarginHorizontal * 2) / number
//spaceWidth = (viewWidth - bgRectMarginHorizontal * 2 - lineWidth * (number - 1)) / number
//进度条
bgRect = RectF(
bgRectMarginHorizontal,
sliceHeight + sliceSpace,
viewWidth - bgRectMarginHorizontal,
sliceHeight + sliceSpace + bgRectHeight
)
val linearGradient = LinearGradient(
0f,
0f,
bgRect.right,
bgRect.bottom,
colorArray,
positionArray,
Shader.TileMode.MIRROR
)
bgPaint.shader = linearGradient
maxValue = viewWidth - bgRectMarginHorizontal
minValue = bgRectMarginHorizontal
val tv = TextView(context)
// tv.setBackgroundColor(ContextCompat.getColor(context, R.color.gray))
tv.background = ContextCompat.getDrawable(context, R.drawable.shap_corners10_bg)
tv.width = sliceWidth.toInt()
tv.height = sliceHeight.toInt()
bitmapSlide = ConvertUtils.view2Bitmap(tv)
//设置默认值
setSlideProgress(currentPercentageProgress)
override fun onDraw(canvas: Canvas)
super.onDraw(canvas)
//绘制背景圆角矩形，也就是进度条
canvas.drawRoundRect(bgRect, bgRoundedCorners, bgRoundedCorners, bgPaint)
//绘制刻度线
for (i in 1 until number)
canvas.drawLine(
bgRectMarginHorizontal + spaceWidth * i,
sliceHeight + sliceSpace + bgRectHeight - lineHeight,
bgRectMarginHorizontal + spaceWidth * i,
sliceHeight + sliceSpace + bgRectHeight,
linePaint
)
//绘制数字刻度
drawNumberScaleBar(canvas)
//绘制指示器
canvas.drawBitmap(
bitmapIndicator,
currentProgress - (bitmapIndicator.width / 2),
sliceHeight + sliceSpace, null
)
//绘制top滑块
canvas.drawBitmap(
bitmapSlide,
currentProgress - (bitmapSlide.width / 2),
0f, bgSlidePaint
)
//绘制滑块中文字百分比
val formatValue = String.format("%.$precisionf", progressPercent)
val strPercentage = if (precision == 0)
"$formatValue.toInt() * changeStep$percentUnit"
else
"$formatValue$percentUnit"
val rectText = Rect()
scaleTextPaint.getTextBounds(strPercentage, 0, strPercentage.length, rectText)
canvas.drawText(
strPercentage,
currentProgress - rectText.width() / 2,
sliceHeight / 2 + rectText.height() / 2,
scaleTextPaint
)
/**
* 绘制数字刻度
*/
private fun drawNumberScaleBar(canvas: Canvas)
for (i in 0..number)
val scaleText = "$i * step * changeStep"
when (i)
0 ->
val rectText = Rect()
scaleTextPaint.getTextBounds(scaleText, 0, scaleText.length, rectText)
canvas.drawText(
scaleText,
bgRectMarginHorizontal + spaceWidth * i,
viewHeight,
scaleTextPaint
)
number ->
val rectText = Rect()
scaleTextPaint.getTextBounds(scaleText, 0, scaleText.length, rectText)
canvas.drawText(
scaleText,
bgRectMarginHorizontal + spaceWidth * i - rectText.width() / 2,
viewHeight,
scaleTextPaint
)
else ->
val rectText = Rect()
scaleTextPaint.getTextBounds(scaleText, 0, scaleText.length, rectText)
canvas.drawText(
scaleText,
bgRectMarginHorizontal + spaceWidth * i - rectText.width() / 2,
viewHeight,
scaleTextPaint
)
override fun onTouchEvent(event: MotionEvent): Boolean
if (event.x < minValue)
setProgress(minValue)
return true
else if (event.x > maxValue)
setProgress(maxValue)
return true
else
when (event.action)
MotionEvent.ACTION_DOWN ->
setProgress(event.x)
return true
MotionEvent.ACTION_MOVE ->
setProgress(event.x)
return true
MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL ->
else ->
return super.onTouchEvent(event)
/**
* 计算触摸点的百分比
*
* @param eventX
* @return
*/
private fun calculateProgress(eventX: Float): Float
val proResult: Float =
(eventX - bgRectMarginHorizontal) / (viewWidth - bgRectMarginHorizontal * 2)
return proResult * maxScaleValue
//滑块的当前进度坐标
var currentProgress = 0f
//进度百分比
private var progressPercent: Float = 0f
private fun setProgress(x: Float)
currentProgress = x
val progress = calculateProgress(currentProgress)
progressPercent = progress
val formatValue = String.format("%.$precisionf", progress)
progressChangeListener?.invoke(formatValue)
invalidate()
// println("ScaleBarView2.setProgress progress=$progress")
var progressChangeListener: ((progress: String) -> Unit)? = null
var currentPercentageProgress = 0f
public fun setSlideProgress(percentageProgress: Float)
currentPercentageProgress = percentageProgress
//百分比进度
if (percentageProgress > maxScaleValue)
currentPercentageProgress = maxScaleValue.toFloat()
else if (percentageProgress < 0)
currentPercentageProgress = 0f
val currentProgress =
currentPercentageProgress / maxScaleValue * (viewWidth - bgRectMarginHorizontal * 2) + bgRectMarginHorizontal
setProgress(currentProgress)
private fun bitmapScale(bm: Bitmap, scale: Float): Bitmap
val m = Matrix()
m.setScale(scale, scale)
val bmpSrc = Bitmap.createBitmap(bm, 0, 0, bm.width, bm.height, m, true)
return bmpSrc
compose自定义条形进度条(代码片段)
前言Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没... 查看详情
compose自定义条形进度条(代码片段)
前言Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没... 查看详情
compose自定义条形进度条(代码片段)
前言Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。自定义进度条Composematerial包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没... 查看详情
自定义圆环形进度条实现(代码片段)
...一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可以自定义；可以自定义圆环的宽度；可以设置底部文字（文字内容、大小和textStyle）;提供设置进度的接口；可以设置进度的最大值&... 查看详情
酷炫进度条自定义seekbar(代码片段)
前些天一同学给了我一个ui图，是这样子的：需求：1、看了ui图可以知道这类似android自带的seekbar控件，2、一个水平进度条和一个圆形进度条；3、圆形进度条显示环形刻度和当前进度值；4、并且圆形进度... 查看详情
android自定义圆弧进度条(代码片段)
...到合适，干脆就自己写了一个，顺便复习一下自定义View，下面是具体的实现。先看一下效果这里的话我只做一个进度条 查看详情
android自定义圆弧进度条(代码片段)
...到合适，干脆就自己写了一个，顺便复习一下自定义View，下面是具体的实现。先看一下效果这里的话我只做一个进度条 查看详情
scss自定义进度条(代码片段)
android自定义滑动解锁view(代码片段)
✏️丨自定义滑动解锁View1.需求如下：近期需要做一个类似屏幕滑动解锁的功能，右划开始，左划暂停。2.需求效果图如下3.实现效果展示4.自定义view如下/***Desc自定义滑动解锁View*AuthorZY*Mailsunnyfor98@gmail.com*Date2021/5/... 查看详情
自定义view实现钟摆效果进度条pendulumview
...画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。 废话不多说，先上效果图 底部黑边是录制时不小心录上的，可以忽略。 既然是自定义View我们就... 查看详情
自定义view实现钟摆效果进度条pendulumview
...画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。废话不多说，先上效果图底部黑边是录制时不小心录上的，可以忽略。既然是自定义View我们就按标准的流程 查看详情
sap自定义进度条(代码片段)
1*&---------------------------------------------------------------------*2*&ReportZCHENH0283*&4*&---------------------------------------------------------------------*5*&6*&7*& 查看详情
flutter自定义view之——价格选择器｜双向滑动｜手势处理(代码片段)
源码下载地址一、本篇文章通过自定义View实现的效果图二、现在对这个组件进行一一拆解，如下：顶部选中的结果我们可以单独拿出来，通过监听选择器的变化来显示值就可以底部固定的灰色进度，绘制圆角矩形... 查看详情
自定义view基础之——图片加载进度条
...了解这个图片加载进度条了，我们先看具体用法，再看自定义View的实现：<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmln 查看详情
自定义view—弹性滑动(代码片段)
滑动是Android开发中非常重要的UI效果，几乎所有应用都包含了滑动效果，而本文将对滑动的使用以及原理进行介绍。一、scrollTo与ScrollByView提供了专门的方法用于实现滑动效果，分别为scrollTo与scrollBy。先来看看它们的... 查看详情
一起talkandroid吧（第四百九十六回：自定义view实例二：环形进度条）
...是"如何使用Java版MQTT客户端",这一回中咱们说的例子是"自定义View实例二：环形进度条"。闲话休提，言归正转，让我们一起TalkAndroid吧！知识回顾看官们，我们又回到了自定义View相关的知识中，在这里对旧知识做一些回顾：首先... 查看详情
xml自定义进度条圆和水平(代码片段)
自定义圆环形进度条实现(代码片段)
...一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可以自定义；可以自定义圆环的宽度；可以设置底部文字（文字内容、大小和textSt 查看详情