[코틀린(Kotlin)] 안드로이드 UI 레이아웃(Layout

레이아웃이란?

ViewGroup의 파생 클래스로서, 포함된 View를 정렬하는 기능

 

1. 레이아웃의 종류

1-1. Linear Layout

컨테이너에 포함 된 뷰들을 수평 또는 수직으로 일렬 배치하는 레이아웃

• android:orientation = " "
  - vertical : 차일드를 위에서 아래로 수직으로 배열
  - horizontal : 차일드를 왼쪽에서 오른쪽으로 수평 배열

android:orientation의 예시

 

• LinearLayout의 자식(Children)으로 배치되는 View 위젯들은 오직 한 방향(가로or세로)으로만 배치한다
• 위젯의 크기(높이 또는 너비)와 관계없이 한 줄로만 배열한다
• LinearLayout의 자식들은 중첩되지 않고, 지정한 방향으로 쌓이는 형태로 표시된다
• LayoutWeight
  - LinearLayout에 자식(Children)들이 배치 될 때, 전체 영역 대비 비율의 개념으로 지정할 수 있는 
  Weight(가중치)를 설정할 수 있다

 

 

1-2. Relative Layout

뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정하여 배치하는 레이아웃

• RelativeLayout은 자식 위젯들이서로 간의 상대적 배치 관계에 따라 화면에 표시될 위치가 결정되도록 만들어준다
  예) A를 화면에 왼쪽에 표시, B를 A의 오른쪽에 표시 등

RelativeLayout의 예시

• View위젯들을 포함하는 RelativeLayout자체가 상대적 위치의 기준점으로 사용될 수 있다
  (View위젯 입장에서는 부모(Parent)이기 때문에)

RelativeLayout 자체가 상대적 위치의 기준점이 되는 예시

• RelativeLayout의 자식들에 "상대적인" 배치 기준을 지정하지 않는다면, RelativeLayout 내부에서 중첩되어 표시된다

 

 

1-3. Table Layout

표 형식으로 자식을 배치하는 레이아웃

• 자식 View위젯들을 테이블(행과 열)로 나누어 표시하는 Layout클래스이다
• stretchColumns : 늘릴 열을 지정(인덱스는 0부터 시작)
  "*" : 모든 열을 늘려서 배치한다
  "1,2" : 1열(왼쪽에서 2번째)과 2열(왼쪽에서 3번째)를 늘려서 배치한다
• TableRow : 정해진 규칙에 따라 크기가 결정되므로, layout_width/height를 지정할 필요가 없다
  layout_width는 항상 wrap_content
  layout_height는 항상 match_content

 

 

1-4. Frame Layout

컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃

• 하나의 자식 View위젯을 자식으로 추가하면 겹쳐진 형태로 표시되며, 가장 최근에 추가된 View위젯이 상위에 표시

 

 

1-5. Constraint Layout

제약 조건을 사용해 화면을 구성하는 방법

• 복잡한 레이아웃을 단순한 계층구조를 이용해 표현 할 수 있는 ViewGroup이다
• 형제 View들과의 관계를 정의해서 레이아웃을 구성한다는 점은 RelativeLayout과 비슷하지만
  보다 유연하고, 다양한 기능을 제공한다

ConstraintLayout 방법을 사용해서 View위젯들을 구성하는 예시

• 위젯의 크기 설정
  리사이즈 핸들(ResizeHandle) 이용하여 설정할 수도 있다
  -> 위젯을 클릭 후 모서리에 생기는 사각형의 핸들을 드래그해서 크기 설정할 수도 있고,
  드래그해서 크기를 설정하면 오른쪽에 속성 창에서 width와 height를 입력해서 설정 가능하다
  수치를 직접 입력하는 것 외에 wrap_content와 match_constraint가 있다
  wrap_content : 위젯 내부에 있는 컨텐츠에 맞게 길이가 결정된다
  match_constraint : constraint에 설명하는 사이트 핸들로 정렬되어 있을 때 그 영역을 꽉 채운다
  (match_parent => parent객체에 꽉 채운다)
• 위젯의 상대적인 정렬
  사이드핸들을 이용해서 위젯이 다른 위젯 또는 화면의 경계에 대해서 어떻게 정렬될지 지정할 수 있다
  (사이드핸들은 각 변의 가운데 있는 원)

 

 

 

 

 

 

ConstraintLayout을 사용하는 이유

• RelativeLayout에선 불가능했던 자식 뷰간의 상호 관계 정의가 가능하다
  예) 두 View를 위아래로 붙혀서 컨테이너 중앙에 배치하기 등
• LinearLayout을 써야만 했던 뷰비율 조절도 간단하게 사용가능하다
• 뷰계층을 간단하게 할 수 있어 유지보수도 좋고 성능도 좋다

ConstraintLayout이 제공하는 제약(Constraint) 분류

 

 

 

2. 레이아웃의 속성 (Margin / Padding / Gravity)

2-1. Margin

• 뷰와 다른 뷰(컨테이너)간의 간격을 말한다
• layout_margin: 상하좌우로 동일한 마진 설정 시에 사용되는 속성
• layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom
  을 이용해서 4방향의 마진을 다르게 설정할 수 있다

 

 

2-2. Padding

• 뷰(컨테이너)안으로의 간격을 말한다
• layout_padding : 상하좌우로 동일한 패딩 설정 시에 사용되는 속성
• layout_paddingLeft, layout_paddingRight, layout_paddingTop, layout_paddingBottom
  을 이용해서 4방향의 패딩을 다르게 설정할 수 있다

마진(Margin)과 패딩(Padding)은 동시에 사용할 수 있다

 

 

2-3. Gravity

해당 뷰안의 내용의 위치에 대한 정렬방식을 지정한다

 

2.4. layout_gravity

부모 뷰 안에서 해당 뷰의 정렬 방식을 지정한다

android:layout_gravity="bottom"                 // 부모 뷰에서 아래 쪽에 위치시킴
android:layout_gravity="center"                 // 부모 뷰의 중앙에 위치 시킴
android:layout_gravity="center_horizontal"	// 부모 뷰의 수평기준으로 중앙에 위치시킴
android:layout_gravity="center_vertical"	// 부모 뷰의 수직기준으로 중앙에 위치시킴
android:layout_gravity="end"                    // 부모 뷰에서 텍스트 방향의 끝에 위치시킴
android:layout_gravity="left"                   // 부모 뷰에서 왼쪽에 위치시킴
android:layout_gravity="right"                  // 부모 뷰에서 오른쪽에 위치시킴
android:layout_gravity="top"                    // 부모 뷰에서 위쪽에 위치시킴

 

Layout_gravity를 이용한 예시