[android] margin in Compose

 

#

Android View 시스템에서 margin 은 View 가 가지고 있는 속성이었지만, Compose 에서는 View 가 해당 속성을 가지지 않는다.

그래서 Modifier 에 padding 은 있지만 margin 은 없다.

그러면 Compose 에서 margin 은 어떻게 구현할까?

 

#

사실 Compose 에서는 Android View 시스템에서 사용하던 box model 을 사용하지 않는다.

그래서 padding 이라는 말은 Android View 시스템의 padding 에 딱 맞지 않고, spacing (공간 주기)로만 이해하면 된다.

 

#

가장 간단한 방법은 "Spacer" 라는 composable 을 이용하는 것!

Text(text = "Hello!")
Spacer(modifier = Modifier.width(10.dp))
Image(painter = painterResource(id = R.drawable.icon), contentDescription = null)

 

#

두번째 방법은 padding 을 갖거나, spacedBy 로 offset 이 지정된 container composable 안에 margin 을 주고자 하는 composable 을 담는 것.

그러나 이는 꼭 필요한 경우가 아니면 추천하고 싶지 않은 방법.

Column(
    modifier = Modifier.padding(32.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
){ ... }

 

#

Modifier.offset, Modifier.padding 을 이용할 수도 있다. 그러나 이는 배경 영역, click 영역등에 대한 이슈가 생길 수 있다.

위에서 설명한 것과 같이 compose 에서의 padding 은 space 개념이고, 호출 순서에 따라서 동작이 달라진다.

예를 들어 clickable 과 padding 의 함수 호출 순서에 따라 clickable 영역이 달라진다. 

이를 잘 이해하고 사용한다면, Spacer 보다 더 추천되는 방법일 수도 있겠다.

 

끝!