Compose modifiers
Modifers 는 컴포저블을 꾸미거나 확대할 수 있습니다. Modifers 는 다음과 같은 작업을 수행할 수 있습니다.
- 컴포저블의 크기, 배치, 동작 및 모양을 변경합니다.
- 접근성에 도움이 될 만한 라벨같은 정보를 추가합니다.
- 사용자 입력을 처리합니다.
- 클릭 가능하게 만들거나, 스크롤, 드래그, 확대/축소와 같은 고급 상호 작용을 추가합니다.
Modifiers 는 코틀린 표준 객체입니다. Modifier클래스 함수 중 하나를 호출하여 생성합니다.
이러한 함수를 서로 연결하여 구성할 수 있습니다 :
이 코드에서는, 서로 다른 Modifier 함수를 함께 사용할 것을 알렸습니다.
padding은 요소의 주변에 공간을 둡니다.fillMaxWidth는 컴포저블을 상위 부모로부터 주어지는 최대 너비를 채웁니다.
작성하는 모든 컴포저블에 UI 를 내보내는 첫 번째 자식에 해당 modifier 를 허용하고, 전달하는 것이 좋습니다. 이렇게 하면 코드를 재사용할 수 있고, 동작에 대한 예측이나 직관성을 높일 수 있습니다. 자세한 내용은 컴포즈의 API 가이드라인, Elements accept and respect a Modifier parameter 를 참조하세요.
Order of modifiers matters
Modifier 함수 순서는 특별히 중요합니다. 각각의 함수는 이전 함수로부터 반환된 Modifiers 를 변경하기 때문에, 이 일련의 순서는 최종 결과에 영향을 줍니다. 다음 예제를 보겠습니다.
위의 코드는 padding modifier 가 clickable modifier 이후에 적용되었기 때문에, 패딩을 포함한 전체 영역이 선택 가능합니다. 만약 modifier 순서가 뒤바뀐다면, padding 에 의해 추가된 공간이 사용자 입력에 반응하지 않습니다.
참조 : 명시적 순서를 사용하면 여러 modifier 가 어떻게 다르게 상호작용하는지 파악할 수 있습니다. 박스 모델로 배웠던 뷰-기반 시스템과 비교해 보세요(=사각형 영역으로 그려지는 뷰), 마진은 요소의 “바깥쪽에” 적용되지만 패딩은 “안쪽”에 적용되고, 그에 따라 배경 요소의 크기가 맞춰 적용됩니다. modifier 설계는 이러한 종류의 동작을 명시적이고 예측 가능하며, 원하는 동작을 달성할 수 있도록 더 많은 제어 기능을 제공합니다. 이는 마진 modifier 가 없고 padding 만 있는 이유도 설명됩니다.
Built-in modifiers
젯팩 컴포즈는 컴포저블을 꾸미거나 확대하는데 도움이 되는 modifer 를 제공합니다. 다음은 레이아웃을 조정하는데 사용할 수 있는 몇 가지 modifiers 를 보여줍니다.
참조 : 많은 modifiers 는 당신이 원하는 대로 UI 레이아웃을 디자인 할 수 있도록 설계되었습니다. modifiers 가 레이아웃에서 어떻게 동작하는지 좀 더 확인하려면, Compose layout basics 문서를 참조하세요.
padding and size
기본적으로, 컴포즈에서 레이아웃은 하위 구성요소를 감싸고 있습니다.(= 하위 구성요소에 대하여 wrap 사이즈가 기본 동작) 하지만, size modifier 를 이용하여 사이즈를 설정할 수 있습니다.
레이아웃의 부모로부터 발생되는 제약조건이 자녀로부터 충족하지 않을 경우 지정된 크기가 고려되지 않을 수 있습니다. 만약 제약조건에 관계없이 컴포저블의 크기가 고정되는것을 개의치 않으려면, requiredSize modifer 를 사용할 수 있습니다.
이 예제에서는 비록 부모의 height 가 100.dp 이라고 하더라도, requiredSize modifier 가 우선되기 때문에 Image 의 높이는 150.dp 가 됩니다.
참조 : 레이아웃은 제약사항을 기반으로 하며, 일반적으로 부모의 제약사항을 자식의 제약사항으로 전달됩니다. 자식은 이 제약사항을 존중합니다. 그러나 이는 항상 UI에 필요한 것은 아닙니다. 자식의 행동을 건너뛸 수 있는 방법이 있습니다. 예를들어, requiredSize 같은 modifier 를 자식으로 전달해서, 부모로부터 받은 제약사항을 재정의(overriding) 하거나 다른 동작을 지정하여 커스텀 레이아웃을 사용할 수 있습니다. 자식이 제약사항을 존중하지 않을 경우, 레이아웃 시스템은 부모의 제약사항을 숨깁니다. 부모는 자식의 너비와 높이 값을 부모에 의해 제공된 제약조건에서 강제된 것 처럼 확인합니다. 그러면 레이아웃 시스템은 자식이 제약사항을 존중한다는 가정 하에 부모에 의해 할당된 공간 내에서 자식의 센터링을 수행합니다. 개발자는 자식의 wrapContentSize modifier 를 적용하여 이 센터링 동작을 재정의 할 수 있습니다.
만약 자식 레이아웃이 부모의 허용된 높이를 가득 채우고 싶다면, fillMaxHeight modifier 를 추가하면 됩니다. (컴포즈는 또한 fillMaxSize 와 fillMaxWidth 도 제공합니다.)
이 요소의 모든 영역에 패딩을 추가하려면, padding modifier 를 설정합니다.
패딩을 텍스트 상단 기준에 추가하기 위해 레이아웃 최상단을 기준으로 일정 거리만큼 패딩을 추가한다면, paddingFromBaseline modifier 를 사용할 수 있습니다.
Offset
원래 위치를 기준으로 배치하려면, offset modifier 을 이용하여 X축과 Y축의 간격을 추가할 수 있습니다. Offset 은 양수 또는 음수일 수 있습니다. padding 과 offset 의 차이는, offset 을 컴포저블에 추가하는 것은 측정 값이 변경되지 않는다는 것입니다.
offset modifier 는 레이아웃 방향에 따라 평행하게 적용됩니다. 좌에서 우로가는 맥락이라면 offset 양수값은 요소를 오른쪽으로 이동시키지만, 우에서 좌로가는 맥락일 경우에는 요소를 좌측으로 이동시킵니다. 만약 레이아웃의 방향을 고려하지 않고 offset 설정이 필요하다면, 양수값을 항상 우측으로 이동시키는 absoluteOffset modifier 를 참조하세요.
Type safety in Compose
컴포즈에는, 특정 컴포저블의 자식만 적용되는 modifier 가 있습니다. 예를들어, Box 크기에 관계 없이 자식을 부모만큼 크게 하고싶다면, matchParentSize modifier 를 사용할 수 있습니다.
컴포즈는 커스텀 스코프를 이용하여 이러한 타입 안전 유형을 적용합니다.(=특정 컴포저블의 자식만 적용되는 modifier) 예를 들면, matchParentSize 는 오직 BoxScope 에서만 사용할 수 있습니다. 따라서, Box 의 자식만 사용할 수 있습니다.
참조 : 안드로이드 뷰 시스템에는, 타입 안전 유형은 없습니다. 개발자는 보통 타입 안전 유형에 대해 고려 가능한 것들을 찾아야 하고 특정 부모의 상황에서는 어떤 의미가 있는지 확인해야 합니다.
범위지정 modifer(Scoped modifier) 는 부모가 자식에 대해서 알아야 할 몇 가지 정보를 부모에게 알립니다. 일반적으로 부모 데이터 modifier(parent data modifier) 라고도 합니다. 그 내부는 일반 목적의 modifier 와는 다르지만, 사용하는 관점에서 이 차이는 중요하게 생각할 필요가 없습니다.
matchParentSize in Box
위에서 언급한 것 처럼, 자식 레이아웃이 Box 부모의 크기에 영향을 주지 않으면서 부모 크기와 동일하게 하려면, matchParentSize modifier 를 사용하세요.
matchParetSize modifier 는 오직 Box 범주에서만 유효하며, 이는 Box 컴포저블의 직계 자식(direct child)인 경우만 적용된다는 의미입니다.
아래 예에서는, Spacer 자식은 Box 부모의 크기를 취하며, 이 경우에는 가장 큰 자식인 ArtistCard 의 크기를 취하게 됩니다.
만약 matchParentSize 대신 fillMaxSize 으로 변경한다면, Spacer 는 부모에게 허용된 모든 영역을 취하게 되고, 이는 부모 영역이 확장되고 사용 가능한 모든 공간을 채우는 이유가 됩니다.
weight in Row and Column
Padding and size 섹션에서 본 것 처럼, 기본적으로 컴포저블의 크기는 감싸고 있는 컨텐츠에 의해 결정됩니다. RowScope 와 ColumnScope 에서만 사용할 수 있는 weight modifier 를 이용하여 컴포저블 크기를 유연하게 설정할 수 있습니다.
Row 에 두 개의 Box 컴포저블이 들어있는 것을 보겠습니다. 첫 번째 box 는 두 번째 box 의 weight 보다 두 배가 주어지므로, 폭의 크기도 두배입니다. Row 가 210dp 이므로, 첫 번째 Box 는 140.dp, 두 번째는 70.dp 입니다.
