DiceRoller 복습

레이아웃 인프라 만들기

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.graphics.ImageBitmap
import androidx.compose.ui.input.key.Key.Companion.D
import androidx.compose.ui.modifier.modifierLocalOf
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 com.example.diceroller.ui.theme.DiceRollerTheme

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

            }
        }
    }
}
@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center))
        // 사용 가능한 공간이 최소한 내부에 있는 구성요소만큼 커야 한다고 지정한다
        //구성욧를 세로와 가로로 모두 중앙에 배치 

}

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

}

세로 레이아웃 만들기

Column () : 하위 요소를 세로 순서로 배치하는 컴포저블 레이아웃

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.graphics.ImageBitmap
import androidx.compose.ui.input.key.Key.Companion.D
import androidx.compose.ui.modifier.modifierLocalOf
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 com.example.diceroller.ui.theme.DiceRollerTheme

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

            }
        }
    }
}
@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center))
        // 사용 가능한 공간이 최소한 내부에 있는 구성요소만큼 커야 한다고 지정한다
        //구성욧를 세로와 가로로 모두 중앙에 배치


}

@Preview(showBackground = true)
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    Column (
        modifier=modifier,
        //modifier 인수는 Column 함수의 컴포저블이 modifier 인스턴스에서 호출된 제약 조건을 준수하도록 한다.  (?) 
        horizontalAlignment = Alignment.CenterHorizontally
        ) {
        //열이 너비를 기준으로 기기 화면의 중앙에 배치된다.

    } //Column body
}//DiceWithButtonAndImage

5. 버튼 추가

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.graphics.ImageBitmap
import androidx.compose.ui.input.key.Key.Companion.D
import androidx.compose.ui.modifier.modifierLocalOf
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 com.example.diceroller.ui.theme.DiceRollerTheme

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

            }
        }
    }
}
@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center))
        // 사용 가능한 공간이 최소한 내부에 있는 구성요소만큼 커야 한다고 지정한다
        //구성욧를 세로와 가로로 모두 중앙에 배치


}

//@Preview(showBackground = true)
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    Column (
        modifier=modifier,
        //modifier 인수는 Column 함수의 컴포저블이 modifier 인스턴스에서 호출된 제약 조건을 준수하도록 한다.  (?)
        horizontalAlignment = Alignment.CenterHorizontally
        ) {
        //열이 너비를 기준으로 기기 화면의 중앙에 배치된다.
        Button(onClick = {}) {
            Text(stringResource(R.string.roll))
        }

    } //Column body
}//DiceWithButtonAndImage

6. 이미지 추가

주사위 이미지는 Roll 버튼 위에 표시되어야 한다. Compose는 기본적으로 UI 구성요소를 순차적으로 배치한다.

즉 먼저 선언된 컴포저블이 먼저 표시된다.

버튼과 이미지 사이의 공간이 비좁다 - > 이를 해결하기 위해서 Spacer 컴포저블을 추가한다.

Spacer은 Modifier 매개변수를 사용한다.

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.graphics.ImageBitmap
import androidx.compose.ui.input.key.Key.Companion.D
import androidx.compose.ui.modifier.modifierLocalOf
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 com.example.diceroller.ui.theme.DiceRollerTheme

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

            }
        }
    }
}
@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center))
        // 사용 가능한 공간이 최소한 내부에 있는 구성요소만큼 커야 한다고 지정한다
        //구성욧를 세로와 가로로 모두 중앙에 배치


}

//@Preview(showBackground = true)
@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    Column (
        modifier=modifier,
        //modifier 인수는 Column 함수의 컴포저블이 modifier 인스턴스에서 호출된 제약 조건을 준수하도록 한다.  (?)
        horizontalAlignment = Alignment.CenterHorizontally
        //열이 너비를 기준으로 기기 화면의 중앙에 배치된다.

    ) {
        Image(painter = painterResource(R.drawable.dice_1), contentDescription = "1")
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {}) {
            Text(stringResource(R.string.roll))
        }

    } //Column body
}//DiceWithButtonAndImage

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

이제 필요한 모든 컴포저블이 있으므로 버튼을 탭하면 주사위를 굴리도록 앱을 수정해준다.

Button을 대화형으로 만들기

람다 함수 공부하기

주사위 굴리기는 무작위이다. 이를 코드에 반영하려면 랜덤 숫자를 생성해야한다.

Kotlin에서는 숫자 범위에 random() 메서드를 사용할 수 있다.

Button의 onClick 람다 본문에서 resut 변수를 1부터 6 사이의 범위로 설정하고 이 범위에서 random() 메서드를 호출한다.

Button(onClick = {
    result = (1..6).random()
}) {
    Text(stringResource(R.string.roll))
}

Dice Roller 앱에 조건문 추가

result 변수를 만들어 1 값으로 하드 코딩 해주었다. 하지만 result 변수의 값은 Roll 버튼을 탭하면 재설정되므로 표시되는 이미지를 결정해야한다.

컴포저블은 기본적으로 stateless이다. 즉 값을 보유하지 않고 시스템에서 언제든지 다시 호출할 수 있어 값이 재설정 된다. 그러나 Compose를 사용하면 이를 방지 가능

구성가능한 함수는 remember 컴포저블을 이용하여 메모리에 객체를 저장할 수 있다.

remember 컴포저블을 사용하려면 함수를 전달해야한다. mutableStateOf() 함수를 전달하고 함수에 1인수를 전달한다.

var result  by remember {
    mutableStateOf(1)
}

mutableStateOf() 함수는 result 변수 값이 업데이트되면 재구성이 트리거되고 결과 값이 반영되어 UI가 새로고침된다.

이제 버튼을 탭하면 result 변수가 랜덤 숫자 값으로 업데이트된다.

그러면 result 변수 -> 표시할 이미지를 결정하는 데 사용 가능

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
}

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.graphics.ImageBitmap
import androidx.compose.ui.input.key.Key.Companion.D
import androidx.compose.ui.modifier.modifierLocalOf
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 com.example.diceroller.ui.theme.DiceRollerTheme

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

            }
        }
    }
}
@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center))
        // 사용 가능한 공간이 최소한 내부에 있는 구성요소만큼 커야 한다고 지정한다
        //구성욧를 세로와 가로로 모두 중앙에 배치


}

//@Preview(showBackground = true)
@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,
        //modifier 인수는 Column 함수의 컴포저블이 modifier 인스턴스에서 호출된 제약 조건을 준수하도록 한다.  (?)
        horizontalAlignment = Alignment.CenterHorizontally
        //열이 너비를 기준으로 기기 화면의 중앙에 배치된다.

    ) {
        Image(painter = painterResource(id =imageResource), contentDescription = result.toString())
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = {
            result = (1..6).random()
        }) {
            Text(stringResource(R.string.roll))
        }

    } //Column body
}//DiceWithButtonAndImage

DiceRoller 결과화면.mp4

0.05MB

728x90

'2023 안드로이드 > 안드로이드 스터디' 카테고리의 다른 글

Unit 2- 2 Lemonade 로직 구현하기 (0)	2023.01.10
Unit2-1 Kotlin에서 null 허용 여부 사용 (2)	2023.01.10
unit2- 대화형 Dice Roller 앱 만들기 (0)	2022.12.29
taskmanager (0)	2022.12.26
HappyBirthdayCard 코드 (0)	2022.12.24

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

🐤🐤우당탕탕 개발 기록

DiceRoller 복습

'2023 안드로이드 > 안드로이드 스터디' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

DiceRoller 복습

'2023 안드로이드 > 안드로이드 스터디' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역