[Compose] UI 정리 - xml 호환 ?

프로젝트에 Compose를 도입하면서 Xml 위젯별 호환되는 UI를 여러번 찾다보니

저처럼 뒤늦게 시작하시는 분들을 위해 도움이 됐으면 하는 마음에 포스팅 합니다.

 

• TextView -> Text
• LinearLayout -> Row ( 가로 ), Column ( 세로 )
• ConstraintLayout -> ConstraintLayout
• ImageView -> ImageView
• 구분선 ( View ) -> Divider
• Space -> Spacer 
• RelativeLayout -> Box 
• Recyclerview - > LazyRow ( 가로 스크롤 ) , LazyColumn ( 세로 스크롤 ) 

웬만한 화면은 위 UI들을 사용하면 구현 가능 했습니다.

 

각 UI 별 기본 사용법과 설정할 수 있는 속성들을 너무 길어져서 다루지 않겠습니다.

 

검색해보시면 다양한 자료들을 쉽게 확인할 수 있습니다! 

 

Modifier

각 UI 의 고유 속성들을 제외하곤 modifier를 통해 정렬과 패딩, 클릭 이벤트 등을 설정할 수 있습니다.

Text(
	modifier = Modifier
    .align(Alignment.CenterVertically)
    .padding(start = 5.dp, end = 16.dp, top = 16.dp, bottom = 16.dp)
    )

 

정렬

속성을 설정할때 모든걸 선택할 수 있지만 실제로 사용할 수 있는건 부모 UI가 뭐냐에 따라 다릅니다.

 

Row처럼 가로로 UI들이 정렬되는 경우 세로로 어떻게 정렬될지만 정할 수 있습니다. ( CenterVertical, Bottom, Top ) 

생각해보면 당연하지만 익숙치 않아 많이 헷갈렸습니다.

 

Column의 경우는 Row와 반대로 가로로 어떻게 정렬될지 정합니다. ( CenterHorizontal, End, Start ) 

 

마진 

Compose에는 패딩만 설정할 수 있고 마진은 따로 속성이 없습니다.

Text로 버튼을 만들때 대체로 배경을 갖고 있어서 마진을 주려면 Box로 감싸서 사용 했었습니다.

 

하지만 Modifer에 패딩을 Background전에 설정하면 마진 값으로 적용 됩니다. 

마진과 패딩을 함께

padding 설정의 순서에 따라 변경 된다면 같이 쓰는 경우 어떻게 될까요? 

패딩 설정을 background 전후 둘다 하면 됩니다.

   Text(
	text = stringResource(id = R.string.mypage_logout_confirm_btn_text),
    color = gray600,
    fontSize = 14.toDp,
    style = FontUtil.koreaMedium,
    textAlign = TextAlign.Center,
    modifier = Modifier
    	.padding(start = 16.dp, end = 16.dp, top = 40.dp, bottom = 120.dp)
        .fillMaxWidth()
        .border(width = 1.dp, color = gray300)
        .padding(vertical = 12.dp)
    )

 

Modifier 순서

위처럼 modifier에 설정하는 순서에 따라 결과에 영향을 미칠수 있으니 주의해서 해야합니다

또 다른 예로 UI 에 클릭 이벤트 설정시 Padding이 포함된 범위까지 클릭이 되게 하신다면

'Padding > 클릭 이벤트' 순으로 설정해야 합니다.