安卓绘制温度趋势图

于 2024-05-26 17:49:57 发布
阅读量252 收藏
点赞数 3
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CruelLei/article/details/139217787
版权 
package com.sq.weather.ui.view

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.DashPathEffect
import android.graphics.LinearGradient
import android.graphics.Paint
import android.graphics.Path
import android.graphics.PointF
import android.graphics.Rect
import android.graphics.RectF
import android.graphics.Shader
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import com.blankj.utilcode.util.ConvertUtils
import com.sq.common_module.common.bean.Month
import java.text.SimpleDateFormat
import java.util.Date


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

    private val mYXAxisTextPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var mYXAxisTextSize = ConvertUtils.sp2px(10f).toFloat()
    private var mYXAxisTextColor = Color.parseColor("#AAAAAA")
    private val mYXAxisTextBounds = Rect()

    private val mStrTextPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var mStrTextSize = ConvertUtils.sp2px(10f).toFloat()
    private var mStrTextColor = Color.parseColor("#FFFFFF")
    private val mStrTextRect = Rect()

    private val mPathPaint = Paint(Paint.ANTI_ALIAS_FLAG) //曲线画笔
    private val mPath = Path()
    private val mBaseShadowPaint = Paint(Paint.ANTI_ALIAS_FLAG) //填充画笔

    private val mDashLinePaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var mDashLineColor = Color.parseColor("#AAAAAA")
    private var mDashLineWidth = 0.5f

    private val mSelectLinePaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var mSelectLineColor = Color.parseColor("#3097FC")
    private var mSelectLineWidth = 2f

    private val mMarginLeftAndBottom = 20f
    private val mMarginTextLine = 10f //字体和虚线的间距

    private var mMonthList = mutableListOf<Month>()
    private var maxTemp: Int = 0 //最大温度
    private var minTemp: Int = 0 //最小温度
    private var mCurrentDay = SimpleDateFormat("yyyy-MM-dd").format(Date())
    private val mMonthPoint = mutableListOf<PointF>()
    private val smoothness = 0.36f //折线的弯曲率

    init {
        initView(context, attrs)
    }

    private fun initView(context: Context, attrs: AttributeSet?) {
//        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ItemView)
//        setAttrs(attrs, typedArray)

        initPaint()
    }

    private fun initPaint() {
        mYXAxisTextPaint.style = Paint.Style.FILL_AND_STROKE
        mYXAxisTextPaint.color = mYXAxisTextColor
        mYXAxisTextPaint.textSize = mYXAxisTextSize

        mStrTextPaint.style = Paint.Style.FILL_AND_STROKE
        mStrTextPaint.color = mStrTextColor
        mStrTextPaint.textSize = mStrTextSize

        mDashLinePaint.color = mDashLineColor
        mDashLinePaint.strokeWidth = mDashLineWidth
        mDashLinePaint.pathEffect = DashPathEffect(floatArrayOf(5f, 5f), 0f)

        mSelectLinePaint.color = mSelectLineColor
        mSelectLinePaint.strokeWidth = mSelectLineWidth

        mPathPaint.color = mSelectLineColor
        mPathPaint.strokeCap = Paint.Cap.ROUND
        mPathPaint.strokeJoin = Paint.Join.ROUND
        mPathPaint.style = Paint.Style.STROKE
        mPathPaint.strokeWidth = 5f

        mBaseShadowPaint.color = Color.WHITE
        mBaseShadowPaint.style = Paint.Style.FILL
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        toGetPointF() //获取x和y的坐标
        onDrawLine(canvas)
        drawArea(canvas)
        onDrawLineX(canvas)
        onDrawLineY(canvas)
    }

    private fun toGetPointF() {
        mMonthPoint.clear()
        //y轴字体宽度
        val textWidth =  mYXAxisTextPaint.measureText("${maxTemp}°")
        //获取x间隔
        val xValue = (width.toFloat() - textWidth) / mMonthList.size - 1
        val yValue = (height - mYXAxisTextBounds.height() - mMarginLeftAndBottom - mMarginTextLine) / 3
        val oneTemp = yValue / (maxTemp - minTemp)
        mMonthList.forEachIndexed { index, month ->
            //获取点的x轴坐标
            val lineX = index * xValue + textWidth + mMarginLeftAndBottom + mMarginTextLine
            val pointY = yValue + oneTemp * (maxTemp - (month.day?.temperature?.toInt() ?: 0))
            mMonthPoint.add(PointF(lineX, pointY))
        }
    }

    private fun onDrawLine(canvas: Canvas) {
        // 清除路径
        mPath.reset()
        var lX = 0f
        var lY = 0f
        if (mMonthPoint.isNotEmpty()) {
            mPath.moveTo(mMonthPoint[0].x, mMonthPoint[0].y)
            for (i in 1 until  mMonthPoint.size) {
                val p = mMonthPoint[i]
                val firstPointF = mMonthPoint[i - 1]
                val x1 = firstPointF.x + lX
                val y1 = firstPointF.y + lY
                val secondPointF: PointF = mMonthPoint[if (i + 1 < mMonthPoint.size) i + 1 else i]
                lX = (secondPointF.x - firstPointF.x) / 2 * smoothness
                lY = (secondPointF.y - firstPointF.y) / 2 * smoothness
                val x2 = p.x - lX
                var y2 = p.y - lY
                if (y1 == p.y) {
                    y2 = y1
                }
                mPath.cubicTo(x1, y1, x2, y2, p.x, p.y)
            }
            canvas.drawPath(mPath, mPathPaint)
        }
    }

    private fun drawArea(canvas: Canvas) {
        val mShader = LinearGradient(0f, 0f, 0f,
            measuredHeight.toFloat(), intArrayOf(Color.parseColor("#330E9CFF"), Color.parseColor("#330E9CFF")), floatArrayOf(0.5f, 0.5f), Shader.TileMode.REPEAT);
        mBaseShadowPaint.shader = mShader
        if(mMonthPoint.isEmpty()) return
        val y = height - mYXAxisTextBounds.height() - mMarginLeftAndBottom - mMarginTextLine
        mPath.lineTo(mMonthPoint[mMonthPoint.size - 1].x, y)
        mPath.lineTo(mMonthPoint[0].x, y)
        canvas.drawPath(mPath, mBaseShadowPaint)
    }

    private fun onDrawLineX(canvas: Canvas) {
        //y轴字体宽度
        val textWidth =  mYXAxisTextPaint.measureText("${maxTemp}°")
        //获取x间隔
        val xValue = (width.toFloat() - textWidth) / mMonthList.size - 1
        mMonthList.forEachIndexed { index, month ->
            val date = month.date?.split("-")
            date?.let {
                val dateText = "${it[1]}/${it[2]}"
                mYXAxisTextPaint.getTextBounds(dateText, 0, dateText.length, mYXAxisTextBounds)
                if (index % 5 == 0 || index == mMonthList.lastIndex) {
                    canvas.drawText(dateText, index * xValue + textWidth - mMarginLeftAndBottom - mMarginTextLine , height.toFloat() - mMarginLeftAndBottom, mYXAxisTextPaint)
                }
                val lineX = index * xValue + textWidth + mMarginLeftAndBottom + mMarginTextLine
                val lineY = height - mYXAxisTextBounds.height() - mMarginLeftAndBottom - mMarginTextLine
                if(month.date == mCurrentDay) {
                    canvas.drawLine(lineX, 0f, lineX, lineY, mSelectLinePaint)
                    canvas.drawCircle(mMonthPoint[index].x, mMonthPoint[index].y, 10f, mStrTextPaint)
                    val strText = "${dateText}日 最高${month.day?.temperature}°"
                    mStrTextPaint.getTextBounds(strText, 0, strText.length, mStrTextRect)
                    //绘制温度背景
                    val textBgRect = RectF()
                    textBgRect.left = mMonthPoint[index].x - mStrTextRect.width() / 2 - 20
                    textBgRect.right = mMonthPoint[index].x + mStrTextRect.width() / 2 + 20
                    textBgRect.bottom = mMonthPoint[index].y - mStrTextRect.height() / 2 - 10
                    textBgRect.top = textBgRect.bottom - mStrTextRect.height() - 20
                    canvas.drawRoundRect(textBgRect, 30f,30f, mSelectLinePaint)
                    canvas.drawText(strText, textBgRect.centerX() - mStrTextRect.width() / 2,textBgRect.centerY() + mStrTextRect.height() / 2 - 5, mStrTextPaint)
                }
                canvas.drawLine(lineX, 0f, lineX, lineY, mDashLinePaint)
            }
        }
    }

    private fun onDrawLineY(canvas: Canvas) {
        val yValue = (height - mYXAxisTextBounds.height() - mMarginLeftAndBottom - mMarginTextLine) / 3
        yValue / (maxTemp - minTemp)
        mYXAxisTextPaint.getTextBounds("${maxTemp}°", 0, "${maxTemp}°".length, mYXAxisTextBounds)
        for (index in 0..3) {
            if (index == 0) continue
            canvas.drawLine(mMarginLeftAndBottom + mMarginTextLine + mYXAxisTextBounds.width(), index * yValue, width.toFloat(), index * yValue, mDashLinePaint)
            if (index == 1) {
                canvas.drawText("${maxTemp}°", mMarginLeftAndBottom, index * yValue + mYXAxisTextBounds.height() / 2, mYXAxisTextPaint)
            }else if (index == 2) {
                canvas.drawText("${minTemp}°", mMarginLeftAndBottom, index * yValue + mYXAxisTextBounds.height() / 2, mYXAxisTextPaint)
            }
        }
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val selectWidth = (width - mMarginLeftAndBottom - mMarginTextLine) / mMonthList.size
        val selectIndex = (event.x -  mMarginLeftAndBottom - mMarginTextLine) / selectWidth
        when(event.action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE -> {
                if (selectIndex >= 0 && selectIndex < mMonthList.size) {
                    mCurrentDay = mMonthList[selectIndex.toInt()].date!!
                }
                invalidate()
            }
        }
        return true
    }

    fun setDate(monthList: List<Month>) {
        mMonthList = monthList.toMutableList()
        maxTemp = monthList.maxOf { it.day?.temperature?.toInt() ?: 0 }
        minTemp = monthList.minOf { it.day?.temperature?.toInt() ?: 0 }
        invalidate()
    }

}

