您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“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实现渐变色折线图”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。