[Do it! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린] 뷰를 배치하는 레이아웃
LinearLayout은 뷰를 가로나 세로로 나열하고, RelativeLayout은 상대적인 위치로 뷰를 배치한다. FrameLayout은 뷰를 겹쳐서 출력하며, GridLayout은 테이블 구조로 뷰를 배치한다. ConstraintLayout은 더 많은 속성을 제공하며, 안드로이드 스튜디오의 레이아웃 편집기를 통해 쉽게 구성할 수 있다.
Jul 12, 2024
Contents
🌼선형으로 배치 - LinearLayout💡LinearLayout 배치 규칙💡여백을 채우는 layout_weight 속성💡뷰를 정렬하는 gravity, layout_gravity 속성🌼상대 위치로 배치 - RelativeLayout💡RelativeLayout 배치 규칙💡맞춤 정렬하는 align 속성🌼겹쳐서 배치 - FrameLayout💡FrameLayout🌼표 형태로 배치 - GridLayout💡GridLayout 배치 규칙💡GridLayout 속성🌼계층 구조로 배치 - ConstraintLayout💡레이아웃 편집기에서 레이아웃 구성하기🏁결론🌼선형으로 배치 - LinearLayout
💡LinearLayout 배치 규칙
LinearLayout
은 뷰를 가로나 세로 방향으로 나열하는 레이아웃 클래스다.orientation
이라는 속성에horizontal
이나vertical
값으로 방향을 지정한다.
- 방향만 설정하면 뷰를 추가한 순서대로 나열하며, 화면에서 벗어나도 줄을 자동으로 바꾸지 않는다.
- 가로세로가 중첩된 복잡한 구조는
LinearLayout
을 중첩하면 구현할 수 있다.
<LinearLayout android:orientation="horizontal"> <ImageView /> <LinearLayout android:orientation="vertical"> <TextView /> <TextView /> </LinearLayout> <TextView /> </LinearLayout>
💡여백을 채우는 layout_weight 속성
- 화면에 뷰를 배치하다 보면 여백이 생기는데, 이 여백을 뷰로 채울 수 있다.
- 여백을 뷰로 채우려면
layout_weight
속성을 사용한다. layout_weight
속성을 사용하면 수치를 따로 계산하지 않아도 각 뷰에서 설정한 가중치로 여백을 채울 수 있다.layout_weight
속성에 지정한 숫자는 가중치를 나타낸다. 예를 들어 버튼 2개에layout_weight
를 1과 3으로 각각 설정하면, 각 버튼은 가로 여백을 1/4, 3/4만큼 나누어 차지한다.
- 중첩된 레이아웃에서는 같은 영역에 있는 뷰끼리만
layout_weight
로 설정한 가중치가 영향을 미친다.
- 뷰의 크기를 0으로 하고
layout_weight
값만 설정할 수도 있다. 뷰의 크기가 0이면 화면에 아무것도 나오지 않는다(화면 전체가 여백이 된다). 이 때layout_weight
를 설정하면 여백을 모두 차지하게 된다.
뷰의 크기를 퍼센트로 지정할 수는 없다. ex) android:width=”10%”
하지만 크기를 0으로 설정하고 layout_weight 값으로 설정하면 가중치로 크기를 결정하므로 퍼센트로 크기를 지정한 것과 같은 효과를 볼 수 있다.
💡뷰를 정렬하는 gravity, layout_gravity 속성
- 뷰를 정렬할 때는
gravity, layout_gravity
속성을 사용한다. 이 속성을 사용하지 않으면 기본값은 left/top(왼쪽 위)이 된다. gravity
속성의 정렬 대상은 콘텐츠(해당 레이아웃에 추가한 뷰)고,layout_gravity
속성의 정렬 대상은 뷰 자체를 정렬하는 속성이다.gravity
속성을right|bottom
값으로,layout_gravity
속성을center_horizontal
값으로 지정하는 식으로 뷰를 원하는 위치에 지정할 수 있다.
LinearLayout
의orientation
속성에 설정한 방향과 같은 방향으로는layout_gravity
속성이 적용되지 않는다.- 따라서 뷰를
LinearLayout
영역의 가운데로 정렬하고 싶다면, 뷰에layout_gravity="center"
로 설정하는 게 아니라, 레이아웃에gravity=”center”
로 설정해야 한다.
🌼상대 위치로 배치 - RelativeLayout
💡RelativeLayout 배치 규칙
RelativeLayout
은 상대 뷰의 위치를 기준으로 정렬하는 레이아웃 클래스다.android:layout_above
: 기준 뷰의 위쪽에 배치android:layout_below
: 기준 뷰의 아래쪽에 배치android:layout_toLeftOf
: 기준 뷰의 왼쪽에 배치android:layout_toRightOf
: 기준 뷰의 오른쪽에 배치
RelativeLayout
은LinearLayout
처럼 자동으로 가로세로 방향으로 배치되지 않으므로 콘텐츠에id
값을 설정하고,layout_above
등의 속성값으로 지정하지 않으면 겹쳐서 배치된다.
💡맞춤 정렬하는 align 속성
- 해당 콘텐츠의 크기가 서로 달라서 원하는 위치에 배치되지 않을 수 있다. 이 때
align
속성에id
값을 입력하는 것으로 상대 뷰의 어느 쪽에 맞춰서 정렬할지를 정할 수 있다.` android:layout_alignTop
: 기준 뷰와 위쪽을 맞춤android:layout_alignBottom
: 기준 뷰와 아래쪽을 맞춤android:layout_alignLeft
: 기준 뷰와 왼쪽을 맞춤android:layout_alignRight
: 기준 뷰와 오른쪽을 맞춤android:layout_alignBaseline
: 기준 뷰와 텍스트 기준선을 맞춤
- 상위 레이아웃을 기준으로 맞춤 정렬하는 속성도 있다. 뷰를 부모 영역의 오른쪽 또는 아래쪽에 붙이고 싶을 때 사용하는 속성이다.
android:layout_alignParentTop
: 부모의 위쪽에 맞춤android:layout_alignParentBottom
: 부모의 아래쪽에 맞춤android:layout_alignParentLeft
: 부모의 왼쪽에 맞춤android:layout_alignParentRight
: 부모의 오른쪽에 맞춤android:layout_centerHorizontal
: 부모의 가로 방향 중앙에 맞춤android:layout_centerVertical
: 부모의 세로 방향 중앙에 맞춤android:layout_InParent
: 부모의 가로 세로 중앙에 맞춤
LinearLayout으로 배치한 화면을 RelativeLayout으로 구현할 수도 있고 그 반대도 가능하다.
화면을 구성할 때 사용하는 레이아웃은 개발자가 선택하면 된다.
🌼겹쳐서 배치 - FrameLayout
💡FrameLayout
FrameLayout
은 뷰를 겹쳐서 출력하는 레이아웃 클래스다.
- 주로 똑같은 위치에 여러 뷰를 겹쳐서 놓고, 어떤 순간에 하나의 뷰만 출력할 때 사용한다.
- 따라서 대부분 뷰의 표시 여부를 설정하는
visibility
속성을 함께 사용한다. - 처음에는
visibility="invisible"
로 보이지 않게 설정했다가 액티비티 코드에서 원하는 순간에 뷰의visibility
를 바꾸는 식으로 활용할 수 있다.
대표적으로 탭 화면을 만들 때 사용하면 편하다.
탭 버튼을 누를 때 FrameLayout으로 배치된 특정 화면을 보이게 하는 방식이다.
🌼표 형태로 배치 - GridLayout
💡GridLayout 배치 규칙
GridLayout
은 행과 열로 구성된 테이블 화면을 만드는 레이아웃 클래스다.orientation
: 방향 설정rowCount
: 세로로 나열할 뷰 개수columnCount
: 가로로 나열할 뷰 개수
rowCount
나columnCount
에 설정한 개수만큼 뷰를 추가하면 자동으로 줄바꿈해서 그 다음 줄에 뷰를 출력한다.
GridLayout
에 추가한 뷰의 크기는 기본으로wrap_content
로 지정되므로layout_width, layout_height
를 설정하지 않아도 오류가 발생하지 않는다.
💡GridLayout 속성
GridLayout
으로 뷰를 배치하면 추가한 순서대로 배치되는데,layout_row, layout_column
속성을 이용하면 특정 뷰의 위치를 조정할 수 있다.layout_row
: 뷰가 위치하는 세로 방향 인덱스layout_column
: 뷰가 위치하는 가로 방향 인덱스
- 위치를 변경한 이후에 추가된 뷰는 지정한 위치 다음부터 차례로 출력된다.
GridLayout
을 이용하면서 특정 뷰의 크기를 확장해야 할 때가 있다. 이 경우layout_gravity=”fill_horizontal”
속성을 이용한다.- 공간이 충분하다면
layout_row, layout_column
속성으로 여백에 다음 뷰를 넣어 한 칸에 뷰를 두 개 표시할 수도 있다. 이 경우 같은 칸에 표시하면 뷰가 겹치므로layout_gravity
속성으로 정렬 위치를 지정해 줘야 한다.
- 어떤 뷰가 테이블에서 여러 칸을 차지하게 설정할 수 있다.
layout_columnSpan
: 가로로 열 병합layout_rowSpan
: 세로로 행 병합
TableLayout도 마찬가지로 뷰를 테이블 구조로 나타낼 수 있지만, TableLayout은 한 줄을 <TableRow>로 표현해 줘야 하기 때문에 불편할 수 있다.
또한 앱이 실행되다가 셀의 개수가 변하면 행을 일일히 계산해서 TableRow를 지정해야 한다. 하지만 GridLayout에서는 방향과 개수만 설정하면 알아서 행이 결정된다.
둘 중 어느 것을 선택할지는 개발자가 선택하면된다.
🌼계층 구조로 배치 - ConstraintLayout
💡레이아웃 편집기에서 레이아웃 구성하기
ConstraintLayout
은 androidx에서 제공하는 라이브러리다. 그에 따라build.gradle.kts
의dependencies
에implementation
을 선언해야 한다.
implementation(libs.androidx.constraintlayout)
ConstraintLayout
은 뷰를 상대 위치로 배치하는RelativeLayout
과 비슷하지만 더 많은 속성을 제공한다.- 하지만 이 많은 속성을 XML 파일에 직접 작성하기는 어렵다.
- 그에 따라 안드로이드 스튜디오에서는 마우스 클릭으로 레이아웃을 구성할 수 있는
레이아웃 편집기
를 제공한다. 팔레트
: 레이아웃을 구성할 수 있는 다양한 뷰와 뷰 그룹컴포넌트 트리
: 레이아웃에서 구성 요소의 계층 구조 표시툴바
: 레이아웃 속성 설정디자인 편집기
: 디자인 뷰나 청사진 뷰 작업 영역속성
: 선택한 뷰의 속성을 지정보기 모드
: 레이아웃 모드 선택. Code, Split, Design 중 선택
- 팔레트에서 뷰를 선택하고 마우스로 끌어서 작업창에 추가할 수 있다.
- 그 후 속성 창에서 뷰의 속성을 추가하거나 변경할 수 있다.
ConstraintLayout
은 이 때id, layout_width, layout_height
이외에제약 조건을 지정
해 줘야 한다.- 부모 영역에서 어디에 어느 정도의 여백으로 출력할지, 또는 다른 뷰를 기준으로 상대 위치를 지정해 줘야 한다.
- 다른 뷰를 특정 뷰의 옆에 배치할 때, 어느 쪽에 제약을 지정할 지 선택할 수 있다.
ConstraintLayout이 아닌 다른 레이아웃도 레이아웃 편집기로 구성할 수 있지만, 다른 레이아웃은 우리가 직접 작성해야 하는 부분을 도구가 많이 지원하지 않기 때문에 추천하지 않는다.
🏁결론
LinearLayout
은 뷰를 가로나 세로로 나열하고, RelativeLayout
은 상대적인 위치로 뷰를 배치한다. FrameLayout
은 뷰를 겹쳐서 출력하며, GridLayout
은 테이블 구조로 뷰를 배치한다. ConstraintLayout
은 더 많은 속성을 제공하며, 안드로이드 스튜디오의 레이아웃 편집기를 통해 쉽게 구성할 수 있다.Share article