레이아웃은 화면을 구성하는 뷰들을 배치하는 컨테이너로서 다양한 유형의 레이아웃을 제공한다.
아래와 같은 레이아웃들을 확인할 수 있다.
| 레이아웃 이름 | 설명 |
| 제약 레이아웃 (ConstraintLayout) |
제약 조건 (Constraint) 기반 모델 제약 조건을 사용해 화면을 구성하는 방법 안드로이드 스튜디오에서 자동으로 설정하는 기본 레이아웃 |
| 리니어 레이아웃 (LinearLayout) |
일정한 방향으로 위젯들을 배치 - 박스 모델 여러 개의 위젯을 순차적으로 배열 표준 자바의 BoxLayout과 유사 - UI를 일렬로 배치하는 레이아웃 |
| 상대 레이아웃 (RelativeLayout) |
규칙 기반 모델 부모 컨테이너(레이아웃)나 다른 뷰와의 상대적 위치를 이용해 화면을 구성하는 방법 |
| 프레임 레이아웃 (FrameLayout) |
싱글 모델 하나의 뷰만 보여주는 방법(나머지는 중첩되어 숨겨져 있음) 여러 개의 뷰를 추가하는 경우, 뷰를 중첩한 후 각 뷰를 전환하여 보여주는 방식으로, 스마트 폰의 한정된 공간에 많은 정보를 표시하기 위해 간편하게 탭 화면을 구현할 수 있다. |
| 테이블 레이아웃 (TableLayout) |
격자(Grid) 모델 격자 모양의 배열을 사용하여 화면을 구성하는 방법 HTML에서 많이 사용하는 정렬 방법과 유사하다 |
이중에서도 오늘 은 제약 레이아웃에 대해 알아보겠다.
제약 레이아웃
- 뷰(위젯)와 뷰, 혹은 뷰와 레이아웃 간의 관계를 정렬 기준을 지정하며, 관계 설정은 단방향으로만 가능하다.
- 제약 레이아웃은 복잡한 레이아웃을 배치하는 데 용이하다.
- 제약 레이아웃에서 뷰를 배치하기 위해서는 뷰의 가로 및 세로 제약 조건을 하나 이상 추가해야 한다.
- 제약 조건이란 뷰가 레이아웃 안의 다른 요소와 어떻게 연결(관계)되는지를 알려주는 것으로 뷰의 연결점(Anchor Point)과 대상(Target)을 연결하여 관계를 설정한다.
- 뷰의 위, 아래, 왼쪽, 오른쪽의 연결점을 부모 레이아웃 또는 다른 뷰의 연결점과 연결하면 제약조건 생성
- 연결점을 연결할 수 있는 타깃은?
- 같은 레이아웃 안에 들어 있는 다른 뷰의 연결점
- 부모 레이아웃의 연결점
- 가이드라인(Guideline) - 가이드라인은 실행 시 안보인다.
- 뷰(소스)와 타깃의 연결점은?
- Top, Bottom, Left, Right
- 가로축의 가운데(CenterX), 세로축의 가운데(CenterY)
- 베이스라인 - 텍스트를 보여주는 뷰인 경우만 적용한다.
제약 레이아웃 내에 배치되는 뷰(위젯)의 크기 및 정렬 기준은 세 가지의 핸들을 사용하여 조정한다.
뷰와 뷰, 또는 뷰와 레이아웃 간의 관계로 정렬 기준을 지정하며, 관계 설정은 단방향으로만 가능하다.
1. Resize Handle : 뷰의 꼭짓점에 있는 네모 모양을 드래그하여 뷰의 크기를 조정한다.
2. Side Constraint Handle : 제약 레이아웃에 뷰를 추가하면 각 모서리에 정사각형의 크기 조절 핸들과 각 면에 원형의 제약조건 핸들이 있는 박스가 표시된다. 뷰의 각 변에 제약조건 핸들(원형)을 드래그하여 수평 및 수직 축에 연결한다.(연결점과 타깃을 연결한다.) 연결은 같은 제약 레이아웃 내 있는 다른 뷰 또는 레이아웃 축을 기준으로 할 수 있으며, 같은 축 방향끼리만 연결 가능하다.
3. Baseline Constraint Handle : 베이스라인(밑줄) 정렬 제약 - 텍스트를 보여주는 뷰인 경우에만 사용한다.
뷰 텍스트의 베이스라인(기준선)에 다른 뷰 텍스트의 베이스라인을 맞춰 정렬한다.
4. Guideline Handle
수평 또는 수직의 가이드라인을 추가하고 가이드라인을 기준으로 정렬에 제약을 준다.
제약 규칙
모든 뷰에는 가로와 세로 하나씩 두 개 이상의 제약 조건이 있어야 한다.
같은 평면을 공유하는 기준점과 제약 핸들만이 제약을 만들 수 있다.
즉 수직의 평면(좌, 우 영역)은 오직 다른 뷰의 수직 평면(좌,우 영역)에만 제약을 걸 수 있다.
각가의 제약 핸들은 하나의 제약 만을 위해 사용될 수 있다.
단, 같은 기준점에 여러 개의 제약을 만들 수 있다.
제약의 종류
1. 부모 제약
부모 레이아웃의 연결점과 연결하여 제약 설정
2. 위치 제약
두 개의 뷰들 간의 순서를 정의한다 ( 수평 또는 수직 간)
3. 정렬 제약
다른 뷰의 가장자리에 뷰의 가장자리를 정렬
체인
체인은 양방향(수직/수평) 위치 제약 조건을 통해 서로 연결된 뷰의 그룹이다.
체인모드
- Spread : 뷰를 균등하게 배치(여백을 정리한 후)
- Spread inside : 첫 번째 뷰와 마지막 뷰는 체인의 각 끝에 있는 제약조건에 고정되고, 나머지 뷰는 균등하게 배치한다.
- Weighted : 가중치에 따라 공간 지정, 가중치가 높은 뷰에 가장 많은 공간이 지정되고, 가중치가 동일한 뷰는 동일한 크기의 공간을 지정한다.
- Packed : 뷰가 여백을 제외한 간격 없이 배치한다.
연결선이 만들어내는 XML 속성의 형식
아래와 같은 규칙으로 만들어진다,
layout)constraint[소스 뷰의 연결점]_[타깃 뷰의 연결점] = "[타깃 뷰의 id]"
좌측은 Start, 우측은 End, 위는 Top, 아래는 Bottom 으로 사용한다.
이상으로 포스팅을 마치겠습니다. 감사합니다
댓글