Dice Roller App - remember API

Dice Roller App : remember API

대화형 Dice Roller 앱 만들기

대화형 Dice Roller 앱 만들기  |  Android Developers

위 페이지를 참고해서

remember API라는 것을 이용해 상태를 저장하는 버튼을 구성해

Dice Roller App을 만들어보자

 

개요

kotlin의 문법을 조금 더 알아봤으니 이를 이용해서 간단한 주사위 굴리기 어플을 만들어 보자

전에 배웠던 compose의 기본적인 내용들을 기억해낸다면 간단한 내용일 것이다

바로 최종코드를 보며 설명을 해보겠다

package com.example.diceroller


import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
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.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.diceroller.ui.theme.DiceRollerTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    DiceRollerApp()
                }
            }
        }
    }
}

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

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier){
    var result by remember { mutableStateOf(1) }
    val imageResource = when(result){
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }

    Column(
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(painter = painterResource(imageResource), contentDescription = null)
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text("Roll")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    DiceRollerTheme {
        DiceRollerApp()
    }
}

핵심포인트는

1. Button composable

2. remember API

3. spacer composable

이다

 

 

1. Button composable

Button Composable은 코드를 슬쩍 대충봐도 어떻게 사용하는 건지 감은 올거라고 생각한다

onclick에 전달되는 함수는

그 버튼을 클릭했을 때 하는 행동이 된다

 

우리가 조건문에서 1..6과 같이 범위를 표현할 수 있다고 했는데

이 친구를 range라고 한다

python이나 여타 다른 언어에서도 많이 봤을텐데

이 range가 가지는 메소드 중 하나인

Range.random()을 이용해서 랜덤을 구현했다

 

 

2. remember API

그리고 왠 처음 보는 remember라는 애가 튀어나왔는데

일단 지금 단계에서 완전한 이해는 어려운 것 같다

간단히 다음과 같이 이해하자

composable은 생명주기를 가지는데
처음엔 생성되고
다음엔 재생성되거나 유지되고
마지막엔 파괴된다
이때 composable은 '선언적'이라서 상태 값을 바꾸려면 재생성을 해야한다
그런데 재생성되면 그 이전의 상태값은 당연히 사라진다
여기서 remember라는 애를 활용하면 그 이전의 상태값을 저장해둘 수 있다

 

여기서 상태값이 바로 state인데 이 state에는 그냥 state와 mutableState 두가지 종류가 있다

이름만 봐도 알겠지만 왼쪽은 수정이 불가능한 값이고 오른쪽은 수정이 가능한 값이다

mutableStateOf는 전달된 값을 가지는 mutableState를 만들어서 리턴하는 함수이다

 

그러니까 다음 코드는

var result by remember { mutableStateOf(1) }

1이라는 값을 가지는 mutableState를 만들어서 그 값을 result에 저장한 것이다

 

3. Spacer composable

사실 이건 크게 어려운 건 아니다

근데 유용해보여서 한 번 짚고 넘어가겠다

Spacer라는 composable이 있는데 얘는 이름만 봐도 알 수 있듯이

그냥 공백을 추가해주는 애다

modifier이용해서 height나 width, size를 주면된다

 

이상의 3가지 핵심포인트를 이해하면

전체코드를 이해하는 것에 문제는 없을 것 같다

그럼 이제 앱을 빌드해보자

 

결과화면