Modifier 함수

📌 Tip

Composable function에 기본 Modifier를 제공하면 재사용성이 높아진다.

fun testComposableFun(modifier: Modifier = Modifier)

safeDrawingPadding

public fun Modifier.safeDrawingPadding(): Modifier

드로잉 영역을 안전하게 설정하는 데 도움을 주는 Modifier
이 함수를 사용하면 시스템 UI(상태 표시줄, 내비게이션 바 등)와 겹치지 않는 안전한 드로잉 영역을 설정할 수 있다

앱의 주요 콘텐츠가 시스템 UI와 겹치지 않도록 안전한 패딩을 설정하는 데 사용

이 함수를 사용하면 앱의 레이아웃에서 드로잉 영역을 지정할 수 있으며, 예를 들어 상태 표시줄과 내비게이션 바와 겹치지 않는 패딩을 설정할 수 있다
이는 시스템 UI의 크기나 형태에 따라 앱의 UI 요소가 적절히 배치되도록 보장할 수 있다

consumeWindowInsets

@Stable
public fun Modifier.consumeWindowInsets(
    paddingValues: PaddingValues
): Modifier

Compose에서 UI 요소들이 시스템 UI와 겹치지 않도록 레이아웃을 조정하는 데 매우 유용한 도구

Compose에서 윈도우 인셋을 소비하고 해당 인셋 값을 적용하여 레이아웃을 조정하는 데 사용
PaddingValues 객체를 매개변수로 받아서 적용할 패딩 값을 지정

📌 소비한다?
인셋을 소비한다는 것은 해당 인셋 값을 처리하고, 나머지 레이아웃 요소들이 그 인셋을 다시 사용하지 않도록 하는 것

• 이를 통해 중복된 인셋 적용을 방지할 수 있다

주요 포인트
consumeWindowInsets 함수는 주로 시스템 UI와 콘텐츠 간의 간격을 조정하기 위해 사용
이 함수는 지정된 PaddingValues를 적용하여 레이아웃을 조정하고, 인셋을 소비
이를 통해 중복된 인셋 적용을 방지하고, 레이아웃을 보다 세밀하게 제어할 수 있다

활용 시나리오
상태 바, 내비게이션 바와 겹치지 않도록 컴포저블의 위치를 조정할 때
다양한 화면 크기와 형태에 따라 적절한 패딩 값을 적용하여 UI를 구성할 때
시스템 인셋을 고려하여 레이아웃을 구성하는 상황에서 활용될 수 있다

windowInsetsPadding

@Stable
public fun Modifier.windowInsetsPadding(
    insets: WindowInsets
): Modifier

Compose에서 윈도우 인셋을 고려하여 패딩을 적용하는 데 사용

윈도우 인셋(Window Insets):
윈도우 인셋은 시스템 UI(상태 바, 내비게이션 바 등)와 콘텐츠 사이의 간격을 나타낸다
이를 통해 시스템 UI와 겹치지 않도록 콘텐츠의 위치를 조정할 수 있다

📌 WindowInsets:
WindowInsets 객체는 각 방향(상단, 하단, 좌측, 우측)의 인셋 값을 포함
이 객체는 시스템 UI와 콘텐츠 사이의 간격을 나타내는 데 사용

semantics

public fun Modifier.semantics(
    mergeDescendants: Boolean = false,
    properties: SemanticsPropertyReceiver.() -> Unit
): Modifier

mergeDescendants (Boolean)

기본값: false
이 매개변수가 true로 설정되면, 해당 컴포넌트의 모든 자식 요소들의 접근성 속성을 하나의 요소로 병합

• 이는 특정 컨테이너 요소에서 자식들의 접근성 정보를 부모로 병합하고자 할 때 유용

properties (SemanticsPropertyReceiver.() -> Unit)

람다 함수 형태로, 이 안에서 접근성 속성을 정의
SemanticsPropertyReceiver를 확장하여 다양한 접근성 속성을 설정할 수 있다

testTagsAsResourceId의 역할
테스트 태그

• Compose에서 각 요소는 Modifier.testTag를 통해 고유의 태그를 가질 수 있다
• 이 태그는 주로 UI 테스트에서 특정 요소를 식별하는 데 사용

리소스 ID

• 리소스 ID는 Android의 XML 레이아웃에서 요소를 식별하는 고유한 값
• 접근성 도구는 이러한 ID를 사용해 요소를 참조할 수 있다

testTagsAsResourceId 설정: 이 속성을 true로 설정하면, 테스트 태그가 리소스 ID로 사용됩니다. 이를 통해 UI 테스트에서 접근성 도구가 요소를 더 쉽게 식별할 수 있게 됩니다.

width & height

@Stable
public fun Modifier.width(
    width: Dp
): Modifier

