Android Compose学习之绘制速度表盘

 更新时间:2023年11月17日 10:57:04   作者:jianghe_130  
这篇文章主要为大家详细介绍了Android Compose绘制速度表盘的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下

内心想法XX

compose已经发布好久了,还没有用过compose写过UI,之前只是在官网上了解过,看着这可组合函数嵌套,我就脑袋大,更Flutter一个德行,我的内心是抵触的,还是觉得用XML写香,抱着试一试的心态,打算用compose应用于实际项目中。(还是得多接触,多学习,真的是很香YYDS)

无图无真相

上图,测试:通过滑动slider也是安卓称ProgressBar来改变速度

代码部分

@Composable
    fun SpeedContent(){
    	//添加数字动画,避免速度变化过于突兀
        var mytargetValue by remember { mutableStateOf(0) }
        val progressInt: Int by animateIntAsState(targetValue = mytargetValue)
        Column(modifier = Modifier
            .background(color = Color.White)
            .fillMaxSize(),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Slider(value = mytargetValue.toFloat(),
                onValueChange = {
                    mytargetValue = it.toInt() },
                modifier = Modifier.fillMaxWidth(),
                valueRange = 0f..180f)
            SpeederMeter(progressInt)
        }
    }

具体实现

@OptIn(ExperimentalTextApi::class)
@Composable
fun SpeederMeter(speedNum: Int,modifier: Modifier = Modifier
    .width(220.dp)
    .height(120.dp)
    .background(color = Color.White)){
    val centerPointColor = Color.Blue
    val colorCenterPoint1 = Color(0xFF000000)
    val colorCenterPoint2 = Color(0xFFEE3E07)
    val mersure = rememberTextMeasurer()
    fun getPointX(centerX:Float,angle:Int,circleRdius:Float,step:Int):Float{
        val angles = (angle*step).toDouble()
        val angle = Math.toRadians(angles)
        return centerX - cos(angle).toFloat()*(circleRdius)
    }

    fun getPointY(centerY:Float,angle:Int,circleRdius:Float,step:Int):Float{
        val angles = (angle*step).toDouble()
        val angle = Math.toRadians(angles)
        return centerY- sin(angle).toFloat()*(circleRdius)
    }
    val myUnit = "KM/H"
    val speedTextList = Array(7){(it*20).toString()}
    Box(modifier,
        contentAlignment = Alignment.BottomCenter
    ) {
        Canvas(modifier, onDraw = {
            val centerX = size.width/2
            val bottomY = size.height-50
            val myColorStops = arrayOf(0.0f to Color.White,1.0f to Color.Black)
            //画指针底座
            drawCircle(
                brush = Brush.radialGradient(colorStops = myColorStops),
                radius = 30f,
                center = Offset(centerX,bottomY+15.dp.value),
            )
            drawCircle(
                color = Color.White,
                radius = 23f,
                center = Offset(centerX,bottomY+15.dp.value)
            )
            drawCircle(
                color = Color.Red,
                radius = 20f,
                center = Offset(centerX,bottomY+15.dp.value)
            )
            //画单位
            drawText(
                textMeasurer = mersure,
                text = myUnit,
                style = TextStyle(color = Color.Black, fontSize = 12.sp, fontWeight = FontWeight(20), fontFamily = FontFamily.Serif),
                topLeft = Offset(centerX-50.dp.value,bottomY-90)
            )
            //画刻度
            repeat(61){
                val fontWeights = if( it%5==0){
                    if(it%10==0){
                        7f
                    }else{
                        4f
                    }
                }else{
                    2f
                }
                val lengths = if(it%5==0){
                    if(it%10==0){
                        25
                    }else{
                       22
                    }
                }else{
                    20
                }
                drawLine(
                    color = Color.Black,
                    start = Offset(
                        getPointX(centerX,it,bottomY,3),
                        getPointY(centerX,it,bottomY,3)
                    ),
                    end = Offset(
                        getPointX(centerX,it,bottomY-lengths,3),
                        getPointY(centerX,it,bottomY-lengths,3)
                    ),
                    strokeWidth = fontWeights,
                    cap = StrokeCap.Round
                )
            }
            //画数字
            repeat(speedTextList.size){
                val myTopLeft = Offset(
                    getPointX(centerX,it,bottomY-70,30)-25.dp.value,
                    getPointY(bottomY,it,bottomY-70,30))
                val colorType = if(it > 4){
                    Color.Red
                }else{
                    Color.Black
                }
                drawText(
                    textMeasurer = mersure,
                    text = speedTextList[it],
                    topLeft =myTopLeft,
                    style = TextStyle(colorType, fontSize = 11.sp, fontFamily = FontFamily.Serif)
                )
            }
            //画指针
            drawLine(
                color = Color.Red,
                start = Offset(
                    getPointX(centerX,speedNum,bottomY-30,1),
                    getPointY(centerX,speedNum,bottomY-30,1)
                ),
                end = Offset(
                    getPointX(centerX,speedNum,0f,1),
                    getPointY(centerX,speedNum,0f,1)
                ),
                strokeWidth = 15f,
                cap = StrokeCap.Round

            )
        })


    }

}

Compose还是蛮香的,用了就回不去了<捂脸>,只是这个代码的可读性没有Java的好。

到此这篇关于Android Compose学习之绘制速度表盘的文章就介绍到这了,更多相关Compose绘制速度表盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android Service生命周期详解

    Android Service生命周期详解

    这篇文章主要介绍了Android Service生命周期详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Android studio 混淆配置详解

    Android studio 混淆配置详解

    这篇文章主要介绍了Android studio 混淆配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Flutter与WebView通信方案示例详解

    Flutter与WebView通信方案示例详解

    这篇文章主要为大家介绍了Flutter与WebView通信方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Android 矢量室内地图开发实例

    Android 矢量室内地图开发实例

    这篇文章主要介绍了Android 矢量室内地图开发实例的相关资料,这里提供代码实例,及实现效果图,矢量室内对图简单DEMO,需要的朋友可以参考下
    2016-11-11
  • Android自定义控件之广告条滚动效果

    Android自定义控件之广告条滚动效果

    这篇文章主要为大家详细介绍了Android自定义控件之广告条滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 如何使用Flutter发布安卓应用

    如何使用Flutter发布安卓应用

    应用开发完了,当然需要发布了,下面来看看用 Flutter 开发的应用如何发布,本文只关注 Android 版本的发布
    2021-05-05
  • IDEA打包jar-解决找不到或无法加载主类 main的问题

    IDEA打包jar-解决找不到或无法加载主类 main的问题

    这篇文章主要介绍了IDEA打包jar-解决找不到或无法加载主类 main的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Android实现微信的图片选择器

    Android实现微信的图片选择器

    这篇文章主要为大家详细介绍了Android实现微信的图片选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android开发实现圆形图片功能示例

    Android开发实现圆形图片功能示例

    这篇文章主要介绍了Android开发实现圆形图片功能,涉及Android实现圆形图片的界面布局与CirImageView组件相关使用操作技巧,需要的朋友可以参考下
    2019-04-04
  • Android实现图片叠加效果的两种方法

    Android实现图片叠加效果的两种方法

    这篇文章主要介绍了Android实现图片叠加效果的两种方法,结合实例形式分析了Android实现图片叠加效果的两种操作方法与相关注意事项,需要的朋友可以参考下
    2016-08-08

最新评论