인프런 커뮤니티 질문&답변

작성한 질문수

[LV1] Jetpack Compose - UI 연습하기

주사위 만들기 - 3

Canvas drawCircle 에서

작성

·

393

0

androidx.compose.foundation.Canvas(
    modifier = Modifier
        .fillMaxSize()
) {
    drawCircle(
        color = Color.Black,
        radius = size.minDimension/10,

    )
}

늘 수고 많으신 강사님의 노고에 다시한번 감사드리며

위 처럼 코딩하면 오류가 없으나

Canvas(modifier = Modifier.fillMaxSize()) {

drawCircle(Color.Black,

radius = size.minDimension / 10)

}

이렇게 하면 오류가 발생하는데 왜 그런지요 ...

android kotlin jetpack

답변 5

0

질문자

drawCircle 과 size 에서 UnSolved rerference 라는 오류가 납니다

개복치개발자

지식공유자

아래의 질문에 답변을 달아놨습니다.

canvas import할 때 문제입니다~

0

질문자

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Canvas
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlin.random.Random

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

@Composable
fun MyDice() {
    var diceNumber by remember {
        mutableStateOf(1)
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .border(3.dp, Color.Black)
                .background(Color.White)
                .padding(20.dp),
            contentAlignment = Alignment.Center
        ){
            when(diceNumber) {
                1 -> DiceNumberCircle1()
                2 -> DiceNumberCircle2()
                3 -> DiceNumberCircle3()
                4 -> DiceNumberCircle4()
                5 -> DiceNumberCircle5()
                6 -> DiceNumberCircle6()
            }
        }
        Button(
            onClick = {
                diceNumber = Random.nextInt(1,7)        // 1 ~ 6 까지의 랜덤수
            },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White
            ),
            modifier = Modifier
                .padding(30.dp)
                .width(150.dp)
                .height(50.dp),
        ) {
            Text(
                text = "주사위놀이",
                color = Color.Black,
                fontWeight = FontWeight.Bold,
                //textAlign = TextAlign.Center,
                fontSize = 20.sp,
                modifier = Modifier
                    .fillMaxWidth()
            )
        }
        Text(
            text = diceNumber.toString(),
            fontWeight = FontWeight.Bold,
            fontSize = 30.sp
        )
    }
}

@Composable
fun DiceNumberCircle1(){
    Box(
        modifier = Modifier.size(50.dp)
    ) {
        Canvas(
            modifier = Modifier
                .fillMaxSize()
        ) {
            drawCircle(
                color = Color.Black,
                radius = size.minDimension/10,

            )
        }
    }
}

@Composable
fun DiceNumberCircle2(){
    Row{
        DiceNumberCircle1()
        Spacer(modifier = Modifier.size(50.dp))
        DiceNumberCircle1()
    }
}

@Composable
fun DiceNumberCircle3(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
        }
    }

}

@Composable
fun DiceNumberCircle4(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle5(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle1()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle6(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }

개복치개발자

지식공유자

canvas import가 잘못된 것 같습니다.
아래와 같이 변경해보시겠어요?

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlin.random.Random

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

@Composable
fun MyDice() {
    var diceNumber by remember {
        mutableStateOf(1)
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .border(3.dp, Color.Black)
                .background(Color.White)
                .padding(20.dp),
            contentAlignment = Alignment.Center
        ){
            when(diceNumber) {
                1 -> DiceNumberCircle1()
                2 -> DiceNumberCircle2()
                3 -> DiceNumberCircle3()
                4 -> DiceNumberCircle4()
                5 -> DiceNumberCircle5()
                6 -> DiceNumberCircle6()
            }
        }
        Button(
            onClick = {
                diceNumber = Random.nextInt(1,7)        // 1 ~ 6 까지의 랜덤수
            },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White
            ),
            modifier = Modifier
                .padding(30.dp)
                .width(150.dp)
                .height(50.dp),
        ) {
            Text(
                text = "주사위놀이",
                color = Color.Black,
                fontWeight = FontWeight.Bold,
                //textAlign = TextAlign.Center,
                fontSize = 20.sp,
                modifier = Modifier
                    .fillMaxWidth()
            )
        }
        Text(
            text = diceNumber.toString(),
            fontWeight = FontWeight.Bold,
            fontSize = 30.sp
        )
    }
}

@Composable
fun DiceNumberCircle1(){
    Box(
        modifier = Modifier.size(50.dp)
    ) {
        Canvas(
            modifier = Modifier
                .fillMaxSize()
        ) {
            drawCircle(
                color = Color.Black,
                radius = size.minDimension/10,

                )
        }
    }
}

@Composable
fun DiceNumberCircle2(){
    Row{
        DiceNumberCircle1()
        Spacer(modifier = Modifier.size(50.dp))
        DiceNumberCircle1()
    }
}

@Composable
fun DiceNumberCircle3(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
        }
    }

}

