Confeccionar una aplicación que permita ingresar los gastos de tres meses y luego al presionar un botón mostrar un gráfico de tarta que represente los gastos de cada mes.
Crearemos un proyecto llamado: 'Compose31'
La interfaz visual a implementar debe ser similar a:
El código a implementar en Kotlin para obtener dicha funcionalidad es:
package com.tutorialesprogramacionya.compose31 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.Canvas import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Size import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.unit.dp class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { PantallaPrincipal() } } } @Composable fun PantallaPrincipal() { var mes1 by remember { mutableStateOf("") } var mes2 by remember { mutableStateOf("") } var mes3 by remember { mutableStateOf("") } var visible by remember { mutableStateOf(false)} Column() { OutlinedTextField( value = mes1, onValueChange = { mes1 = it }, label = { Text("Gastos del mes 1") }, modifier = Modifier .fillMaxWidth() .padding(10.dp), singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = Color.Red, unfocusedBorderColor = Color.Red), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) ) OutlinedTextField( value = mes2, onValueChange = { mes2 = it }, label = { Text("Gastos del mes 2") }, modifier = Modifier .fillMaxWidth() .padding(10.dp), singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = Color.Green, unfocusedBorderColor = Color.Green), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) ) OutlinedTextField( value = mes3, onValueChange = { mes3 = it }, label = { Text("Gastos del mes 3") }, modifier = Modifier .fillMaxWidth() .padding(10.dp), singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = Color.Blue, unfocusedBorderColor = Color.Blue), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) ) Button(onClick = { visible=true },modifier = Modifier .fillMaxWidth() .padding(10.dp),) { Text(text = "Mostrar gráfico de tarta") } if (visible && mes1!="" && mes2!="" && mes3!="") GraficoTarta(mes1 = mes1.toInt(), mes2 = mes2.toInt(), mes3 = mes3.toInt()) } } @Composable fun GraficoTarta(mes1:Int,mes2:Int,mes3:Int) { val suma =mes1+mes2+mes3 val grados1=mes1.toFloat()/suma.toFloat()*360 val grados2=mes2.toFloat()/suma.toFloat()*360 val grados3=mes3.toFloat()/suma.toFloat()*360 Canvas(modifier = Modifier.fillMaxSize()) { val diametro=if(size.width>size.height) size.height else size.width drawArc(startAngle = 0f,sweepAngle = grados1,useCenter = true,color= Color.Red,size = Size(diametro,diametro)) drawArc(startAngle = grados1,sweepAngle = grados2,useCenter = true,color= Color.Green,size = Size(diametro,diametro)) drawArc(startAngle = grados1+grados2,sweepAngle = grados3,useCenter = true,color= Color.Blue,size = Size(diametro,diametro)) } }
Guardamos el estado de los 3 valores ingresados por teclado y una bandera que nos indica si se ha presionado el botón para mostrar el gráfico de tarta:
var mes1 by remember { mutableStateOf("") } var mes2 by remember { mutableStateOf("") } var mes3 by remember { mutableStateOf("") } var visible by remember { mutableStateOf(false)}
En una columna componemos tres OutlineTextField:
Column() { OutlinedTextField( value = mes1, onValueChange = { mes1 = it }, label = { Text("Gastos del mes 1") }, modifier = Modifier .fillMaxWidth() .padding(10.dp), singleLine = true, colors = TextFieldDefaults.outlinedTextFieldColors( focusedBorderColor = Color.Red, unfocusedBorderColor = Color.Red), keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) )
Cuando la bandera visiblle se encuentra en verdadero y los tres datos se encuentran cargados se procede a llamar a la función componible GraficoTarta:
Obtenemos la cantidad de grados que le corresponde a cada gasto y mediante la llamada a la función drawArc dibujamos cada trozo de tarta:
@Composable fun GraficoTarta(mes1:Int,mes2:Int,mes3:Int) { val suma =mes1+mes2+mes3 val grados1=mes1.toFloat()/suma.toFloat()*360 val grados2=mes2.toFloat()/suma.toFloat()*360 val grados3=mes3.toFloat()/suma.toFloat()*360 Canvas(modifier = Modifier.fillMaxSize()) { val diametro=if(size.width>size.height) size.height else size.width drawArc(startAngle = 0f,sweepAngle = grados1,useCenter = true,color= Color.Red,size = Size(diametro,diametro)) drawArc(startAngle = grados1,sweepAngle = grados2,useCenter = true,color= Color.Green,size = Size(diametro,diametro)) drawArc(startAngle = grados1+grados2,sweepAngle = grados3,useCenter = true,color= Color.Blue,size = Size(diametro,diametro)) } }
Tomamos como ancho y alto el mismo valor para que la tarta sea un círculo:
val diametro=if(size.width>size.height) size.height else size.width
Este proyecto lo puede descargar en un zip desde este enlace: Compose31.zip