Archive

07_뷰를 배치하는 레이아웃

7 min read

요약

레이아웃 종류배치 방식핵심 속성
LinearLayout가로 또는 세로 방향으로 순서대로 나열orientation(방향), layout_weight(여백), gravity(정렬)
RelativeLayout다른 뷰의 상대적 위치를 기준으로 배치layout_above/below/toLeftOf/toRightOf
layout_/align*/alignParent*
FrameLayout위에 겹쳐서 배치visibility(View.VISIBLE/INVISIBLE/GONE)
TableLayout표 형태로 배치 (열 병합 가능)<TableRow>, layout_span/column, stretchColumns
GridLayout표 형태로 배치 (행/열 병합 가능)rowCount, columnCount, layout_row/column/*Span
ConstraintLayout제약 조건으로 계층 구조 배치constraint, margin

1. Layout 개요

  • Layout
    • 레이아웃은 화면을 독자적으로 출력하지 않고 다른 뷰 객체를 포함하는 그릇 역할
    • ViewGroup 클래스로부터 상속받으며,
    • 내부에 버튼·텍스트뷰·에디트텍스트 등 위젯을 담음
    • 레이아웃 클래스마다 뷰를 배치하는 규칙이 존재

2. LinearLayout (선형 배치)

2.1. 기본 규칙

  • orientation 속성으로 방향 지정: horizontal | vertical
    • android:orientation="horizontal" 또는 "vertical" 속성
  • 뷰를 추가한 순서대로 나열
  • 위젯 수가 많아 화면을 벗어나도 자동 줄바꿈 없음

2.2. 중첩 사용

  • 레이아웃도 뷰이므로 다른 레이아웃 안에 포함 가능
  • 중첩을 활용하면 복잡한 화면 구성 가능

2.3. 여백 채우기: layout_weight 속성

  • 남은 여백을 가중치 비율로 나누어 차지
    • layout_weight="1" → 남은 여백 전체를 차지 (혼자일 때)
    • 두 뷰에 1과 3을 지정하면 → 여백을 1/4, 3/4 로 분할
  • 뷰 크기를 0dp로 설정하고 가중치로만 비율 지정 → 정확한 비율 분할 가능
<!-- 세로로 3등분 예시 -->
<Button android:layout_height="0dp" android:layout_weight="1" />
<Button android:layout_height="0dp" android:layout_weight="1" />
<Button android:layout_height="0dp" android:layout_weight="1" />
  • 주의
    • layout_weight는 같은 레이아웃 내 뷰들 사이에서만 여백을 나눔
    • 중첩 레이아웃끼리는 서로 영향 없음

2.4. 뷰 정렬 속성: gravity vs. layout_gravity

속성대상설명
gravity내부 콘텐츠뷰 안의 텍스트 등 콘텐츠 정렬
layout_gravity뷰 자신부모 레이아웃 안에서 뷰 자신의 위치
  • 기본값: left|top
  • orientation 방향과 동일한 방향으로 layout_gravity 지정 시 적용 안 됨 → 부모에 gravity="center" 사용

3. RelativeLayout (상대 위치 배치)

  • 기본 규칙
    • 기준이 되는 뷰의 아이디가 필요: @+id/기준뷰아이디
    • 위치 속성 미사용 시 모든 뷰가 겹쳐서 출력됨

3.1. 상대 뷰 기준 배치 속성

속성설명
layout_above기준 뷰의 위쪽
layout_below기준 뷰의 아래쪽
layout_toLeftOf기준 뷰의 왼쪽
layout_toRightOf기준 뷰의 오른쪽

3.2. 맞춤 정렬 (align) 속성

속성설명
layout_alignTop기준 뷰와 위쪽 맞춤
layout_alignBottom기준 뷰와 아래쪽 맞춤
layout_alignLeft기준 뷰와 왼쪽 맞춤
layout_alignRight기준 뷰와 오른쪽 맞춤
layout_alignBaseline기준 뷰와 텍스트 기준선 맞춤

3.3. 부모(Parent) 기준 배치 속성

속성설명
layout_alignParentTop부모 위쪽 맞춤
layout_alignParentBottom부모 아래쪽 맞춤
layout_alignParentLeft부모 왼쪽 맞춤
layout_alignParentRight부모 오른쪽 맞춤
layout_centerHorizontal부모 가로 중앙
layout_centerVertical부모 세로 중앙
layout_centerInParent부모 가로·세로 중앙

4. FrameLayout (겹쳐서 배치)

  • 카드를 쌓듯이 뷰를 추가한 순서대로 좌측 상단부터 위에 겹쳐서 출력

  • 특정 상황에서 하나의 뷰만 출력할 때 사용

  • visibility 속성과 함께 사용

    • View.VISIBLE
    • View.INVISIBLE(공간 O)
    • View.GONE(공간 X)
// 버튼 클릭 시 버튼 숨기고 이미지 보여주기
binding.button.visibility = View.INVISIBLE
binding.imageView.visibility = View.VISIBLE
  • 탭위젯 등과 혼용 시 유용

5. TableLayout (표 형태 배치)

  • <TableRow>와 함께 사용
    • 행의 수 = <TableRow>의 수
    • 열의 수 = <TableRow> 안에 포함된 위젯의 수 (첫 번째 행 기준)

5.1. 주요 속성

속성위치설명
layout_span위젯현재 셀부터 N개 셀 합치기 (열 병합)
layout_column위젯지정된 열에 위젯 표시 (0부터 시작)
stretchColumnsTableLayout지정 열의 너비 확장 ("*" = 모든 열 동일 크기)

테이블 레이아웃에 포함된 위젯은 layout_width, layout_height 속성 생략 가능

6. GridLayout (그리드 배치)

  • Android 4.0(API 14)부터 지원
  • TableLayout보다 직관적이고 자유로움
  • 행 확장이 가능하여 유연한 화면 구성에 적합

orientation=vertical → rowCount로 행 수 지정 orientation=horizontal → columnCount로 열 수 지정

6.1. 기본 속성

속성설명
orientation방향 (horizontal / vertical)
columnCount가로로 나열할 뷰 개수
rowCount세로로 나열할 뷰 개수
layout_row뷰가 위치하는 세로 인덱스 (0부터)
layout_column뷰가 위치하는 가로 인덱스 (0부터)
layout_columnSpan가로로 열 병합
layout_rowSpan세로로 행 병합
layout_gravity셀 안에서 뷰 정렬
(fill, fill_horizontal, fill_vertical 등)

7. ConstraintLayout (계층 구조 배치)

  • androidx에서 제공하는 라이브러리
  • 레이아웃 편집기(GUI) 환경에서 주로 사용
  • RelativeLayout과 비슷하나 더 많은 속성 제공

7.1. 핵심 규칙

  • 위젯의 좌우 중 하나, 상하 중 하나는 반드시 다른 뷰와 연결
    • → 최소 2개의 연결 필요

7.2. 레이아웃 편집기 구성 요소

번호이름설명
1Palette뷰 선택 도구
2Component Tree뷰 계층 구조
3Toolbar도구 모음
4Design Editor화면 배치 편집
5Attributes속성 설정
6View Mode보기 모드 전환
7Zoom/Pan화면 조절

그래프 뷰