[Compose] Row, Colum, Box

Row

• 기존의 XML방식의 LinearLayout의 Horizontal과 유사하며 꼭 필요한 정보만 정리하겠습니다.

• 배경 지정 : Modifier.background(color)

• 가로, 세로 채우기 : Modifier.fillMaxSize, fillMaxWidth, fillMaxHeight

• Row내의 요소를 어떻게 배치할지 : horizontalArrangment 사용

• Arrangement.Start : 왼쪽으로 정렬

• Arrangement.End : 오른쪽으로 정렬

• Arrangement.SpaceAround : 각 요소 사이에 빈 공간 넣기(시작, 끝도 공백 포함)

• Arrangement.SpaceBetween : 처음과 끝으로 밀어넣고 사이 공간 차지

• Arrangement.SpaceEvenly : SpaceAround와 유사하지만 모든 빈공간의 크기가 같음

• 전체 Layout에서 Row의 위치를 지정할 때 : alignment사용

• Alignment = XML방식에서의 Gravity와 유사함

• Alignment.Bottom, Top, CenterVertically 가 존재함

• 스크롤을 가능하게 하기 위해선 스크롤의 위치를 저장해야함

• rememberScollState()를 사용하여 스크롤 상태를 가지고 Modifier.horizontalScoll(scrollState)와 같은 형태로 사용해야함

val scrollState = rememberScrollState()
Row(Modifier.horizontalScroll(scrollState){
...
}

Column

• 기존의 XML방식의 LinearLayout의 Vertical과 유사함

• 배경 지정 : Modifier.background(color)

• 가로, 세로 채우기 : Modifier.fillMaxSize, fillMaxWidth, fillMaxHeight

• Column내의 요소를 어떻게 배치할지 : verticalArrangment 사용

• Arrangement.Start : 왼쪽으로 정렬

• Arrangement.End : 오른쪽으로 정렬

• Arrangement.SpaceAround : 각 요소 사이에 빈 공간 넣기(시작, 끝도 공백 포함)

• Arrangement.SpaceBetween : 처음과 끝으로 밀어넣고 사이 공간 차지

• Arrangement.SpaceEvenly : SpaceAround와 유사하지만 모든 빈공간의 크기가 같음

• 전체 Layout에서 Row의 위치를 지정할 때 : alignment사용

• Alignment = XML방식에서의 Gravity와 유사함

• Alignment.Bottom, Top, CenterVertically 가 존재함

• 스크롤을 가능하게 하기 위해선 스크롤의 위치를 저장해야함

• rememberScollState()를 사용하여 스크롤 상태를 가지고 Modifier.horizontalScoll(scrollState)와 같은 형태로 사용해야함

val scrollState = rememberScrollState()
Column(Modifier.verticalScroll(scrollState){
...
}

Box

• 뷰를 겹칠 때 사용하는 요소

• 크기 -> Modifier.size(100.dp)와 같이 사용

• 배경 -> Modifier.background(color)와 같이 사용

• Box내 요소 정렬-> contentAlignment사용

• Alignment.BottomCenter, BottomEnd, BottomStart, Center, CenterStart, CenterEnd, TopCenter, TopEnd, TopStart 사용 가능

• progateMinConstraints -> true시 Box내 뷰중 제일 작은 뷰를 전체 화면에 채움

BoxWithConstraints

• Box와 동일하지만 minWidth, minHeight 등을 사용할 수 있음

• 크기변화에 따라 처리가 가능함