(Layout) LinearLayout

LinearLayout

LinearLayout은 차일드뷰(요소)를 일렬(수직 또는 수평)로 배치하는 방식입니다.

수평 방향은 좌에서 우로 하나씩 배치가 되며 수직 방향은 위에서 아래로 하나씩 배치가 됩니다. 

xml코드안에 adroid:orientation 속성을 horizontal, vertical로 설정합니다. 

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"    //수직 정렬 방식. 수평으로 하기 위해선 vertical을 horizontal로 변경하면 됩니다.
    >

자바코드에서는 setOrientation( LinearLayout.HORIXONTAL | LinearLayout.VERTICAL ) 로 설정합니다.

LinearLayout의 계층도는 다음과 같습니다.

java.lang.Object      └─android.view.View                   └─android.view.ViewGroup                                    └─android.widget.LinearLayout

리니어 레이아웃의 기본 속성

• 채우기 : fill model
  뷰를 부모 뷰의 여유 공간에 어떻게 채울 것인지를 설정합니다.
  match_parent 와 wrap_content를 사용합니다.
• 방향 : orientation
  뷰를 추가하는 방향을 설정합니다.
  vertical와 horizontal을 사용합니다.
• 정렬 방향 : gravity
  뷰의 정렬 방향을 설정합니다.
• 여유 공간 : margin 
  뷰의 여유 공간을 설정합니다.

• 공간가중치 : weight
  뷰가 차지하는 공간의 가중치 값을 설정합니다.
  

리니어 레이아웃 방향 설정하기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" //수직방향으로 옵션을 주어 버튼을 배열.
android:layout_width=“match_parent" android:layout_height=“match_parent" >
<Button
android:id="@+id/button01" 
android:layout_width=“match_parent" android:layout_height="wrap_content" 
android:text="Button01"
/>
<Button
android:id="@+id/button02"
android:layout_width=“match_parent" android:layout_height="wrap_content" 
android:text="Button02"
/>
<Button
android:id="@+id/button03"
android:layout_width=“match_parent" 
android:layout_height="wrap_content" 
android:text="Button03"
/>

레이아웃 정렬 방향 설정하기

정렬 속성	설 명
layout_gravity	부모 컨테이너의 여유 공간에 뷰가 모두 채워 지지 않아 여유 공간 안에서 뷰를 정렬할 때
gravity	뷰에서 화면에 표시하는 내용물을 정렬할 때(텍스트의 경우, 내용물은 글자가 되고 이미지뷰의 경유 내용물은 이미지가 됨 )

layout_gravity 설정 방법

android:layout_gravity를 이용하여 left, right, center 뿐만 아니라 다양한 옵션 값을 줄 수 있습니다.

  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Left"
        android:id="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Center"
        android:id="@+id/textView2"
        android:layout_gravity="center" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Right"
        android:id="@+id/textView3"
        android:layout_gravity="right" />
</LinearLayout>

gravity 설정 방법

내용물의 배치를 나타내는 옵션입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:gravity="center_vertical|center_horizontal"
        android:text="Center"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal|center_vertical" />

</LinearLayout>

주의사항!!

옵션에 |를 이용하여 옵션 추가를 할 수있습니다. 하지만 | 앞뒤로 공백이 있으면 에러가발생하니 공백을 꼭 없애주세요

잠깐!

텍스트 뷰 또는 버튼을 이용해 화면을 구성하다 보면 높이가 맞지 않는 경우를 종종 볼 수 있습니다. 이런 경우에는 단순히 layout_gravity나 gravity속성의 값을 설정하는 것만으로 정렬을 맞추기 힘들 수 있는데 이를 위해 bselineAligned속성을 사용할 수 있습니다.

layout_margin속성

layout_margin속성

부모 컨테이너의 여유 공간과 뷰 사이의 여백을 줄 수 있는 방법

다른 Widget과의 간격으로 layout_margin 또는 layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom을 설정합니다.

padding 속성

뷰 안의 내용물인 텍스트나 이미지와 뷰 안의 영역 사이의 여백을 줄 수 있는 방법입니다.

layout_margin은 padding속성과 달리 위젯 셀의 바깥 부분에 여백을 주는 것으로 부모 컨테이너의 여유 공간에서 위젯 셀이 차지하는 공간과의 간격을 지정할 수 있도록 합니다. 이 두가지 속성 모두 상하좌우 각 면에 대해 여배글 줄 수 있는 방법을 제공하며 layout_margin의 경우에는 각각 layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom 속성을 사용합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff00"
        android:text="텍스트"
        android:textColor="#ffff0000"
        android:textSize="24dp"
        android:padding= "20dp"
        />

    <TextView
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff00ffff"
        android:text="텍스트"
        android:textColor="#ffff0000"
        android:textSize="24dp"
        android:layout_margin= "10dp"
        />
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffff00ff"
        android:text="텍스트"
        android:textColor="#ffff0000"
        android:textSize="24dp"
        android:padding= "20dp"
        />

</LinearLayout>

공간 가중치 설정하기

layout_weight 속성은 LinearLayout에서 Child를 배치하고 남은 여백을 어떻게 배치할 것인가를 설정합니다.

layout_weight가 설정되어 있는 child간 값의 비율로 여백을 분배

 ayout_weight는 여백을 나눠가지는 비율이지 child view간의 상대적 크기가 아닙니다.

버튼 두개를 두었을 경우 여백이 남게 됩니다.

아래와 같이 android:layout_weight을 줘보았습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="KTKO1"
        android:layout_weight="2"
        android:id="@+id/button" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="KTKO2"
        android:layout_weight="1"
        android:id="@+id/button2" />
</LinearLayout>

layout_weight를 2:1로 설정했기 때문에 여백을 2:1로 나누어 가집니다.

이 때 KTKO1과 KTKO2의 크기를 제외한 여백을 2:1로 설정한 것이지 KTKO1과 KTKO2의 크기가 2:1이 된 것은 아닙니다.

아래와 같이 width를 0dp를 주었더니 2:1로 배치가 되었습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
        />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="KTKO1"
        android:layout_weight="2"
        android:id="@+id/button" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="KTKO2"
        android:layout_weight="1"
        android:id="@+id/button2" />
</LinearLayout>