unit2- 대화형 Dice Roller 앱 만들기

3. 레이아웃 인프라 만들기 ?????

수정자 추가 

@Preview(showBackground = true)
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {

}

이 함수를 사용하면 modifier 매개변수를 전달할 수 있다. modifier 매개변수의 기본 값은 Modifier 객체이므로 

메서드 서명의 =Modifier 부분이다. 매개변수의 기본값을 사용하면 이후에 이 메서드를 호출하는 모든 사용자가 매개변수의 값을 전달할지 결정할 수 있다.

자체 Modifier 객체를 전달하면 UI 동작과 장식을 맞춤 설정할 수 있다.

Modifier 객체를 전달하지 않으면 기본값인  일단 Modifier 객체를 가정한다. 이 방법을 모든 매개변수에 적용할 수 있다.

 

기본값이 있는데 굳이 Modifier 인수를 전달해야하는지 의문이 들 수 있다. 그 이유는 컴포저블이 재구성을 거칠 수 있기 때문이다. 재구성: 기본적으로 @Composavle 메서드의 코드 블럭이 다시 실행된다는 의미이다.  Modifier 객체가 코드 블록에서 만들어지면 다시 만들어질 수 있으므로 이는 효율적이지 않다.

뭔 말인지 모르겠삼

@Composable
fun DiceRollerApp(){
    DiceWithButtonAndImage(modifier =Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center))

}

4 버튼 추가

DiceWithButtonAndImage(modifier: Modifier = Modifier){
    Column (
        modifier=modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Button(onClick = { /*TODO*/ }) {

            Text(stringResource(R.string.roll))
        }
    }
}

6. 이미지 추가

@Preview(showBackground = true)
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier){
    Column (
        modifier=modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    )
    {
        Image(
            painter = painterResource(R.drawable.dice_1),
        contentDescription = "1"
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { /*TODO*/ }) {

            Text(stringResource(R.string.roll))
        }

    }
}

7. 주사위 굴리기 로직 빌드 

Button을 대화형으로 만들기 

 

 

 9. 결론

요약

Compose를 사용하여 Android용 대화형 Dice Roller 앱을 만들었다.

-구성가능한 함수를 정의한다.

- 컴포지션으로 레이아웃을 만든다 -> ?

- Button 컴포저블을 사용하여 버튼을 만든다.

- Image 컴포저블을 사용하여 이미지를 표시한다.

 - 컴포저블을 사용하여 대화형 UI를 만든다.

- remember 컴포저블을 사용하여 컴포지션의 객체를 메모리에 저장한다.

- mutableStageOf() 함수로 UI를 새로고침하여 observable을 만든다.