Android Compose Row , Column , Box 살펴보기

 

저의 기준에서 기존 xml 로 개발을하다 compose 로 넘어갈때 제일 헷갈렸던 부분을 설명 해보고자합니다.

 

기존 xml에서는 기본 배경으로 하는 Layout들은

 

-ConstraintLayout

-LinearLayout

-FrameLayout

-RelativeLayout

 

이정도가 기본 배경으로 많이들 쓰는 레이아웃입니다.

 

Compose에서는 

 

LinearLayout = Row , Column

FrameLayout = Box

 

이렇게 생각하시면 간단합니다.

 

Compose 에서는 ConstraintLayout , RelativeLayout 없다고 보시면됩니다.

 

Row 살펴보기

Row {
    Text(text = "안녕하세요 1")
    Text(text = "안녕하세요 2")
    Text(text = "안녕하세요 3")
    Text(text = "안녕하세요 4")
    Text(text = "안녕하세요 5")
}

적용 이미지

 

Row 는 가로 방향의 Layout 입니다.

기존 xml에서 쓰던 LinearLayout 에 orientation 값을 horizontal 로 설정한것과 같다고 보시면 됩니다.

 

Column 살펴보기

Column {
    Text(text = "안녕하세요 1")
    Text(text = "안녕하세요 2")
    Text(text = "안녕하세요 3")
    Text(text = "안녕하세요 4")
    Text(text = "안녕하세요 5")
}

적용사진

Column 는 세로 방향의 Layout 입니다.

기존 xml에서 쓰던 LinearLayout 에 orientation 값을 vertical 로 설정한것과 같다고 보시면 됩니다.

 

Box 살펴보기

Box {
    Text(text = "안녕하세요 1", Modifier.padding(start = 0.dp))
    Text(text = "안녕하세요 2", Modifier.padding(start = 2.dp))
    Text(text = "안녕하세요 3" , Modifier.padding(start = 4.dp))
    Text(text = "안녕하세요 4" , Modifier.padding(start = 6.dp))
    Text(text = "안녕하세요 5" , Modifier.padding(start = 10.dp))
}

적용 사진

 

Box 는 중첩 Layout 입니다.

기존 xml에서 쓰던 FrameLayout 같다고 보시면 됩니다.

 

실제로도 이렇게 3가지의 Layout을 기준으로 많이 사용을 하고있습니다.

 

Scaffold View 도 있지만

 

이건 다음에 설명 드리겠습니다.

 

감사합니다.