[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

이번 시간에는 박스(Box)를 통해 모양(shape) 변경과 외곽선(shape) 주는 방법을 알아보겠습니다. 

---

목차

1. 미리 보기

2. 박스 함수

3. 모양 변경(shape)

4. 외곽선 설정(border)

5. 전체 코드

---

1. 미리 보기

 

2. 박스 함수

 - 설명 

 1. size: 가로, 세로 크기 150

 2. background: 색상과 모양 설정

@Composable
fun ShapeCompose(shape: Shape){
    Box(modifier = Modifier
        .size(150.dp)
        .background(Color.Red, shape)
    )
}

 

3. 모양 변경(shape)

 - 설명

 1. RectangleShape : 네모

 2. CircleShape : 동그라미

 3. RoundedCornerShape(20.dp) : 네모 모서리 둥글게(둥근 정도)

 4. CutCornerShape(20.dp) : 네모 모서리 각지게(각진 정도)

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Column(modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ShapeCompose(shape = RectangleShape) //네모
            ShapeCompose(shape = CircleShape) //동그라미
            ShapeCompose(shape = RoundedCornerShape(20.dp)) //둥근(모서리) 모서리
            ShapeCompose(shape = CutCornerShape(20.dp)) // 각진 모서리
            LineCompose()
        }
    }
}

 

반응형

 

4. 외곽선 설정(border)

 - 설명 

 2. border( 두께, 색상, 모양 )

@Composable
fun ShapeCompose(shape: Shape){
    Box(modifier = Modifier
        .size(150.dp)
        .background(Color.Red, shape)
        .border(10.dp, Color.Green, shape)
    )
}

 

5. 전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    ShapeCompose(RectangleShape)
                    ShapeCompose(CircleShape)
                    ShapeCompose(RoundedCornerShape(20.dp))
                    ShapeCompose(CutCornerShape(20.dp))
                }
            }
        }
    }
}

@Composable
fun ShapeCompose(shape: Shape){
    Box(modifier = Modifier
        .size(150.dp)
        .background(color = Color.Red, shape = shape)
        .border(10.dp, Color.Green, shape)
    )
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ShapeCompose(RectangleShape)
            ShapeCompose(CircleShape)
            ShapeCompose(RoundedCornerShape(20.dp))
            ShapeCompose(CutCornerShape(20.dp))
        }
    }
}

 

2023.05.29 - [안드로이드] - [안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

[안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

2023.05.22 - [안드로이드] - [안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

2023.05.15 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기