Android의 LinearLayout 정리

LinearLayout은 모든 자식들이 일렬로 정렬되는 뷰그룹이다. 정렬되는 방향은 수평 혹은 수직이 될 수 있다.. 

orientation 속성으로 레이아웃의 방향을 수평 혹은 수직으로 지정해줄 수 있다.

LinearLayout의 모든 자식들은 레이아웃의 방향에 따라 한줄 혹은 한열로 정렬된다.

orientation 속성이 vertical인 경우에는 하나의 줄에 하나의 자식만 올 수 있다. LinearLayout 자식간의 간격은 layout_margin 속성으로 지정가능하다. 여기에서는 layout_marginBottom의 값 20dp 만큼 첫번째 버튼과 두번째 버튼간의 간격이 벌어졌다. 

LinearLayout 자식의 layout_gravity값으로 center값을 주게 되면 수평방향으로 가운데 정렬된다.

첫번째 버튼만 layout_weight 속성값으로 1을 갖고 있다. 나머지 버튼들의 높이는 문자열 크기로 결정되고 첫번째 버튼이 나머지 영역만큼 높이를 갖게된다. 이 경우 첫번째 버튼의 layout_height 속성은 0dp로 지정해줘야 한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.webnautes.test.MainActivity"
    android:background="#fef104"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:layout_gravity="center"
        android:layout_weight="1" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2"
        android:layout_gravity="center" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button3"
        android:layout_gravity="center" />
 
</LinearLayout>
 

orientation 속성이 horizontal인 경우에는 하나의 줄에 자식들이 일렬로 정렬된다. . LinearLayout 자식간의 간격은 layout_margin 속성으로 지정가능하다. 여기에서는 layout_marginRight의 값 20dp 만큼 첫번째 버튼과 두번째 버튼간의 간격이 벌어졌다. 

LinearLayout 자식의 layout_gravity값으로 center값을 주게 되면 수직방향으로 가운데 정렬된다.

첫번째 버튼만 layout_weight 속성값으로 1을 갖고 있다. 나머지 버튼들의 너비는 문자열 크기로 결정되고 첫번째 버튼이 나머지 영역만큼 너비를 갖게된다. 이 경우 첫번째 버튼의 layout_width 속성은 0dp로 지정해줘야 한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.webnautes.test.MainActivity"
    android:background="#fef104"
    android:orientation="horizontal"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">
 
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        android:id="@+id/button"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:layout_gravity="center"
        android:layout_weight="1" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:id="@+id/button2"
        android:layout_gravity="center" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:id="@+id/button3"
        android:layout_gravity="center" />
 
</LinearLayout>
 

4개의 버튼에 layout_weight 속성값을 각각 1, 1, 1, 3을 주었다.  버튼들에 부여된 layout_weight값의 합은  6이다.

layout_weight값이 1인 버튼들은  전체 공간 중 1/6 만큼의 높이를 가지게 되며, layout_weight의 값이 3인 버튼은 전체 공간 중 3/6만큼의 높이를 가지게 된다.  이 때 각각의 버튼의  layout_height 속성값을 0dp로 해주어야 한다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.webnautes.test.MainActivity"
    android:background="#fef104"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="1"
        android:id="@+id/button"
        android:layout_gravity="center"
        android:layout_weight="1" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="2"
        android:id="@+id/button2"
        android:layout_gravity="center"
        android:layout_weight="1" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="3"
        android:id="@+id/button3"
        android:layout_gravity="center"
        android:layout_weight="1" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="4"
        android:id="@+id/button4"
        android:layout_gravity="center"
        android:layout_weight="3" />
 
</LinearLayout>
 

뷰의 layout_width와 layout_height 속성값으로 match_parent를 주게 되면 부모뷰의 영역을 꽉채우게 된다. 그런데 자식뷰인 파란색 영역을 차지하고 있는 LinearLayout의 layout_width와 layout_height 속성값으로 match_parent를 주었는데도 불구하고 부모뷰인 빨간색 영역이 보인다. 

왜냐하면 부모뷰인 LinearLayout에서 paddingBottom, paddingLeft, paddingRight, paddingTop에 전부 16dp 값으로 주었기 때문이다. 그 결과 자식 LinearLayout(파란색 영역)은 16dp만큼 여백을 두고 나머지 공간을 차지하고 있다.   

파란색 영역 LinearLayout의 자식인 버튼의 경우에도  layout_width와 layout_height 속성값으로 match_parent를 주었는데 부모뷰인 파란색 영역이 보인다. 

이 경우에는 버튼의 layout_marginLeft, layout_marginTop, layout_marginRight, layout_marginBottom 속성값으로 20dp를 주었기 때문이다. 그 결과 여백 20dp만큼 부모뷰와 버튼 사이에 여백이 생겼다. 위 경우와 달리 자식의 외곽으로부터 일정거리 여백을 준것이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.webnautes.test.MainActivity"
    android:background="#ff0000"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">
 
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0000FF">
 
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="New Button"
            android:id="@+id/button"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="20dp" />
    </LinearLayout>
 
</LinearLayout>
 

버튼의 layout_width와 layout_height 속성값을 wrap_content로 주게 되면, 버튼의 text 속성에 적힌 문자열의 크기만큼으로 버튼의 크기가 조정된다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.webnautes.test.MainActivity"
    android:background="#ff0000"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp">
 
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0000FF">
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="20dp" />
    </LinearLayout>
 
</LinearLayout>