1. LinearLayout
View를 선형으로 배치할 수 있는 레이아웃이며 가장 보편적으로 사용한다.
진행 방향은 Vertical(수직)과 Horizontal로 지정할 수 있다.
2. LinearLayout의 orientation 속성
1) 수평 방향(horizontal)의 배치
아이템을 배치하기 위해서 LinearLayout 측에 방향을 결정하는 orientation 속성을 선언한다.
추가하지 않을 경우 수평(horizontal)이 적용된다.
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="38sp"
android:background="#FF0000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="38sp"
android:background="#00A0A0"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="38sp"
android:background="#A080F0"/>
</LinearLayout>
|
결과
2) 수직 방향(vertical)의 배치
orientation 속성을 vertical로 선언하면 자식 View는 수직방향(상-->하 순서대로)으로 배치된다.
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="38sp"
android:background="#FF0000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="38sp"
android:background="#00A0A0"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
android:textSize="38sp"
android:background="#A080F0"/>
</LinearLayout> |
결과
3. 중첩된 layout
layout 내부에 또다른 layout을 정의할 수 있다.
다음의 그림을 보자.
유저에게 보이는 UI
실제 내부 구성
이 화면의 구성은 다음과 같다.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:background="#20E00000">
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:hint="이름을 입력해주세요."
android:gravity="bottom"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height = "0dp"
android:orientation="horizontal"
android:layout_weight="1">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="여성"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="남성"/>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="가입"/>
</LinearLayout> |
루트 역할을 하는 LinearLayout 내부에 세 개의 자식 View가 있다.
EditText, LinearLayout, Button이다.
그리고 자식인 두 번 째 LinearLayout 또한 두 개의 RadioButton 자식을 가지고 있다.
첫 번째 LinearLayout은 배치 방향이 수직이고,
두 번째 LinearLayout은 배치 방향이 수평인 것을 볼 수 있다.
이는 성별을 선택하는 RadioButton을 수평 방향으로 나란히 놓기 위해서다.
하나의 LinearLayout은 배치 방향을 1개만 선택할 수 있으므로 이러한 중첩 레이아웃 구조가 등장한다.
4. 가중치(Weight)
레이아웃의 자식 View는 가중치 설정을 통해 형제 View 사이에 자신의 위치를 비율적으로 지정할 수 있다.
android:layout_weight="정수/실수" |
View의 형제레이아웃이 없을 경우에는 weight 값이 무엇이는 상관 없이 부모가 남겨준 공간의 100%를 차지한다.
값은 절대 수치가 아니라 상대수치로 표현된다. 그 말은 똑같이 1을 주어도 형제가 얼마나 있냐에 따라 1의 의미가 달라진다는 뜻이다.
예를 들어 <LinearLayout>에 자식이 Button1과 Button2 두 개가 있을 경우
둘 모두에 가중치 1씩을 주면 서로 1:1 비율로 공간을 차지한다. (50%)
하지만 Button이 3개이고 가중치를 1씩 주면 1:1:1 비율로 공간을 차지한다. (33%)
만약 Button이 3개이고 가중치를 각각 1, 4, 5를 주면 1:4:5 가 적용되어 다음과 같이 배정된다.
주의!
만약 형제 View에게 layout_weight이 적용되었다면 나머지 형제 View에게도 layout_weight을 적용해주는 것이 좋다.
상황에 따라 가중치가 설정되지 않은 view는 공간을 배정 받지 못할 수 있기때문이다.
하지만 보통의 경우에는 컨텐츠(내부 내용)의 크기에 따라 배정된다.
orientation이
vertical 이라면 자식들의 layout_height를 0dp로 주고,
horizontal이라면 자식들의 layout_width에 0dp를 주는 것이 안전하다.