@Composable
fun DiceNumberCircle4(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle5(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle1()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle6() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

0

질문자

실행하면 위와 같은 오류가 Build Output 에서 발생합니다

0

질문자

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

@Composable
fun MyDice() {
    var diceNumber by remember {
        mutableStateOf(1)
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .border(3.dp, Color.Black)
                .background(Color.White)
                .padding(20.dp),
            contentAlignment = Alignment.Center
        ){
            when(diceNumber) {
                1 -> DiceNumberCircle1()
                2 -> DiceNumberCircle2()
                3 -> DiceNumberCircle3()
                4 -> DiceNumberCircle4()
                5 -> DiceNumberCircle5()
                6 -> DiceNumberCircle6()
            }
        }
        Button(
            onClick = {
                diceNumber = Random.nextInt(1,7)        // 1 ~ 6 까지의 랜덤수
            },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White
            ),
            modifier = Modifier
                .padding(30.dp)
                .width(150.dp)
                .height(50.dp),
        ) {
            Text(
                text = "주사위놀이",
                color = Color.Black,
                fontWeight = FontWeight.Bold,
                //textAlign = TextAlign.Center,
                fontSize = 20.sp,
                modifier = Modifier
                    .fillMaxWidth()
            )
        }
        Text(
            text = diceNumber.toString(),
            fontWeight = FontWeight.Bold,
            fontSize = 30.sp
        )
    }
}

@Composable
fun DiceNumberCircle1(){
    Box(
        modifier = Modifier.size(50.dp)
    ) {
        androidx.compose.foundation.Canvas(
            modifier = Modifier
                .fillMaxSize()
        ) {
            drawCircle(
                color = Color.Black,
                radius = size.minDimension/10,

            )
        }
    }
}

@Composable
fun DiceNumberCircle2(){
    Row{
        DiceNumberCircle1()
        Spacer(modifier = Modifier.size(50.dp))
        DiceNumberCircle1()
    }
}

@Composable
fun DiceNumberCircle3(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
        }
    }

}

@Composable
fun DiceNumberCircle4(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle5(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle1()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle6(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

개복치개발자

지식공유자

package com.example.test

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.test.ui.theme.TestTheme
import kotlin.random.Random

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

@Composable
fun MyDice() {
    var diceNumber by remember {
        mutableStateOf(1)
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
    ) {
        Box(
            modifier = Modifier
                .size(300.dp)
                .border(3.dp, Color.Black)
                .background(Color.White)
                .padding(20.dp),
            contentAlignment = Alignment.Center
        ){
            when(diceNumber) {
                1 -> DiceNumberCircle1()
                2 -> DiceNumberCircle2()
                3 -> DiceNumberCircle3()
                4 -> DiceNumberCircle4()
                5 -> DiceNumberCircle5()
                6 -> DiceNumberCircle6()
            }
        }
        Button(
            onClick = {
                diceNumber = Random.nextInt(1,7)        // 1 ~ 6 까지의 랜덤수
            },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White
            ),
            modifier = Modifier
                .padding(30.dp)
                .width(150.dp)
                .height(50.dp),
        ) {
            Text(
                text = "주사위놀이",
                color = Color.Black,
                fontWeight = FontWeight.Bold,
                //textAlign = TextAlign.Center,
                fontSize = 20.sp,
                modifier = Modifier
                    .fillMaxWidth()
            )
        }
        Text(
            text = diceNumber.toString(),
            fontWeight = FontWeight.Bold,
            fontSize = 30.sp
        )
    }
}

@Composable
fun DiceNumberCircle1(){
    Box(
        modifier = Modifier.size(50.dp)
    ) {
        androidx.compose.foundation.Canvas(
            modifier = Modifier
                .fillMaxSize()
        ) {
            drawCircle(
                Color.Black,
                radius = size.minDimension/10,

                )
        }
    }
}

@Composable
fun DiceNumberCircle2(){
    Row{
        DiceNumberCircle1()
        Spacer(modifier = Modifier.size(50.dp))
        DiceNumberCircle1()
    }
}

@Composable
fun DiceNumberCircle3(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
            Spacer(modifier = Modifier.size(50.dp))
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ){
            Spacer(modifier = Modifier.size(50.dp))
            Spacer(modifier = Modifier.size(50.dp))
            DiceNumberCircle1()
        }
    }

}

@Composable
fun DiceNumberCircle4(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle5(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle1()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

@Composable
fun DiceNumberCircle6(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally,
    ){
        Spacer(modifier = Modifier.size(10.dp))
        DiceNumberCircle2()
        DiceNumberCircle2()
        DiceNumberCircle2()
        Spacer(modifier = Modifier.size(10.dp))
    }
}

DiceNumberCircle1

부분을 말씀하신대로 변경해봤습니다.

문제없이 잘 동작하는데, 오류 부분 스크린샷으로 자세히 알려주시겠어요?

0

개복치개발자

지식공유자

사용하신 전체 코드를 복사해주시겠어요?

작성한 질문수