[Android] 레이아웃의 종류

Junwon SEO·2022년 10월 10일
0

안드로이드 앱을 개발하기 위해서는 사용자가 이용할 화면이 필요하다.
이 때 사용자의 눈에 보이는 화면을 뷰(View)라고 한다.
뷰를 구성하기 위해서는 화면 내에서 정렬이 필요한데 이를 레이아웃(Layout)이라 하며,
안드로이드 개발을 위해 사용되는 레이아웃의 종류에 대해 설명하였다.

안드로이드 레이아웃의 종류
1. Linear Layout
2. Relative Layout
3. Frame Layout
4. Table Layout
5. Grid Layout
6. Constraint Layout

1. Linear Layout
방향을 수평 또는 수직으로 결정하여 배치하는 레이아웃으로 가장 기본적인 레이아웃

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</LinearLayout>
  • android:orientation="vertical" -> 요소들을 수직방향으로 배치
  • android:orientation="horizontal" -> 요소들을 수평방향으로 배치
  • 자식들이 중첩(overrap)되지 않고, 지정한 방향으로 쌓이는(stacked) 형태로 표시됨

2. Relative Layout
다른 요소들에 의해 상대적으로 위치가 결정되는 레이아웃

  • 부모 컨테이너나 다른 뷰와의 상대적 위치를 이용해 화면에 배치하는 방식
  • Linear Layout 다음으로 많이 사용됨
  • 상대적 위치를 결정하는 속성들은 해당 블로그 참고!

3. Frame Layout
컨텐츠들이 겹겹이 쌓여 제일 앞에 놓여있는 컨텐츠가 사용자에게 보이는 형태

  • 기본 단위 모델
  • 하나의 뷰만 보여주는 방법
  • 여러 개의 뷰를 추가하는 경우 중첩이 가능하며, 뷰를 중첩한 후 각 뷰를 전환하여 보여주는 방식
  • 가장 먼저 배치한 위젯의 크기가 작다면 안보일 수도 있다.
  • 주로 Fragment를 사용하는 경우에 많이 사용된다.

4. Table Layout
자식(Children) View 위젯들을 테이블(행과 열로 구성)로 나누어 표시하는 레이아웃

  • 격자(Grid) 모델
  • View 위젯을 추가하기 위해서 먼저 TableRow 클래스를 사용하여 하나의 행을 추가해야 한다
  • 추가된 각 행에 View 위젯을 추가하면 테이블 형태로 정렬되어 표시된다
  • TableLayout의 전체 열(Column) 개수는 TableRow 중 가장 많은 열(Column)의 개수에 맞춰진다.
    ex) 특정 행이 4개의 열을 가지게 된다면 다른 행도 4개의 열을 가지게 된다. 물론 layout_span 하여 여러 열을 하나의 열로 merge할 수도 있다.
  • layout_width와 layout_height 사용 X
  • 레이아웃을 테이블 형태로 배치하기 때문에 너비와 높이에 대한 속성이 큰 의미가 없다.
    대신 stretchColumns, layout_span, layout_column등의 속성이 사용됨.

6. Contstraint Layout
뷰 위젯의 위치와 크기를 유연하게 조절할 수 있게 만들어주는 레이아웃

  • 구글이 권장하는 레이아웃으로, XML을 생성하면 기본적으로 생성되어있는 레이아웃
  • Relative Layout의 '상대적 배치' 특성에 LinearLayout의 '가중치(weight) 특성'을 적용하고,
    체인(chain) 사용으로 다른 레이아웃 없이 '요소들을 그룹화'가 가능함
  • 연결선(chain)을 통해 그 안에 추가된 뷰들의 위치를 결정
  • 연결선은 뷰의 상하좌우에 있는 연결점을 다른 레이아웃이나 위젯의 상하좌우와 연결하여 만듦
  • 만약, 뷰(View)의 위치를 결정 할 수 있을 만큼의 연결선이 없으면 해당 뷰는 위치 할 수 없게 됨
  • Constraint Layout의 더 자세한 내용은 블로그1, 블로그2 참고!
  • 아래와 같은 제약 사항을 설정할 수 있음
- Margins : 여백
- Relative positioning : 요소간 상대 위치 지정(left,right, top, bottom, start, end, baseline)
- Centering positioning : 뷰를 부모 레이아웃 또는 제약 영역의 중앙에 배치
- Circular positioning : 대상 뷰를 기준으로 각도와 반지름으로 상대위치 지정
- Visibility behavior : 가시성에 기반한 동작
- Dimension constraints : 뷰에 적용된 제약에 따른 뷰의 크기 결정
- Chains : 일련 관계 (수평 또는 수직 방향으로 나열된 뷰에 대한 그룹화. 배치 스타일 지정)
- Virtual Helpers objects : 가상 지원 객체 (레이아웃 내 효율적인 뷰 배치에 사용 가능한 몇가지 Helper객체들(Guideline, Barreir, Group))
- Optimizer : 제약 카테고리에 대한 최적화

Reference
Layout의 종류와 이미지

0개의 댓글