ComposePuzzlers.kt

package ru.alexpanov.composepuzzlers

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.LocalContentColor
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension

@Composable
fun Sample1() {
    Box(contentAlignment = Alignment.Center) {
        Text("Compose puzzlers", Modifier.fillMaxWidth())
    }
}

@Composable
fun Sample1Fix() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text("Compose puzzlers")
    }
}

@Composable
fun Sample2() {
    Column {
        Box(
            Modifier
                .width(100.dp)
                .fillMaxHeight()
                .background(Color.Red)
        )
        Box(
            Modifier
                .width(100.dp)
                .fillMaxHeight()
                .background(Color.Green)
        )
    }
}

@Composable
fun Sample3() {
    Column {
        Box(
            Modifier
                .width(100.dp)
                .fillMaxHeight(fraction = 0.5f)
                .background(Color.Red)
        )
        Box(
            Modifier
                .width(100.dp)
                .fillMaxHeight(fraction = 0.5f)
                .background(Color.Green)
        )
    }
}

@Composable
fun Sample3Fix() {
    Column {
        Box(
            Modifier
                .width(100.dp)
                .weight(1f)
                .background(Color.Red)
        )
        Box(
            Modifier
                .width(100.dp)
                .weight(1f)
                .background(Color.Green)
        )
    }
}

@Composable
fun Sample4() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text(
            "Очень длинный текст, который не влазит в одну строку",
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            style = MaterialTheme.typography.h6
        )
        Icon(
            Icons.Default.KeyboardArrowDown,
            contentDescription = null,
            modifier = Modifier.size(32.dp)
        )
    }
}

@Composable
fun Sample4Fix() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text(
            "Очень длинный текст, который не влазит в одну строку",
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            style = MaterialTheme.typography.h6,
            modifier = Modifier.weight(1f, fill = false)
        )
        Icon(
            Icons.Default.KeyboardArrowDown,
            contentDescription = null,
            modifier = Modifier.size(32.dp)
        )
    }
}

@Composable
fun Sample5() {
    Row {
        Text(
            "Hello",
            style = MaterialTheme.typography.h3
        )
        Text(
            "world",
            style = MaterialTheme.typography.body1,
            modifier = Modifier.alignByBaseline()
        )
    }
}

@Composable
fun Sample5Fix() {
    Row {
        Text(
            "Hello",
            style = MaterialTheme.typography.h3,
            modifier = Modifier.alignByBaseline()
        )
        Text(
            "world",
            style = MaterialTheme.typography.body1,
            modifier = Modifier.alignByBaseline()
        )
    }
}

@Composable
fun Sample6() {
    CompositionLocalProvider(
        LocalContentAlpha provides 0f
    ) {
        Column {
            Text("Hello")
            CompositionLocalProvider(
                LocalContentColor provides Color.Red
            ) {
                Text("world")
            }
        }
    }
}

@Composable
fun Sample6Fix() {
    CompositionLocalProvider(
        LocalContentAlpha provides 0f
    ) {
        Column {
            Text("Hello")
            CompositionLocalProvider(
                LocalContentAlpha provides 1f,
                LocalContentColor provides Color.Red
            ) {
                Text("world")
            }
        }
    }
}

@Composable
fun Sample7() {
    Box(
        Modifier
            .size(64.dp)
            .padding(32.dp)
            .background(Color.Red)
    )
}

@Composable
fun Sample7Fix() {
    Box(
        Modifier
            .padding(32.dp)
            .size(64.dp)
            .background(Color.Red)
    )
}

@Composable
fun Sample8() {
    Box(
        Modifier
            .padding(32.dp)
            .background(Color.Red)
            .size(64.dp)
            .clip(CircleShape)
    )
}

@Composable
fun Sample8Fix() {
    Box(
        Modifier
            .padding(32.dp)
            .clip(CircleShape)
            .background(Color.Red)
            .size(64.dp)
    )
}

@Composable
fun Sample9() {
    Box(
        Modifier
            .padding(32.dp)
            .size(128.dp)
            .background(Color(0xFFFF00FF))
            .padding(16.dp)
            .clip(CircleShape)
            .background(Color.Black)
            .padding(16.dp)
            .border(1.dp, Color.White)
    )
}

@Composable
fun Sample10() {
    Column(Modifier.width(IntrinsicSize.Min)) {
        Row(horizontalArrangement = Arrangement.spacedBy(32.dp)) {
            Box(
                Modifier
                    .size(64.dp)
                    .background(Color.Blue)
            )
            Box(
                Modifier
                    .size(64.dp)
                    .background(Color.Blue)
            )
        }
        Spacer(Modifier.height(32.dp))
        Box(
            Modifier
                .height(32.dp)
                .background(Color.Blue)
                .fillMaxWidth()
        )
    }
}

@Composable
fun Sample11() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(64.dp),
        modifier = Modifier.background(Color.Yellow)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            BlackSquare()
            BlackSquare()
        }
        BlackSquare()
    }
}

@Composable
private fun BlackSquare() {
    Box(
        Modifier
            .size(64.dp)
            .background(Color.Black)
    )
}

@Composable
fun Sample12() {
    ConstraintLayout(Modifier.fillMaxSize()) {
        val (box1, box2) = createRefs()
        Box(
            Modifier
                .size(64.dp)
                .background(Color.Red)
                .constrainAs(box1) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )
        Box(
            Modifier
                .height(64.dp)
                .fillMaxWidth()
                .background(Color.Green)
                .constrainAs(box2) {
                    top.linkTo(box1.bottom)
                    start.linkTo(box1.end)
                    end.linkTo(parent.end)
                }
        )
    }
}

@Composable
fun Sample12Fix() {
    ConstraintLayout(Modifier.fillMaxSize()) {
        val (box1, box2) = createRefs()
        Box(
            Modifier
                .size(64.dp)
                .background(Color.Red)
                .constrainAs(box1) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )
        Box(
            Modifier
                .height(64.dp)
                .fillMaxWidth()
                .background(Color.Green)
                .constrainAs(box2) {
                    width = Dimension.fillToConstraints
                    top.linkTo(box1.bottom)
                    start.linkTo(box1.end)
                    end.linkTo(parent.end)
                }
        )
    }
}

@Composable
fun Sample13() {
    Column(Modifier.custom()) {
        Text("Hello")
        Text("Custom")
        Text("Modifier")
    }
}

fun Modifier.custom() = then(Modifier.drawWithContent {
    val canvasWidth = size.width
    val canvasHeight = size.height
    val strokeWidth = 2f

    drawRect(Color.Black)
    drawLine(
        start = Offset(x = canvasWidth, y = 0f),
        end = Offset(x = 0f, y = canvasHeight),
        color = Color.White,
        strokeWidth = strokeWidth
    )
    drawLine(
        start = Offset(x = 0f, y = 0f),
        end = Offset(x = canvasWidth, y = canvasHeight),
        color = Color.White,
        strokeWidth = strokeWidth
    )
})

@Composable
fun Sample14() {
    CustomLayout {
        Box(Modifier
            .size(64.dp)
            .background(Color.Red))
        Box(Modifier
            .size(64.dp)
            .background(Color.Green))
    }
}

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }
        layout(constraints.maxWidth, constraints.maxHeight) {
            var xPosition = constraints.maxWidth
            var yPosition = constraints.maxHeight
            placeables.forEach { placeable ->
                xPosition -= placeable.width
                yPosition -= placeable.height
                placeable.placeRelative(x = xPosition, y = yPosition)
            }
        }
    }
}