快捷導(dǎo)航

Android Compose學(xué)習(xí)之繪制速度表盤(pán)

更新時(shí)間：2023年11月17日 10:57:04 作者：jianghe_130

這篇文章主要為大家詳細(xì)介紹了Android Compose繪制速度表盤(pán)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下

內(nèi)心想法XX

compose已經(jīng)發(fā)布好久了，還沒(méi)有用過(guò)compose寫(xiě)過(guò)UI，之前只是在官網(wǎng)上了解過(guò)，看著這可組合函數(shù)嵌套，我就腦袋大，更Flutter一個(gè)德行，我的內(nèi)心是抵觸的，還是覺(jué)得用XML寫(xiě)香，抱著試一試的心態(tài)，打算用compose應(yīng)用于實(shí)際項(xiàng)目中。(還是得多接觸，多學(xué)習(xí)，真的是很香YYDS)

無(wú)圖無(wú)真相

上圖，測(cè)試：通過(guò)滑動(dòng)slider也是安卓稱(chēng)ProgressBar來(lái)改變速度

代碼部分

@Composable
    fun SpeedContent(){
    	//添加數(shù)字動(dòng)畫(huà)，避免速度變化過(guò)于突兀
        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)
        }
    }

具體實(shí)現(xiàn)

@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)
            //畫(huà)指針底座
            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)
            )
            //畫(huà)單位
            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)
            )
            //畫(huà)刻度
            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
                )
            }
            //畫(huà)數(shù)字
            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)
                )
            }
            //畫(huà)指針
            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還是蠻香的，用了就回不去了<捂臉>，只是這個(gè)代碼的可讀性沒(méi)有Java的好。

到此這篇關(guān)于Android Compose學(xué)習(xí)之繪制速度表盤(pán)的文章就介紹到這了,更多相關(guān)Compose繪制速度表盤(pán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: