[안드로이드 코틀린] 5. 레이아웃(2) - 리니어 레이아웃/렐러티브 레이아웃/테이블 레이아웃

레이아웃

 

배치를 담당하는 레이아웃

- 레이아웃 안에 존재하는 위젯을 배치하게 해줌

- 프로젝트를 처음 생성하면 화면을 구성할 수 있는 activity_main이라는 이름의 레이아웃 파일이 자동으로 만들어짐

    - 레이아웃 파일은 소스 코드가 아닌 리소스로 분류됨

    - 파일명은 모두 소문자로 작성됨

    - 파일 이름 끝에 파일의 타입인 XML을 붙여서 activity_main.xml이 됨

 

자주 사용되는 레이아웃

1) 리니어 레이아웃(선형, LinearLayout)

2) 렐러티브 레이아웃(상대, RelativeLayout)

3) 테이블 레이아웃(TableLayout)

4) 그리드 레이아웃(GridLayout)

5) 프레임 레이아웃(FrameLayout)

6) 컨스트레인트 레이아웃(제약, ConstraintLayout)

 

---

리니어 레이아웃(LinearLayout)

- 위젯을 가로 또는 세로 한 줄로 배치하기 위한 레이아웃

- 레이아웃 속성 orientation의 가로(horizontal), 세로(vertical)만 변경해주면 기존에 배치되어 있던 위젯들도 방향을 바꿀 수 있음

 

사용 방법

1. UI 편집기 우측 상단에 있는 [Code] 버튼을 클릭해서 모드를 변경

2. 화면이 XML 코드를 직접 편집할 수 있는 모양으로 변경

3. XML 코드에서 2행에 있는 ‘androidx.constraintlayout.widget.ConstraintLayout’을 ‘LinearLayout’으로 수정

4. 다시 우측 상단에 있는 [Design] 버튼을 클릭해서 모드를 변경하면 컴포넌트 트리의 최상위 레이아웃이 리니어 레이아웃으로 변경된 것을 확인

 

한 화면에서 위젯을 수평과 수직으로 다양하게 배치해야 하는 경우

- 리니어레이아웃 안에 리니어레이아웃을 생성하는 방식을 사용

- 바깥의 큰 리니어레이아웃을 3개의 작은 리니어레이아웃으로 분류한 후 각 리니어레이아웃 안에 필요한 위젯을 배치하는 방식을 주로 사용

 

주요 속성

- orientation

 : 레이아웃 안에 배치할 위젯의 수직 또는 수평 방향을 설정

- gravity

 : 레이아웃 안에 배치할 위젯의 정렬 방향을 좌측, 우측, 중앙 등으로 설정

- padding

 : 레이아웃 안에 배치할 위젯의 여백을 설정

- layout_weight

 : 레이아웃이 전체 화면에서 차지하는 공간의 가중값을 설정하는데, 여러 개의 레이아웃이 중복될 때 주로 사용

- baselineAligned

 : 레이아웃 안에 배치할 위젯을 보기 좋게 정렬함

※ 레이아웃도 View 클래스의 하위 클래스이므로 View 클래스의 XML속성과 메소드를 모두 사용할 수 있음

 

orientation 속성

- 리니어레이아웃의 가장 기본적인 속성

- 값으로 vertical과 horizontal을 지정할 수 있음 

- vertical

 : 리니어레이아웃 안에 포함될 위젯의 배치를 왼쪽 위부터 수직 방향으로 쌓음

- horizontal

 : 리니어레이아웃 안에 포함될 위젯의 배치를 왼쪽 위부터 수평 방향으로 쌓음

 : 입력하지 않으면 가로(horizontal)가 적용돼서 가로로 배치

 

gravity 속성

- 레이아웃 안의 위젯을 어디에 배치할 것인지를 결정

    - 기본값은 좌측 상단에 배치됨

- 값으로 left, right, center, top, bottom 등을 사용

    - 2개를 조합하여 사용할 수도 있음

    - right | bottom : 오른쪽 아래에 정렬함

속성값	설명
top	위쪽에 배치
bottom	아래쪽에 배치
left	왼쪽에 배치
right	오른쪽에 배치
center_vertical	수직 중앙에 배치
center_horizontal	수평 중앙에 배치
center	수평과 수직의 중앙에 배치

 

