YuSkyBlue/Jetpack-Compose-Tutorial

Jetpack-Compose-Tutorial

🍎1 Chapter

Column

verticalArragement

Arrangement.Top

Arrangement.Center

Arrangement.Bottom

li> Arrangement.SpaceBetween

Arrangement.SpaceAround

Arrangement.SpaceEvenly

horizontalAlignment

Row

- horizontalArrangement - verticalAlignment

🍎2 Chapter

border / offset

fillMaxWidth

fillMaxSize

🍎3 Chapter

Card

RoundCornerShape

elevation

Box

painter

contentScale

contentAlignment

Brush.verticalGradient / startY

🍎4 Chapter

fontFamily

buildAnnotatedString

withStyle / append

TextDecoration

🍎5 Chapter

TextField / label

onValueChange

scafooldState / append

showSnackbar

🍎6 Chapter

itemsIndex / items

why have to use LazyColumn

scrollState

🍎7 Chapter

ConstrainSet ex) greenBox / redBox

createHorizontalChain

ConstrainLayout( constrainst, modifier= ~~)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val constraints = ConstraintSet {
                val greenBox = createRefFor("greenBox")
                val redBox = createRefFor("redBox")
//                val guildline= createGuidelineFromTop(0.5f)

                constrain(greenBox) {
//                    top.linkTo(guildline)
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)

                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                constrain(redBox) {
                    top.linkTo(parent.top)
                    start.linkTo(greenBox.end)
                    end.linkTo(parent.end)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                createHorizontalChain( greenBox, redBox, chainStyle = ChainStyle.Packed)

            }
            ConstraintLayout(constraints, modifier = Modifier.fillMaxWidth()){
                Box(modifier = Modifier
                    .background(Color.Green)
                    .layoutId("greenBox"))
                Box(modifier = Modifier
                    .background(Color.Red)
                    .layoutId("redBox"))

            }
        }
    }
}

🍎8 Chapter

animationDpAsState

animationSeec / infiniteRepeatable / repeatMode = RepearMode.Reverse

ConstrainLayout( constrainst, modifier= ~~)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            var sizeState by remember { mutableStateOf(200.dp) }
            val size by animateDpAsState(
                targetValue = sizeState,
                tween(
                    durationMillis = 1000
                )
            )
            val inifiniteTransition = rememberInfiniteTransition()
            val color by inifiniteTransition.animateColor(
                initialValue = Color.Red,
                targetValue = Color.Green,
                animationSpec = infiniteRepeatable(
                    tween(durationMillis = 2000),
                    repeatMode = RepeatMode.Reverse
                )
            )

            Box(
                modifier = Modifier
                    .size(size)
                    .background(color),
                contentAlignment = Alignment.Center
            ) {
                Button(onClick = {
                    sizeState += 50.dp
                }) {
                    Text(text = "Increase Size")
                }
            }
        }
    }
}

🍎9 Chapter

animationDpAsState

drawArc / LaunchedEffect

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState) 
        setContent {
            Box(contentAlignment = Alignment.Center,
                modifier = Modifier.fillMaxSize()
            ){
                CircularProgressBar(percentage = 0.8f, number = 100)
            }
        }
    }
}

@Composable
fun CircularProgressBar(
    percentage: Float,
    number: Int,
    fontSize: TextUnit = 28.sp,
    radius: Dp = 50.dp,
    color: Color = Color.Green,
    strokeWidth: Dp = 8.dp,
    animDuration: Int = 2000,
    animDelay: Int = 0
) {
    var animationPlayed by remember {
        mutableStateOf(false)
    }
    var curPercentage = animateFloatAsState(
        targetValue = if(animationPlayed) percentage else 0f,
        animationSpec = tween(
            durationMillis = animDuration,
            delayMillis = animDelay
        )
    )
    LaunchedEffect(key1 = true){
        animationPlayed = true
    }
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier.size(radius * 2f)
    ) {
        Canvas(modifier = Modifier.size(radius * 2f) )
        {
            drawArc(
                color = color,
                -90f,
                360 * curPercentage.value,
                useCenter = false,
                style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round )
            )

        }
        Text(
            text = (curPercentage.value  * number).toInt().toString(),
            color = Color.Black,
            fontSize =  fontSize,
            fontWeight = FontWeight.Bold
        )

    }
}