0

Estoy trabajando en un proyecto de Android utilizando Jetpack Compose y necesito crear una figura hexagonal con las esquinas redondeadas. He estado buscando en la documentación oficial y en varios tutoriales, pero no he encontrado una forma clara de hacerlo.

Con Shape puedo hacer una forma hexagonal de esta manera:

@Composable
fun ExampleBox() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentSize(Alignment.Center)
    ) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .clip(CutCornerShape(25))
                .background(Color.Red)
        )
    }
}

Queda asi, sin las esquinas redondeadas :

Hexagono

Tambien existe la opcion de poner las esquinas redondeadas : .clip(RoundedCornerShape(25)) pero no hay forma de poner también :.clip(CutCornerShape(25))

introducir la descripción de la imagen aquí

Finalmente hice una función con Canvas para crear el hexagono y canvas.drawOutline para darle forma redondeada a las esquinas.

Aquí está el código que tengo hasta ahora:

@Composable
fun Hexagon() {
    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
        Canvas(modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f)) {
            val rect = Rect(Offset.Zero, size)
            val hexagonPath = Path().apply {
                val side = rect.width / 4 // Tamaño del hexágono
                val triangleHeight = side * sqrt(3.0f) / 2
                val centerX = rect.center.x
                val centerY = rect.center.y

                moveTo(centerX - side / 2, centerY - triangleHeight)
                lineTo(centerX + side / 2, centerY - triangleHeight)
                lineTo(centerX + side, centerY)
                lineTo(centerX + side / 2, centerY + triangleHeight)
                lineTo(centerX - side / 2, centerY + triangleHeight)
                lineTo(centerX - side, centerY)
                close()
            }
            drawIntoCanvas { canvas ->
                canvas.drawOutline(
                    outline = Outline.Generic(hexagonPath),
                    paint = Paint().apply {
                        color = Color.Green
                        pathEffect = PathEffect.cornerPathEffect(rect.maxDimension / 24) // Aquí ajustamos que las esquinas sean menos o más redondeadas
                    }
                )
            }
        }
    }
}

Este es el resultado:

Este es el resultado

Pero mi idea es hacer algo como esto: [https://www.youtube.com/shorts/-C2ApAsxZwg]

Cuyo resultado es este:

Hexagono Youtube

Hexagono Youtube2

En el codigo se puede observar que hay un HexagonShape pero este no está incluido en las librerias de Android.

Mi código crea un hexágono con las esquinas redondeadas, pero me parece demasiado código para hacer una cosa tan básica y me gustaría saber si hay una forma más sencilla o más "idiomática" de hacerlo en Jetpack Compose. ¿Alguien tiene alguna sugerencia o puede señalarme en la dirección correcta?

Gracias de antemano por cualquier ayuda que puedan proporcionar.

1 respuesta 1

0

Si lo que buscas es crear una forma para usar en el modificador clip, necesitas crear una clase que implemente Shape.

Una posible implementación sería la siguiente (hecha con modificaciones de esta):

object HexagonShape : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline = Outline.Generic(
        Path().apply {
            val radius = if (size.width > size.height) size.width / 2f else size.height / 2f
            var angle = 2.0 * Math.PI / 6
            val centerx = size.width / 2f
            val centery = size.height / 2f
            moveTo(
                centerx + radius * cos(0.0).toFloat(),
                centery + radius * sin(0.0).toFloat()
            )
            for (i in 1 until 6) {
                lineTo(
                    centerx + radius * cos(angle * i).toFloat(),
                    centery + radius * sin(angle * i).toFloat()
                )
            }
            close()
        }
    )
}

@Composable
fun Hexagon() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .clip(HexagonShape)
            .background(androidx.compose.ui.graphics.Color.Red)
    ) {
        Text(text = "Hola", modifier = Modifier.align(Alignment.Center))
    }
}

Puedes ver que el procedimiento es muy similar al que seguiste para dibujarlo en un Canvas así que seguramente te será fácil.

En este caso decidí que sea un singleton para no tener que instanciarla.

2
  • Si tal y como dices lo he intentando también, implementando Shape , creas un hexágono perfecto. El problema es que no consigo darle un aspecto de esquinas redondeadas tal y como lo puedes hacer con Canvas. Commented el 17 jun. 2023 a las 8:51
  • @Jose probablemente no haya una solución simple. Tendrás que dibujar los arcos y las líneas rectas directamente.
    – Mateo
    Commented el 17 jun. 2023 a las 16:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.