너비(높이) 설정

fillMaxWidth & fillMaxHeight

@Stable
public fun Modifier.fillMaxWidth(
    fraction: Float = 1.0f
): Modifier

최대 너비(높이)로 설정
fraction : 0.0 ~ 1.0로 부모 컨테이너의 가로(세로) 너비에 대해 차지하는 비율을 설정할 수 있다.

wrapContentWidth

@Stable
public fun Modifier.wrapContentWidth(
    align: Alignment.Horizontal,
    unbounded: Boolean = true
): Modifier

• 해당 요소의 width를 content의 크기에 따라 동적으로 조절
• 주로 화면에 표시되는 내용의 크기에 따라 요소의 크기를 조절할 때 사용한다.
• unbounded : content의 크기를 제한할지 여부를 나타냄. 만약 ture로 설정하면 content의 크기에 제한이 없어진다.

📌 fillMaxSize() 우선 적용

heightIn

@Stable
public fun Modifier.heightIn(
    min: Dp,
    max: Dp
): Modifier

• 주어진 최소 및 최대 높이 범위를 갖는 높이 제한을 설정하는 데 사용
• 만약 heightIn(100.dp)처럼 매개변수를 하나만 입력하면 min값만 설정되고, max값에는 제한이 없게 된다.

align

align(alignment: Alignment.Horizontal)

• 요소의 정렬을 지정하는데 사용

verticalScroll & horizontalScroll

public fun Modifier.verticalScroll(
    state: ScrollState,
    enabled: Boolean,
    flingBehavior: FlingBehavior? = null,
    reverseScrolling: Boolean = false
): Modifier

스크롤을 적용하기 위한 Modifier.
이 함수를 사용하면 스크롤 가능한 Composable을 생성할 수 있다.

• state: 스크롤의 상태를 나타내는 ScrollState 객체. 이 객체를 통해 스크롤 위치 및 다양한 스크롤 관련 정보에 액세스할 수 있다.
• enabled: 스크롤이 활성화되어 있는지 여부를 나타낸다.
• flingBehavior: 스크롤의 플링 동작을 나타내는 FlingBehavior 객체. null로 설정하면 기본 플링 동작이 사용된다.
• reverseScrolling: true로 설정하면 스크롤이 반대 방향

📌 스크롤의 현재 상태를 포함하여 외부에서 스크롤 상태를 수정하는 데 사용되는 ScrollState가 필요하며, 스크롤 상태를 수정할 필요가 없는 경우에는 rememberScrollState를 사용하여 ScrollState 인스턴스를 만들면 된다.

paddingFromBaseline

@Stable
public fun Modifier.paddingFromBaseline(
    top: Dp,
    bottom: Dp
): Modifier

Text 컴포저블 사용할 때 유용하다
baseline을 기준으로 상단 및 하단 여백을 설정하는 데 사용

size

@Stable
public fun Modifier.size(
    width: Dp,
    height: Dp
): Modifier

요소의 크기를 명시적으로 지정할 수 있다.

padding

@Stable
public fun Modifier.padding(
    all: Dp
): Modifier

아래와 같이 오버로드 되어 있다.
padding(all: Dp)
padding(horizontal: Dp, vertical: Dp)
padding(start: Dp, top: Dp, end: Dp, bottom: Dp)

Clip

@Stable
public fun Modifier.clip(
    shape: Shape
): Modifier

Modifier가 적용된 컴포저블의 모양을 지정된 Shape로 잘라내는 역할한다.
Shape는 모양을 정의하는 인터페이스로서, 주로 CircleShape, RoundedCornerShape 등이 사용된다.

border

public fun Modifier.border(
    width: Dp,
    brush: Brush,
    shape: Shape
): Modifier

UI 요소에 테두리를 추가하기 위해 사용

• width: 테두리의 두께
• brush: 테두리의 색상이나 그림자 패턴 등을 나타내는 Brush 객체

📌 Brush는 색상 그라데이션, 이미지 패턴 등을 지정할 수 있는 브러시 타입입니다.

• shape: 테두리의 모양을 지정하는 Shape 객체

clickable

public fun Modifier.clickable(
    enabled: Boolean,
    onClickLabel: String? = null,
    role: Role?,
    onClick: () -> Unit
): Modifier

클릭 가능한 영역을 정의하는 데 사용되는 함수.

• onClickLabel: 클릭 가능한 영역에 대한 화면 낭독기에서 읽을 라벨입니다.
• role: 클릭 가능한 영역의 역할을 정의하는 Role 열거형.
  시각적 표현과 상호 작용의 의미를 나타내는 데 사용.
  예를 들어, Role.Button은 클릭 가능한 버튼을 나타냅니다.