[Android Compose] Modifier란?

Modifier의 사전적 정의는 아래와 같다.

 

수식어, (의미를 한정하는) 한정어

 

안드로이드 디벨로퍼의 Compose Modifier 문서에선 어떻게 말하는지 확인해봤다.

 

https://developer.android.com/jetpack/compose/modifiers

Compose 수정자  |  Jetpack Compose  |  Android Developers

수정자(modifier)를 쓰면 Composable을 장식, 강화할 수 있다. 수정자를 통해 다음 작업을 할 수 있다.

- Composable의 크기, 레이아웃, 동작, 모양 변경
- 접근성 라벨 같은 정보 추가
- 사용자 입력 처리
- 아이템 클릭, 스크롤, 드래그, 확대/축소 등의 상호작용 추가

수정자는 표준 코틀린 객체다. Modifier 클래스 함수 중 하나를 호출해 수정자를 만든다...(중략)

 

정리하면 Modifier는 레이아웃을 변경하고 이벤트 리스너 추가 등을 가능하게 만들어주는 코틀린 객체다.

이걸 사용한 간단한 예제들을 몇 가지 확인해본다.

 

먼저 가로, 세로를 각각 정의하는 Modifier부터 확인해본다. 가로 길이를 설정하려면 Modifier.width(width: dp)를 사용하고 세로 길이를 설정하려면 Modifier.height(height:dp)를 사용한다.

 

class LayoutModifierActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier.width(200.dp)
                    .fillMaxHeight()
                    .background(Color.Blue)
            )
        }
    }
}

 

가로로 200dp 길이, 세로로 꽉찬 파란색의 박스를 화면에 표시하라는 뜻이다.

이렇게 하면 아래와 같은 화면이 나타난다.

 

 

세로는 Modifier.height()를 쓰면 된다. 그리고 fillMaxHeight()를 fillMaxWidth()로 바꾼다. 만약 fillMaxHeight()를 그대로 사용하면 어떻게 되는지 한번 확인해보자.

 

class LayoutModifierActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                modifier = Modifier.height(200.dp)
                    .fillMaxWidth()
                    .background(Color.Blue)
            )
        }
    }
}

 

그리고 fillMaxWidth(), fillMaxHeight() 안에 float 값을 넣어서 얼마나 표시할지에 대한 비율을 설정할 수도 있다.

 

 

다음 예제는 아래의 깃허브에서 가져왔다.

https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/layout/LayoutModifierActivity.kt

GitHub - vinaygaba/Learn-Jetpack-Compose-By-Example: 🚀 This project contains various examples that show how you would do thin

 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class LayoutModifierActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazyColumn {
                item { SamePaddingComponent() }
                item { CustomPaddingComponent() }
                item { OffsetComponent() }
                item { AspectRatioComponent() }
            }
        }
    }
}

@Composable
fun SamePaddingComponent() {
    Surface(color = Color.LightGray) {
        Text(
            text = "상하좌우 모두 16 padding인 텍스트뷰",
            modifier = Modifier.padding(16.dp),
            style = TextStyle(
                fontSize = 20.sp,
                fontFamily = FontFamily.Serif
            )
        )
    }
}

@Composable
fun CustomPaddingComponent() {
    Surface(color = Color.Cyan) {
        Text(
            text = "This text has 32dp start padding, 4dp end padding, 32dp top padding & 0dp bottom padding padding in each direction",
            modifier = Modifier.padding(
                start = 32.dp,
                end = 4.dp,
                top = 32.dp,
                bottom = 0.dp
            ),
            style = TextStyle(
                fontSize = 20.sp,
                fontFamily = FontFamily.Serif
            )
        )
    }
}

@Composable
fun OffsetComponent() {
    Surface(
        color = Color.Green,
        modifier = Modifier.offset(x = 8.dp, y = 8.dp)
    ) {
        Text(
            text = "This text is using an offset of 8 dp instead of padding. Padding also ends up" +
                    " modifying the size of the layout. Using offset instead ensures that the " +
                    "size of the layout retains its size.",
            style = TextStyle(
                fontSize = 20.sp
            )
        )
    }
}

@Composable
fun AspectRatioComponent() {
    Surface(
        color = Color.LightGray,
        modifier = Modifier.aspectRatio(16 / 9f).padding(top = 16.dp)
    ) {
        Text(
            text = "This text is wrapped in a layout that has a fixed aspect ratio of 16/9",
            style = TextStyle(
                fontSize = 20.sp,
                fontFamily = FontFamily.Serif
            ),
            modifier = Modifier.padding(16.dp)
        )
    }
}

 

Surface() 안의 modifier 부분을 보면 해당 예제에선 3가지 Modifier를 사용한 걸 알 수 있다.

 

• Modifier.padding()
• Modifier.offset()
• Modifier.aspectRatio()

 

Modifier.padding()은 요소 주변에 공간을 만든다. XML 방식으로 화면을 만들 때 사용했던 패딩과 같다.

Modifier.offset()은 원래 위치를 기준으로 레이아웃을 설정한다. LTR, RTL 중 어떤 컨텍스트냐에 따라 이동하는 방향이 달라지지만 absoluteOffset을 사용하면 그런 거 상관없이 항상 오른쪽으로 이동시킨다.

Modifier.aspectRatio()는 컴포넌트의 크기 조정을 비율로 설정한다.

 

위 코드를 실행하면 아래와 같은 화면을 볼 수 있다.

 

 

안의 숫자, 함수를 다양하게 바꿔보면서 이걸 쓰면 어떻게 나오는지 직접 확인해보자.

그리고 Compose에는 마진이란 개념이 없다. 위 사진의 녹색 이미지를 보면 위아래로 일정 공간이 있지만 코드를 보면 마진은 사용하지 않았다.

이것에 대해 참고할만한 스택오버플로우 링크를 남긴다.

 

https://stackoverflow.com/questions/62939473/how-to-add-margin-in-jetpack-compose

How to add Margin in Jetpack Compose?

 

아래는 aspectRatio()와 fillMaxSize()의 차이에 대해 이미지와 같이 설명하는 스택오버플로우 링크다.

 

https://stackoverflow.com/questions/64314422/whats-the-different-between-aspectratio1f-and-fillmaxsize-for-jetpackcompos

What's the different between aspectRatio(1f) and fillMaxSize() for JetpackCompose Modifier attribute