Image
Android Jetpack Compose/Compose Modifier

[Android Compose Modifier] 1. Modifier로 크기(너비, 높이) 조절하기

크기를 조절하는 Modifier

크기를 조절하기 위해서는 다음의 Modifier 구성요소들을 사용할 수 있다. 이 Modifier은 모든 Compose Component에 대해 사용 가능하다.

 

  • Modifier.width(width: Dp) : 너비를 width.dp로 설정
  • Modifier.height(height: Dp) : 높이를 height.dp로 설정
  • Modifier.fillMaxWidth(fraction: Float = 1f) : 너비(가로) 전체 채우기, 기본은 모두 채우는 것(fraction = 1f)이며 전체 대비 채우는 비율을 설정하는 것도 가능
  • Modifier.fillMaxHeight(fraction: Float = 1f) : 높이(세로) 전체 채우기, 기본은 모두 채우는 것(fraction = 1f)이며 전체 대비 채우는 비율을 설정하는 것도 가능
  • Modifier.fillMaxSize(fraction: Float = 1f) : 너비, 높이 모두 전체 채우기, 기본은 모두 채우는 것(fraction = 1f)이며 전체 대비 채우는 비율을 설정하는 것도 가능

 

이들이 어떻게 동작하는지 확인하기 위해 Box를 이용해 가로가 200dp이고 세로가 350dp인  도화지를 만들어보자.

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight() {
    Box(Modifier.width(200.dp).height(350.dp)) {
        //테스트 할 코드를 넣을곳
    }
}

그림1. Box로 만든 테스트 하기 위한 도화지

 

Modifier.width(width: Dp)

Modifier.width는 너비(=가로 길이)를 설정하는 값이다. 파라미터로는 설정하고자하는 너비만큼의 dp를 넘기면 된다.

fun Modifier.width(width: Dp)

위 Box의 내부에 Box를 하나 더 만들고 너비를 100dp로 만든 후 배경색을 초록색으로 바꾸어보자.

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .width(100.dp) // Width를 100dp로 설정한다.
                .fillMaxHeight()
                .background(Color.Green)
        )
    }
}

결과는 다음과 같다. parent Box의 width가 200dp였으므로 100dp는 반을 채우는 것을 확인할 수 있다.

그림2. Width 예시

 

 

Modifier.height(height: Dp)

Modifier.height는 높이(=세로 길이)를 설정하는 값이다. 파라미터로는 설정하고자하는 높이만큼의 dp를 넘기면 된다.

fun Modifier.height(height: Dp)

높이를 175dp로 만든 후 배경색을 초록색으로 바꾸어보자.

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(175.dp) // 높이를 175dp로 설정한다.
                .background(Color.Green)
        )
    }
}

결과는 다음과 같다. parent Box의 height가 350dp이므로, 175dp는 반을 채우는 것을 확인할 수 있다.

그림3. Height예시

 

 

Modifier.fillMaxWidth(fraction: Float)

Modifier.fillMaxWidth는 너비를 가득 채울 수 있도록 하는 Modifier이다. 여기에는 한 가지 기능이 더 있는데 바로 가득 채우는 비율(fraction)을 설정할 수 있는 기능이다.

fun Modifier.fillMaxWidth(fraction: Float = 1f)

*fraction: 전체 대비 차지하는 비율

 

너비를 가득 채운 후 배경색을 초록색으로 바꿔보자. fillMaxWidth에 아무런 파라미터도 안넘기면 fraction이 기본값인 1로 설정되기 때문에 너비가 가득 하는 것을 확인할 수 있다. 

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(175.dp) // 높이를 175dp로 설정한다.
                .background(Color.Green)
        )
    }
}

그림4. fillMaxWidth

 

여기서 너비를 절반(0.5)만 채우도록 코드를 바꾸어보자. fraction에 0.5f를 넘기면 절반만 채워지는 것을 확인할 수 있다.

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .fillMaxWidth(0.5f) // 너비를 전체의 0.5만큼만 채운다.
                .height(100.dp)
                .background(Color.Green)
        )
    }
}

그림5. fillMaxWidth with fraction

 

 

 

Modifier.fillMaxHeight(fraction: Float)

Modifier.fillMaxHeight는 높이를 가득 채울 수 있도록 하는 Modifier이다. fraction을 이용해 가득 채우는 비율을 설정할 수 있다.

fun Modifier.fillMaxHeight(fraction: Float = 1f)

높이를 가득 채운 후 배경색을 초록색으로 바꿔보자. fillMaxHeight에 아무런 파라미터도 넘기지 않으면 fraction이 1이 되기 때문에 높이가 가득 차도록 만들 수 있다. 

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .width(100.dp)
                .fillMaxHeight() // 높이를 가득 차게 만들기
                .background(Color.Green)
        )
    }
}

그림6. fillMaxHeight

여기서 높이를 0.8 비율 만큼만 채우도록 바꿔보자. fraction에 0.8f를 넘기면 0.8 비율 만큼만 채워지는 것을 확인할 수 있다.

그림6. fillMaxHeight with fraction

 

 

Modifier.fillMaxSize(fraction: Float)

Modifier.fillMaxSize()는 너비와 높이 모두를 가득 채우는 Modifier이다. fraction을 이용해 가득 채우는 비율을 설정할 수 있다

fun Modifier.fillMaxSize(fraction: Float = 1f)

너비와 높이를 가득 채운 후 배경색을 초록색으로 바꿔보자. fillMaxSize()를 이용하면 가득 채울 수 있다.

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .fillMaxSize() // 가로, 세로 모두 가득 채우기
                .background(Color.Green)
        )
    }
}

그림7. Modifier.fillMaxSize

fillMaxSize의 fraction은 가로, 세로 비율을 모두 한 번에 조정한다. 위 그림7의 초록 사각형을 전체 비율의 0.6만큼만 채우도록 fraction에 0.6f를 파라미터로 넘겨보자.

@Preview(showBackground = true)
@Composable
fun KotlinWorldWidthAndHeight1() {
    Box(
        Modifier
            .width(200.dp)
            .height(350.dp)) {

        Box(
            modifier = Modifier
                .fillMaxSize(0.6f) // 가로, 세로 모두 0.6 만큼만 채운다.
                .background(Color.Green)
        )
    }
}

그림8. Modifier.fillMaxSize with Fraction

 

반응형

 

이 글의 저작권은 '조세영의 Kotlin World' 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com