layout_gravity 속성

- 자신의 위치를 부모(주로 레이아웃)의 어디에 위치시킬지 결정함

- 값으로 left, right, center, top, bottom 등을 사용

    - 속성값의 특징은 gravity 속성과 동일하지만 적용되는 대상이 다름

    - gravity는 레이아웃에, layout_ gravity는 위젯에 주로 지정함

 

마진과 패딩 속성

마진(margin)

- 외부 여백, 즉 뷰와 부모 뷰 사이의 공간

- 4면 모두 동일한 여백이 지정됨

    - layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom 으로 4면의 개별 여백 지정 가능

 

패딩(padding)

- 내부 여백, 즉 뷰와 뷰의 내용물 사이의 공간

- 4면 모두 동일한 여백이 지정됨

    - paddingLeft, paddingTop, paddingRight, paddingBottom 으로 4면의 개별 여백 지정 가능

 

마진 관련 속성

XML 속성	설명
layout_margin	상하좌우 네 방향 마진을 지정한다
layout_marginTop	위쪽 마진을 지정한다.
layout_marginBottom	아래쪽 마진을 지정한다.
layout_marginLeft	왼쪽 마진을 지정한다.
layout_marginRight	오른쪽 마진을 지정한다.

 

패딩관련 속성

XML 속성	설명
padding	상하좌우 네 방향 패딩을 지정한다
paddingTop	위쪽 패딩을 지정한다.
paddingBottom	아래쪽 패딩을 지정한다.
paddingLeft	왼쪽 패딩을 지정한다.
paddingRight	오른쪽 패딩을 지정한다.

 

baselineAligned 속성

- 크기가 다른 위젯들을 보기 좋게 정렬함 

- true와 false 값을 지정할 수 있음

    (a) : 리니어레이아웃에 baselineAligned를 false로 지정

    (b) : 생략하거나 true로 지정

 

layout_weight 속성

- 중복 리니어 레이아웃에서 사용됨

    - 리니어레이아웃을 여러 개 사용할 경우 각 레이아웃의 크기를 지정해야 함

    - 레이아웃을 화면 전체에 채워야 하기 때문에 주로 전체 화면에 대한 비율(%)로 지정함

      → 비율에 따라 부모 레이아웃의 남은 영역을 차지하는 비율이 결정됨

※ 비율이 1:1이라도 똑같지 않을 수 있음

※ layout_weight 속성이 있는 위젯만 남은 공간을 차지함

 

 

---

렐러티브 레이아웃(RelativeLayout)

- 위젯과 부모와의 위치 관계 또는 위젯끼리의 관계를 지정함으로써 뷰를 배치

 

부모 뷰를 기준으로 위치 지정

- 자식 뷰의 기본 위치

    - 부모 뷰의 좌측 상단이지만 다양한 layout_~ 속성을 이용해 자유롭게 위치 지정

 

다른 위젯의 상대 위치에 배치

- 렐러티브레이아웃 안에서 다른 위젯의 특정한 곳에 배치하는 방법도 있음

    - 각 속성의 값에는 다른 위젯의 아이디를 지정하면 되는데 “@+id/식별자”와 같은 형식으로 사용함

    - 다른 위젯과 관련된 속성은 다음 그림과 같음

 

---

테이블 레이아웃(TableLayout)

- 위젯을 표형태로 배치할 때 주로 사용

- <TableRow>와 함께 사용

    - 행의 수 : 의 수

    - 열의 수 : 안에 포함된 위젯의 수

 

테이블 레이아웃의 속성

layout_span

- 테이블레이아웃 안에 포함된 위젯에 설정하는 속성

- 열을 합쳐서 표시하라는 의미

    - 예를 들어 layout_span=“2”는 현재 셀부터 2개의 셀을 합쳐서 표시함 

 

layout_column

- 테이블레이아웃 안에 포함된 위젯에 설정하는 속성

- 지정된 열에 현재 위젯을 표시 

 

stretchColumns

- <TableLayout> 자체에 설정하는 속성

- 지정된 열의 너비를 늘리라는 의미

    - stretch Columns=“*”는 각 셀을 모두 같은 크기로 확장하여 전체 화면이 꽉 차는 효과를 냄

    - 열 번호는 0번부터 시작