Unit 2- 2 Lemonade 로직 구현하기

https://hanyeop.tistory.com/260

[Android] Jetpack Compose 제트팩 컴포즈 사용해보기 - (2) 기초 사용법

1. 우선 첫 번째 기본 화면을 클릭하면 두 번쨰로 넘어가도록 한다.  

 

 

2. 기본 로직 구현한다. 

 

 

---

3. 기본 로직 중 중복되는 코드 (Column 부분) 을 LemonTextAndImage로 바꾼다.  ->>>>>>>>>>모르겠다 

@Composable
fun LemonTextAndImage(
    textResource : Int,
    drawableResource : Int,
    //contentResource: Int,
    onImageClick:() -> Unit,
    modifier: Modifier = Modifier
){
    Column (
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ){
        Text(text = stringResource(textResource)
            , fontSize = 18.sp)
        Spacer(modifier = Modifier.height(16.dp))
        Image(painter = painterResource(drawableResource),
            contentDescription = "1",
            modifier = Modifier
                .wrapContentSize()
                .clickable(onClick = onImageClick)
                .border(
                    BorderStroke(2.dp, Color(105, 205, 216)),
                    shape = RoundedCornerShape(4.dp)
                )
                .padding(16.dp)
        )
    }//Column body

}

LemonTextAndImage() 함수의 인수로 textResource: Int, 형태로 주는데 이 때

 R.string.select 같은 것은 Int 형태이다. 

근데 onImageClick : () -> Unit 이 형태 참 이해가 안 간다.

---

 

4.  사용자가 레몬을 압착(탭)해야 하는 횟수는 2와 4 사이의 랜덤 숫자여야 한다.

이 랜덤 숫자는 사용자가 나무에서 레몬을 새로 선택할 때마다 달라진다. 

 

1 -> {
    LemonTextAndImage(R.string.select,R.drawable.lemon_tree,
    onImageClick = {
        currentStep= 2
        squeezeCount = (2..4).random()
    })
} //1

step2에서는 2와 4 사이의 랜덤 숫자를 주어서 해당 수 만큼 탭을 한 뒤에 step3로 넘어간다. 

 

https://developer.android.com/jetpack/compose/modifiers-list#Border

테두리 추가 

Compose 수정자 목록  |  Jetpack Compose  |  Android Developers

modifier = Modifier
    .wrapContentSize()
    .clickable(onClick = onImageClick)
    .border(
        BorderStroke(2.dp, Color(105, 205, 216)),
        shape = RoundedCornerShape(4.dp)
    )
    .padding(16.dp)

modifier.border() 를 통해 테두리를 줄 수 있다. 

---

전체 

package com.example.lemonade

import android.graphics.Paint.Align
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.lemonade.ui.theme.LemonadeTheme

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

@Composable
fun LemonTextAndImage(
    textResource : Int,
    drawableResource : Int,
    //contentResource: Int,
    onImageClick:() -> Unit,
    modifier: Modifier = Modifier
){
    Column (
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ){
        Text(text = stringResource(textResource)
            , fontSize = 18.sp)
        Spacer(modifier = Modifier.height(16.dp))
        Image(painter = painterResource(drawableResource),
            contentDescription = "1",
            modifier = Modifier
                .wrapContentSize()
                .clickable(onClick = onImageClick)
                .border(
                    BorderStroke(2.dp, Color(105, 205, 216)),
                    shape = RoundedCornerShape(4.dp)
                )
                .padding(16.dp)
        )
    }//Column body

}


@Composable
fun LemonApp() {
    var currentStep by remember {
        mutableStateOf(1)
    }

    var squeezeCount by remember{
        mutableStateOf(0)
    }
    // A surface container using the 'background' color from the theme
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colors.background
    ) {

        //조건문에 따라서 이미지와 택스트 보여죽
        when(currentStep) {
            1 -> {
                LemonTextAndImage(R.string.select,R.drawable.lemon_tree,
                onImageClick = {
                    currentStep= 2
                    squeezeCount = (2..4).random()
                })
            } //1
            2 -> {
                LemonTextAndImage(R.string.select,R.drawable.lemon_squeeze,
                onImageClick = {
                    squeezeCount -- // 한번 누를 때마다 squeezeCount 하나씩 감소
                    if(squeezeCount==0){  // 계속 탭 하다가  0이 되면 3단계로 넘어간다.
                        currentStep = 3
                    } //if
                })
            } //2

            3->{
                LemonTextAndImage(
                    textResource = R.string.drink,
                    drawableResource =R.drawable.lemon_drink ,
                    onImageClick = {
                        currentStep=4
                    })
            } //3

            4 -> {
                LemonTextAndImage(
                    textResource = R.string.restart,
                    drawableResource = R.drawable.lemon_restart,
                    onImageClick = {
                        currentStep =1

                    })
            }//4
        } //when

    }  //Surface의 body
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    LemonadeTheme {
        LemonApp()
    }
}

---

여기서도 onImageClick = {  } 형태 이해하기