这篇文章主要介绍“Android怎么自定义View实现渐变色折线图”，在日常操作中，相信很多人在Android怎么自定义View实现渐变色折线图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Android怎么自定义View实现渐变色折线图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
如何实现
通过创建LinearGradient来实现颜色渐变，并将之设置到画笔Paint的着色器Shader，绘制想要的路径即可实现该效果。
实现代码如下:
class GradientLineChart : View { private var viewWidth: Int = 0 private var viewHeight: Int = 0 private var chartWidth: Int = 0 private var chartHeight: Int = 0 private var lineWidth: Float = 0f private var gridLineWidth: Float = 0f private var gridLineColor: Int = 0 private var backgroundColorRes: Int = 0 private var linePaint: Paint? = null private var gridLinePaint: Paint? = null private var gradientColor: IntArray? = null private val rectF = RectF() private val linePath = Path() private val lineValueList = ArrayList<LineEntity>() 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) { lineValueList.add(LineEntity(3f, 28f)) lineValueList.add(LineEntity(7f, 2f)) lineValueList.add(LineEntity(14f, 18f)) lineValueList.add(LineEntity(17f, 12f)) lineValueList.add(LineEntity(22f, 21f)) context?.let { gradientColor = intArrayOf( ContextCompat.getColor(it, R.color.color_FFD200), ContextCompat.getColor(it, R.color.color_FF2600), ContextCompat.getColor(it, R.color.color_49E284), ContextCompat.getColor(it, R.color.color_00A5FF) ) } initAttr(attrs, defStyleAttr) initPaint() } private fun initAttr(attrs: AttributeSet?, defStyleAttr: Int) { val typeArray = context.theme.obtainStyledAttributes(attrs, R.styleable.GradientLineChart, defStyleAttr, 0) lineWidth = typeArray.getDimension( R.styleable.GradientLineChart_tc_lineWidth, DensityUtil.dp2Px(2).toFloat() ) gridLineWidth = typeArray.getDimension( R.styleable.GradientLineChart_tc_grid_line_width, DensityUtil.dp2Px(1).toFloat() ) gridLineColor = typeArray.getColor( R.styleable.GradientLineChart_tc_grid_line_color, ContextCompat.getColor(context, R.color.color_1Affffff) ) backgroundColorRes = typeArray.getColor( R.styleable.GradientLineChart_tc_background_color, ContextCompat.getColor(context, R.color.color_23242a) ) typeArray.recycle() } private fun initPaint() { linePaint = Paint() linePaint?.isAntiAlias = true linePaint?.style = Paint.Style.STROKE linePaint?.strokeWidth = lineWidth gridLinePaint = Paint() gridLinePaint?.isAntiAlias = true gridLinePaint?.style = Paint.Style.FILL gridLinePaint?.color = gridLineColor } override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { viewWidth = MeasureSpec.getSize(widthMeasureSpec) viewHeight = MeasureSpec.getSize(heightMeasureSpec) //MUST CALL THIS setMeasuredDimension(viewWidth, viewHeight) chartWidth = viewWidth - paddingStart - paddingEnd chartHeight = viewHeight - paddingTop - paddingBottom } override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) //设置画布背景色 canvas?.drawColor(backgroundColorRes) //绘制网格线 drawGradLine(canvas) //绘制折线 drawLine(canvas) } private fun drawGradLine(canvas: Canvas?) { gridLinePaint?.let { val yGridValues = 7 val xGridValues = 6 //Y轴网格线间距 val yGridDistance = (chartHeight - yGridValues * gridLineWidth) / (yGridValues - 1) for (index in 0 until yGridValues) { val left = paddingStart.toFloat() val top = paddingTop.toFloat() + index * yGridDistance + index * gridLineWidth val right = left + chartWidth val bottom = top + gridLineWidth rectF.set(left, top, right, bottom) canvas?.drawRect(rectF, it) } //X轴网格线间距 val xGridDistance = (chartWidth - xGridValues * gridLineWidth) / (xGridValues - 1) for (index in 0 until xGridValues) { val left = paddingStart + xGridDistance * index + gridLineWidth * index val top = paddingTop.toFloat() val right = left + gridLineWidth val bottom = top + chartHeight rectF.set(left, top, right, bottom) canvas?.drawRect(rectF, gridLinePaint!!) } } } private fun drawLine(canvas: Canvas?) { val yGridValues = 7 val xGridValues = 6 val yGridDistance = (chartHeight - yGridValues * gridLineWidth) / (yGridValues - 1) val xGridDistance = (chartWidth - xGridValues * gridLineWidth) / (xGridValues - 1) for ((index, linePoint) in lineValueList.withIndex()) { val pointX = ((linePoint.xValue - 5 * index) / 5) * xGridDistance + (xGridDistance * index) val pointY = chartHeight - (linePoint.yValue / 30 * (yGridDistance * 6)) if (index == 0) { linePath.moveTo(pointX, pointY) } else { linePath.lineTo(pointX, pointY) } } linePaint?.shader = createLineGradient(gradientColor!!) canvas?.drawPath(linePath, linePaint!!) } private fun createLineGradient(gradientColor: IntArray): LinearGradient { return LinearGradient( 0f, 0f, 0f, viewHeight.toFloat(), gradientColor, null, Shader.TileMode.CLAMP ) }}<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="GradientLineChart"> <!--线宽度--> <attr name="tc_lineWidth" format="dimension" /> <!--网格线宽度--> <attr name="tc_grid_line_width" format="dimension" /> <!--网格线颜色--> <attr name="tc_grid_line_color" format="color" /> <!--等级颜色指示器宽度--> <attr name="tc_level_indicator_width" format="dimension" /> <!--背景颜色--> <attr name="tc_background_color" format="color" /> </declare-styleable></resources>效果如下图:
到此，关于“Android怎么自定义View实现渐变色折线图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