图片效果
在这里插入图片描述

CruelLei
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 温度折线图,使用自定义View实现天气折线图效果
weixin_42461108的博客
05-28 1229
下面会详细的介绍实现的过程。1.构想思路其实在拿到设计的一个效果，我们首先要做的就是去思考，怎么实现，就算不好实现，也要实现一个折中的两边都可以妥协的方案。由于当前是要展示10天以上的天气的情况，那么如果采用一个view绘制的形式肯定会影响到性能，那其实很快就想到了ListView，这不就是一个横向的ListView的效果么，考虑到ListView并没有横向的效果，转而就想到了RecyclerVi...
android自定义View绘制天气温度曲线
热门推荐
实现红萝卜的梦想
11-29 1万+
转载请注明出处：http://blog.csdn.net/kaku2013/article/details/50091387大家好，不久前写了个绘制天气温度曲线功能的demo今天抽空来和大家分享一下。效果图如下：一般绘制图表，可以直接使用类库来实现，类似的类库还是很多的。例如：hellocharts-android WilliamChart MPAndroidChart 上述类库功能很多，可以
android记录温度变化曲线
02-02
记录温度变化曲线的android程序，单片机采集到温度信息通过蓝牙传输到手机，用到SQLite储存数据，mpchart描绘曲线，可以用于学习蓝牙传输，mpchart
温度曲线图android源码,android 自定义控件-体温走势图(温度计+曲线+列表).doc
weixin_39843677的博客
05-29 428
android 自定义控件-体温走势图(温度计+曲线+列表).doc还剩34页未读，继续阅读下载文档到电脑，马上远离加班熬夜！亲，很抱歉，此页已超出免费预览范围啦！如果喜欢就下载吧，价低环保！内容要点：@SuppressLint("SimpleDateFormat")public String getViatlTimeForHm(){if(this.date==null)return null；S...
Android之24小时温度变化折线图
09-01
本次开发主要是画出了一天24小时不同温度变化的折线图，如何运用canvas画出不同的图案
android自定义折线图——之简单的温度折线图
qq_33776306的博客
10-20 2070
最近做了一个类似天气预告的demo，其中有一个自定义折线图，在网上找了很多例子，没有一个合适的，于是只能参考别人的例子，根据自己的想法写了一套demo.            在做自定义控件之前，先熟悉一下paint和canvas的简单使用。            链接：http://blog.csdn.net/qq_33776306/article/details/52290729    
java如何绘制温度实时曲线_Android实现天气预报温度/气温折线趋势图
weixin_29028611的博客
03-08 1543
Android实现天气预报温度/气温折线趋势图天气预报的APP应用中，难免会遇到绘制天气温度/气温，等关于数据趋势的折线或者曲线图，这类关于气温/温度的折线图，一般会有两条线，一条是高温线，一条是低温线。我之前介绍了一个Android平台上第三方开源框架的统计图表库MPAndroidChart(文章链接地址：http://blog.csdn.net/zhangphil/article/deta...
Android 自定义天气趋势图,Android之自定义控件实现天气温度折线图和饼状图
weixin_29795345的博客
05-26 863
以前写了个天气的APP，最近把他更新了一个版本，就抽取其中的天气温度折现图这个功能写了这篇博客，来与大家分享，希望对你有所帮助。效果如图：image代码MainActivity.Java/***** 饼状图和天气折线图*/public class MainActivity extends AppCompatActivity {private WeatnerChartView chart1;priv...
防墨迹天气 温度趋势图 (新) 柱状
08-06
"防墨迹天气 温度趋势图 (新) 柱状"这个项目显然关注于创建一个模仿墨迹天气应用中温度趋势展示的柱状图表。在这个过程中，我们将探讨几个关键的知识点： 1. **自定义View**： 在Android中，自定义控件通常是通过...
安卓图表报表相关-一个监测温度的APP通过socket接收温度信息并实时绘出温度曲线图.rar
07-29
一个监测温度的APP，通过socket接收温度信息，并实时绘出温度曲线图.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android实时动态曲线
10-05
Android实时动态曲线
天气预报曲线
05-26
Android天气预报曲线绘制
Android-该自定义控件是一个可以滑动改变温度值的表盘控件
08-13
该自定义控件是一个可以滑动改变温度值的表盘控件
Android 天气曲线
weixin_34038293的博客
07-17 214
参考:http://blog.csdn.net/qy274770068/article/details/51560148 转载于:https://www.cnblogs.com/jinglecode/p/5679213.html
使用Achartengine做平滑曲线图和温度显示柱状图
u010411826的专栏
01-15 3966
详细注解代码里面有，就不一一说明了，说下需要注意的事项： renderer.setPanEnabled(true, false);// 设置横坐标可以滑动，纵坐标不可以 renderer.setZoomEnabled(false, false);// 直接设置setZoomEnabled(false);不管用 关键代码： 圆滑单曲线： /** * 圆滑
Android 自定义 温度计控件
m0_46582892的博客
11-07 882
自定义View
Android之自定义控件实现天气温度折线图和饼状图
weixin_30810583的博客
02-28 183
以前写了个天气的APP，最近把他更新了一个版本，就抽取其中的天气温度折现图这个功能写了这篇博客，来与大家分享，希望对你有所帮助。 效果如图： 代码： MainActivity.Java /**** * 饼状图和天气折线图 */ public class MainActivity extends AppCompatActivity { ...
MPAndroidChart绘制动态曲线，Android天气预报变化曲线图
最新发布
weixin_62141219的博客
11-19 1473
CustomMarkerView代码。mainactivity代码。
Android自定义View实战---圆盘温度计
gongwq的博客
07-30 5006
了解了基本的自定义view基础后，现在我们就来实践下自定义view，也是看到我华为手机上自带的天气预报软件后，想着模仿做一个，于是，我自己尝试了下，虽然不算太像，但是还算能看，期待后期的改进。 通过本文你可以用到以下技术： 1）view的测量 2）canvas绘图技巧 3）接口回调 4）触摸事件的处理 最终效果如下所示 可以通过输入框自己设定最低、最高温度和当前温度（这是为我天气
PHP利用pchart绘制股票趋势图与柱状图实例
对于线型趋势图（line），会绘制出股票价格随时间的变化趋势；对于柱形图（bar），则会展示每日或每段时间内的成交量。 7. 最后，利用pChart类库的绘制函数，生成股票趋势图和柱形图，并可能输出到HTML页面供用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值