레이아웃
: ViewGroup의 파생 클래스. 포함 된 View를 정렬하는 기능
1. Linear Layout : 컨테이너에 포함 된(자식) 뷰들을 수평 또는 수직으로 일렬 배치하는 레이아웃
- 가장 단순하고 직관적, 사용 빈도가 높음
- LinearLayout의 자식으로 배치되는 View 위젯들은 한 방향(가로 또는 세로)로만 배치
- 위젯의 크기(높이 또는 너비)와 관계없이 한 줄로만 배열
- LinearLayout의 자식들은 중첩되지 않고, 지정한 방향으로 쌓이는 형태로 표시됨
- LayoutWeight : 자식들이 배치될 때, 전체 영역 대비 비율의 개념으로 지정할 수 있는 가중치(weight)를 설정
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...>
<LinearLayout
...
android:layout_weight="1" //여기[1]와
android:orientation="vertical"
...>
<Button ...
android:text="Button 1"/> />
<Button
...
android:text="Button 2" />
<Button
...
android:layout_weight="1" //얘가 나머지를 꽉 채우는 것
android:text="Button 3"
/>
</LinearLayout>
<LinearLayout
...
android:layout_weight="1" //여기[1] 때문에 1:1이 됨
android:orientation="horizontal"
...>
<Button
...
android:text="Button 4"/>
<Button
...
android:text="Button 5"/>
<Button
...
android:text="Button 6"/> //weight에 대한 속성을 주지 않아 동일한 사이즈
</LinearLayout>
</LinearLayout>
*주요 속성
1) orientation : vertical(차일드를 위에서 아래로 수직으로 배열) / horizontal(차일드를 왼쪽에서 오른쪽으로 수평배열)
2. Relative Layout : 뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정해 배치하는 레이아웃
- 자식 view 위젯들이 서로간의 상대적 배치 관계에 따라 화면에 표시될 위치가 결정되도록 만들어주는 Layout 클래스
//ex. B를 A의 오른쪽에 배치 : B toRight Of A, D를 C의 아래쪽에 배치 : D below C
- 부모 자체가 상대적 위치의 기준점으로 사용될 수도 있음
// ex. A를 RelativeLayout의 왼쪽에 정렬 : alignParentLeft, B를 RelativeLayout의 가운데 정렬 : centerInParent
- 자식들에 상대적인 배치 기준을 지정하지 않은 경우, RelativeLayout 내부에서 중첩되어 표시됨
* 주요 속성
1) 위젯끼리의 관계를 지정하는 속성 (anchor view의 id를 지정)
속성 | 설명 |
layout_alignBaseline | anchor view와 baseline을 맞춤 |
layout_alignBottom / _alignTop | anchor view와 아래쪽 / 위쪽 가장자리를 맞춤 |
layout_alignLeft / _alignRight | anchor view와 왼쪽 / 오른쪽 가장자리를 맞춤 |
layout_Above / _Below | anchor view의 위쪽 / 아래쪽에 배치 |
layout_toLeft / _toRight | anchor view의 왼쪽 / 오른쪽에 배치 |
2) Parent와의 관계를 지정하는 속성
속성 | 설명 |
layout_centerHorizontal | 수평 방향으로 컨테이너의 가운데 배치 |
layout_centerVertical | 수직 방향으로 컨테이너의 가운데 배치 |
layout_centerInParent | ?? |
layout_alignParentLeft / Right | 컨테이너와 왼쪽 / 오른쪽 가장자리를 맞춤 |
layout_alignParentBottom / Top | 컨테이너와 아래쪽 / 위쪽 가장자리를 맞춤 |
<RelativeLayout ...>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:id="@+id/button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/button1" //1번의 왼쪽으로
android:text="Button 2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button1" //1번의 아래로
android:layout_alignParentRight="true"
android:text="Button 3"/>
</RelativeLayout>
3. Table Layout : 표 형식으로 차일드를 배치하는 레이아웃
- 자식 View 위젯들을 테이블(행과 열)로 나누어 표시하는 Layout 클래스
- 표를 구성하는 행의 개수만큼 TableRow를 포함하고 TableRow는 각 행에 포함된 셀(view)를 포함함
*주요 속성
- stretchColumns : 늘릴 열을 지정 (인덱스는 0부터 시작됨)
1) "*" : 모든 열을 늘여서 배치
2) "1, 2" : 1열(왼쪽에서 2번째)과 2열(왼쪽에서 3번째)을 늘여서 배치
- TableRow -> 정해진 규칙에 따라 크기가 결정되므로, layout_width / height를 지정할 필요 없음
// layout_height 는 항상 wrap_content, layout_width 는 항상 match_parent
<TableLayout
...
android:stretchColumns="0"
...>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 5"/>
</TableRow>
<TableRow
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 6"/>
</TableRow>
</TableLayout>
4. Frame Layout : 컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃
- 하나의 자식 view 위젯만 표시할 때 사용하는 Layout 클래스 (ex. 영상 띄우기 등)
- FrameLayout에 자식으로 여러 View 위젯을 추가하면 겹쳐진 형태로 표시되고,
가장 최근에 추가된 View 위젯이 가장 위에 표시됨
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff0000">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="button 7"/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="button 8"/>
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="button 9"/>
</FrameLayout>
5. Constraint Layout : 제약 조건을 사용해 화면을 구성하는 방법
- 복잡한 레이아웃을 단순한 계층구조를 이용해 표현할 수 있는 ViewGroup임
- 형제 view들과의 관계를 정의해 레이아웃을 구성한다는 점에서 RelativeLayout과 유사
- but 더 유연하고 다양한 기능을 제공
(+) 자식 뷰간의 상호 관계 정의 가능 (RelativeLayout에선 불가능 -ex. 두 view를 위아래로 붙여 컨테이너 중앙에)
(+) LinearLayout을 써야 했던 뷰 비율 조절도 가능
(+) 뷰 계층을 간단히 할 수 있어 유지보수, 성능에서 장점
1) 위젯의 크기 설정
(1) 리사이즈 핸들 이용해 설정
- 위젯 클릭 시 네 꼭짓점에 사각형의 핸들이 생김, 마우스로 드래그해 크기 설정
- 드래그해서 크기 조절 시 우측 속성창의 Layout_width, Layout_height의 박스를 입력해 설정 가능
(2) 직접 값을 입력해 설정
- 위젯 클릭 수 우측 속성창에서 layout_width, layout_height를 입력해 크기 설정 가능
- 수치 외에 wrap_content, match_parent도 사용 가능
2) 위젯의 상대적인 정렬
- 사이드핸들(위젯의 각 변의 가운데)을 이용해 위젯이 다른 위젯 또는 화면의 경계에 대해 어떻게 정렬될지 지정 가능
- 좌우의 핸들 : 가로축에 있는 위젯들 간의 정렬 설정, 상하의 핸들 : 세로축 간의 정렬을 설정
- 좌우 핸들을 상하 핸들에 연결할 수는 없음
- 위젯, 화면의 각 경계, 임의로 추가된 수직, 수평의 가이드 라인과의 정렬 설정 가능
- 드래그, 우측 속성창의 수치 등을 통해 설정 가능
3) 위젯 내에 포함되어 있는 텍스트의 위치로 정렬기준 설정하기
- 베이스라인 핸들
: 위젯에 마우스를 가져가면 좌측 하단에 나타나는 ab 아이콘 클릭
-> 위젯의 택스트 하단에 배이스 라인 핸들이 보임
-> 베이스라인 핸들을 클릭해 다른 위젯의 텍스트에 연결 -> 연결된 위젯은 텍스트의 하단이 일치되도록 정렬됨
4) constraint 툴바 사용하기
(1) Autoconnect (말굽자석) : 켜두면 위젯을 배치할 때 자동으로 이웃한 위젯과 관계를 맺어줌
(2) Clear All Constraints (연결 x 모양) : 모든 관계를 삭제함
(3) Infer constraints (마법지팡이 모양) : 레이아웃 내 배치된 모든 위젯을 현재 위치를 기반으로 관계 맺어줌
(4) Default Margins (8) : 위젯 값의 기본 마진 값을 지정
(5) Guidelines (보조선) : 수평, 수직 가이드라인을 만들 수 있고, 위젯을 이 가이드라인을 기준으로 정렬 가능
5) 속성창
(1) Margin (벽과 사각형 사이) : layout_width 가 match_constraint이면 여백으로 설정한 값 제외 전체를 위젯이 차지
(2) Aspect Ratio (사각형 좌측 상단) : 클릭 시 위젯의 가로, 세로 비율을 지정할 수 있음
(3) Wrap Content (>>>) : 부등호 3개로 된 모양은 wrap_content로 지정된 것
(4) Any size (ww) : 톱니모양은 최대한의 너비를 차지하게 되고, match_constraint로 지정되어 있음
(5) 점선 (...) : 아직 관계가 없음
(6) Horizontal Bias (하단의 선과 원 속 숫자) : 위젯의 좌우측 위치 비율을 지정, 드래그해서 변경 가능
'Android Studio' 카테고리의 다른 글
[Android 앱개발 입문] 액티비티 (# 추가하기) (0) | 2024.03.20 |
---|---|
[Android Studio] Margin, Padding, Gravity, 스타일 및 테마 (# 추가하기) (0) | 2024.03.19 |
[Android 앱개발 입문] 위젯 (# 추가하기) (0) | 2024.03.18 |
[Android 앱개발 입문] 안드로이드 UI 기본 (@ 추가하기) (0) | 2024.03.18 |
[Android 앱개발 입문] 프로젝트 실습 (# 추가하기) (0) | 2024.03.18 |