[Android] Layout 종류 & 사용법

Oxong·2021년 7월 1일

Frame Layout Grid View Linear Layout List View Relative Layout constraint layout tablelayout

안드로이드 개념 & 용어 스터디

목록 보기

6/12

21.06.30
공부한 것을 정리하는 용도의 글이므로 100% 정확하지 않을 수 있습니다.
참고용으로만 봐주시고, 내용이 부족하다고 느끼신다면 다른 글도 보시는 것이 좋습니다.
+ 틀린 부분, 수정해야 할 부분은 언제든지 피드백 주세요. 😊
by. ryalya

들어가기 전

개발 테스트를 할 때는 완벽한 뷰(View)를 구성하고 테스트 할 필요는 없다.

하지만 배포할 앱을 개발할 때는 사용자가 확인할 수 있는 화면이 필요하고, 중요하다.

사용자가 보는 화면의 모든 구성 요소들(버튼, 이미지 등)을 뷰(View)라고 한다.

당연하지만 이 뷰(View)들은 우리가 원하는 자리에 알아서 배치되는 것이 아니라 화면 안에서 정렬을 해준 것이다.

안드로이드에는 화면에 보이지는 않지만 틀(테두리)을 가지고 있는, 그 틀안에서 각각의 뷰(View)를 배치하는데 도움을 주는 레이아웃이 존재한다.

레이아웃은 View들을 정렬해주고, 묶어주므로 ViewGroup(뷰그룹)이라고 부르기도 한다.

오늘은 레이아웃에 대해 정리해보았다.

+) 정리하는 데 참고한 레퍼런스(출처)들은 Reference에 정리했다.

레이아웃

사용자가 보는 화면은 기본적으로 Activity(액티비티)로 이루어져 있다.

위에서 언급했다시피 레이아웃은 뷰(View)들을 배치하는 데 도움을 준다.

하지만 종류에 따라 다른 기능을 제공하므로 화면에 어떻게 배치할지를 미리 생각하고, 상황에 맞게 사용하는 것이 좋다.

안드로이드에서 제공하는 레이아웃의 종류는
ConstraintLayout, LinearLayout, RelativeLayout, FrameLayout, TableLayout, Grid View, List View, Scroll View 등이 있다.

Linear Layout

박스(Box) 모델
여러 View 위젯들을 가로 또는 세로 방향으로 나열할 때 사용
RelativeLayout과 함께 가장 많이 사용하는 레이아웃
orientation 속성을 지정하여 위젯을 위에서 아래 방향으로 배치하거나, 왼쪽에서 오른쪽 방향으로 배치 (vertical:수직/horizontal:수평)
자식들이 중첩(overrap)되지 않고, 지정한 방향으로 쌓이는(stacked) 형태로 표시됨.
각 View 위젯들이 차지하는 영역을 dp 등의 고정 치수 단위 뿐만 아니라, 전체 영역 대비 비율의 개념으로 지정할 수 있는 Weight(가중치) 설정 기능을 제공한다.
weightSum 속성을 통해 레이아웃 내 위젯들의 가중치 예시.
ex) 만약 레이아웃 내에 버튼이 두 개 있고 weightSum이 3이다. 버튼1의 layout_weight는 2이고 버튼2의 layout_weight는 1이라 했을때, 버튼 1의 크기가 버튼 2의 크기보다 두배 크게 표시된다. (width인지 height인지는 레이아웃의 orientation에 따라 다름)
이 경우, 위젯의 layout_height="0dp" 가 되어야 한다. height가 weight에 의해 정해지기 때문!
horizontal인 경우에도 비슷한 형식으로 적용된다. 대신 layout_width="0dp"가 되야 한다.

Relative Layout

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

Frame Layout

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

Table Layout

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

Constraint Layout

뷰 위젯의 위치와 크기를 유연하게 조절할 수 있게 만들어주는 레이아웃.
Relative Layout의 "상대적 위치 관계에 따른 배치" 특성에 LinearLayout의 "가중치(weight)가 가진 장점"을 적용하고, 체인(chain) 사용으로 다른 레이아웃 없이 "요소들을 그룹화"가 가능함.
연결선(chain)을 통해 그 안에 추가된 뷰들의 위치를 결정한다.
연결선은 뷰의 상, 하, 좌, 우에 있는 연결점을 다른 레이아웃이나 위젯의 상, 하, 좌, 우와 연결하여 만들 수 있음.
만약, 뷰(View)의 위치를 결정 할 수 있을 만큼의 연결선이 없으면 해당 뷰는 위치 할 수 없게 됨.
다음과 같은 제약 사항을 설정할 수 있음

- 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 : 제약 카테고리에 대한 최적화