안드로이드 jetpack compose - modifier

 안드로이드 스튜디오의 새로운 UI 개발 프레임워크인 jetpack compose는 서서히 고개를 들고 있습니다. 어느덧 요구하는 회사들이 생겨나기 시작한 것으로 보아 빠른 시일 내에 유행처럼 번질 것 같습니다. 그래서 저도 jetpack compose에 대해서 공부해보려고 합니다.
 이번에는 기본적인 jetack view의 modifier라는 파라미터를 알아보려고 합니다. 기본적으로 안드로이드의 공식 사이트를 참고해서 보겠습니다.

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

Compose 수정자  |  Jetpack Compose  |  Android Developers

---

  modifier는 크게 2가지로 분류할 수 있는데, 먼저 첫 번째로는 modifier가 적용된 UI에게 패딩을 먹이거나, 사이즈를 조절하거나, 백그라운드의 색상 및 shape을 수정할 수 있는 형태로 적용하는 것입니다. 주로 xml에서 view를 다룰 때 사용했던 기본적인 설정들을 compose에서는 modifier로 정의할 수 있습니다. 두 번째로는 click이나 scrolling 같은 행동 이벤트를 적용하는데 사용됩니다. 기존에 listener를 부착해주던 코드들을 modifier에서 적용할 수 있게 되었다고 볼 수 있습니다.

 이러한 modifier의 가장 큰 특징은 먼저 작성한 코드가 우선 적용된다는 점입니다.

//1번 예제

Text(
    text = "Hello $name!",
    modifier = Modifier
        .background(
            color = Teal200,
            shape = RoundedCornerShape(20.dp)
         )
        .padding(20.dp)
        .background(
            color = Purple200,
            shape = RoundedCornerShape(12.dp)
        )
)


//2번 예제
Text(
    text = "Hello $name!",
    modifier = Modifier
        .padding(20.dp)
        .background(
            color = Teal200,
            shape = RoundedCornerShape(20.dp)
        )
)

 위의 코드는 1번과 2번이고, 잘 모르는 제가 봤을 때 background가 2개가 적용이 되는 경우, 하나만 적용이 될 것으로 예상됩니다. 그러나 아래의 화면을 보시면 두 예제가 어떤 차이를 보이는지 확실히 할 수 있습니다.

 padding 아래에 적용한 background는 padding 영역을 제외하고 다시 적용되었음을 알 수 있습니다. 이처럼 우선 적용하고 싶은 것을 위에다 적어두어야 합니다. padding 영역까지 click 이벤트를 발생하고 싶다면 clickable을 padding 위에 작성하는 것 처럼 말이죠.

 이러한 modifier에는 여러가지 메소드가 존재하는데 아래에 기본적인 것들을 정리해두도록 하겠습니다.

 

modifier 설정 종류

.width(x.dp): xml에서 width로 사용하는 것으로 너비를 결정(dp 사용)

.height(x.dp): xml에서 height로 사용하는 것으로 높이를 결정(dp 사용)

.fillMaxWidth(0.xf): 너비를 가득채우는 메소드로 파라미터로 넘기는 값에 따라 너비를 채우는 비율을 설정할 수 있음(0~1사이의 값을 파라미터로 넘김) 이 메소드를 이용할 때, 첫 번째 view에 1f로 설정하는 경우 2번째 view에도 fillMaxWidth를 설정하더라도 보이지 않습니다.(우선순위가 먼저 작성된 view에게 있다는 얘기)

.fillMaxHeight(0.xf): 높이를 가득채우는 메소드로 fillMaxWidth와 동일한 작동

.fillMaxSize(0.xf): 높이와 너비를 동시에 채우는 메소드로 위 2개의 메소드(fillMaxWidth, fillMaxHeight)를 동시에 사용하는 것으로 해석 가능

.padding(x.dp): xml에서 사용하던 padding과 동일한 것으로, modifier를 적용하는 view를 기준으로 얼마만큼 공백을 둘 것인지를 결정.만약 padding이 자식 컴포넌트의 크기를 과도하게 침범하는 경우 자식 컴포넌트의 크기에 영향을 줌

.offset(x, y): padding과 동일한 역할을 하나, 자식 컴포넌트의 크기에 영향이 없음(위치에는 영향을 줄 수 있습니다.)

.background(brush, color, shape): view의 background를 지정할 수 있는 메소드로 shape에는 기본적으로 제공되는 여러가지 기능이 있어 기존 xml보다 좀 더 편리하게 background 작성이 가능. 또한 brush를 이용해 간단하게 그라데이션 background 생성 가능

.border(width, color, shape): view의 테두리를 그리기 위한 메소드로 width로 테두리의 굵기를, color로 색상을, shape로 보더의 형태를 지정할 수 있음.(background와 padding을 적절히 이용하는 것으로도 border를 생성할 수 있으나 이 방법이 더욱 간단하니 알아두는 것이 좋을 듯!)

---

 modifier를 보는 것만으로도 나중에 안드로이드 프로젝트에 compose를 적용하게 되면 기존의 xml 보다 작업이 훨씬 더 직관적이게 변할 거라는 생각이 듭니다. 실제로 예제 코드들을 봐도 선언형 UI의 장점이 무엇인지는 확실히 보일 정도로 많은 부분이 다르다는 걸 알게 해 줍니다. 아직은 바로 무언가를 적용할 수 있겠다는 느낌은 아니지만, 천천히 학습하다보면 언젠가는 현재 프로젝트들을 전부 변경할 기회가 올 것 같습니다.