6. Unit 2 practice: click behavior - lemonade

Unit 2 연습문제인 lemonade app 을 만들어보았습니다. 

앞의 Dice Roller 를 참고하며 만들다보니 버튼 클릭시 화면 전환 기능 구현은 어렵지 않았는데, 오히려 UI 모양을 구현하는 것이 더 시간이 많이 걸리고 어려웠습니다. 

 

 

그래도 app 제작 과정에서 배운 것이 몇 가지 있습니다.

• Button 은 아래와 같이 색깔과 모양을 지정할 수 있습니다. chat-GPT와 Gemini의 도움을 받으면서도 RoundedCornerShape 찾느라 한 참 걸린 것 같습니다.
  Button(
      colors = ...
      shape = RoundedCornerShape(32.dp)
• Button 에 text 대신 image 를 넣을 수도 있는데, 저는 위 아래 Text와의 배치를 고민하다가 Box 로 묶는 방법으로 구현했습니다. 
• Button 과 Text 등의 요소간의 간격을 조정함에 있어서 Spacer 를 유용하게 사용할 수 있었습니다. Spacer는 각 요소의 중간말고도 끝에 배치할 수도 있습니다. 저는 아래처럼 weight 조정자를 통해서 간격 조정을 해보았습니다. 
  Spacer(modifier = Modifier.weight(0.1f))

아직 다음 사항은 잘 모르겠습니다.

• 스마트폰의 맨위에 상태표시줄을 제외하고 전체화면을 채우려면 어떻게 해야 하는지.

혹시 참고가 될 지 몰라서 작성한 코드의 주요 부분을 아래 공유합니다. 

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            LemonadeTheme {
                LemonadeApp()

            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LemonadeApp() {
    LemonadeWithImages(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)

    )
}

@Composable
fun LemonadeWithImages(modifier: Modifier = Modifier) {
    var currentStep by remember {mutableIntStateOf(1)}
    var squeezeCount by remember {mutableIntStateOf(0)}
    var squeezeMax by remember {mutableIntStateOf(0)}

    var myImage = when (currentStep) {
        1 -> R.drawable.lemon_tree
        2 -> R.drawable.lemon_squeeze
        3 -> R.drawable.lemon_drink
        else -> R.drawable.lemon_restart
    }

    var myImageDescription = when (currentStep) {
        1 -> R.string.lemon_Tree
        2 -> R.string.lemon
        3 -> R.string.lemonade
        else -> R.string.empty_Glass
    }

    var myText = when(currentStep) {
        1 -> R.string.tap_Lemon_Tree
        2 -> R.string.tap_Lemon
        3 -> R.string.tap_Lemonade
        else -> R.string.tap_empty_glass
    }

    Column (
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.CenterHorizontally

    ) {

        Box (modifier = modifier
            .weight(0.2f)
            .fillMaxWidth()
            .background(Color(0xFFE6C30E).copy(alpha = 0.7f))


        ) {
            Text(
                text = "Lemonade",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .padding(16.dp)
                    .height(30.dp)
                    .align(alignment = Alignment.Center)
            )
        }

        Spacer(modifier = Modifier.weight(0.1f))

        Box (modifier = modifier
            .weight(0.4f)
            .fillMaxWidth()



        ) {
            Button(
                onClick = {
                    when (currentStep) {
                        1 -> {
                            squeezeMax = (2..4).random()
                            currentStep++
                        }
                        2 -> {
                            squeezeCount++
                            if (squeezeCount == squeezeMax) currentStep++
                        }
                        3 -> currentStep++
                        else -> {
                            currentStep = 1
                            squeezeCount = 0
                        }
                    }

                },
                colors = ButtonDefaults.buttonColors(containerColor = Color.Green.copy(alpha = 0.2f)),
                shape = RoundedCornerShape(32.dp),
                modifier = Modifier
                    .padding(16.dp)
                    .size(250.dp)
                    .align(alignment = Alignment.Center),

                ) {}


            Image(
                painter = painterResource(id = myImage),
                contentDescription = stringResource(myImageDescription),
                modifier = modifier
                    .align(alignment = Alignment.Center)
            )
        }


        Text(
            text = stringResource(myText),
            fontSize = 18.sp,
            modifier = Modifier
                .weight(0.2f)
                .padding(16.dp)

        )

        Spacer(modifier = Modifier.weight(0.1f))
    }
}