Android LinearLayout, RealativeLayout 관련 설명 및 예제

날짜:


1. LinearLayout

가장 기본적으로 많이 사용하는 레이아웃.
레이아웃을 수평 수직으로 배치해줍니다.

아래의 소스의 밑줄친 소스를 보시면 orientation 속성을 통해 vertical 세로배치와  horizontal 가로배치로 해줄수 있다.
추가로 기초적인 속성을 살펴보면
layout_width, layout_height 속성값에는 꽉채워주는 "fill_parent", 필요한 만큰의 공간 차지 "wrap_content", 직접값을 "120px" 처럼 값을 지정해줄수 있다.

추가로 html 처럼 padding이라는 속성이 있어 자유롭게 레이아웃을 꾸며줄수 도 있다.

다음 예제는 linearlayout으로 가로배치와 세로배치를 살펴볼수 있다.
그리고 패딩값을 줌으로써 다음 LinearLayout에서 그 공간을 제외하고서 안에 bagroundColor가 채워진것을 보고서 fill_parent, wrap_content 를 살펴보면 된다.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:orientation="vertical"
  4.    android:layout_width="fill_parent"
  5.    android:layout_height="fill_parent"
  6.    android:background="#ffffff"
  7.    android:paddingLeft = "20px"
  8.    android:paddingTop = "20px"
  9.    android:paddingRight = "20px"
  10.    android:paddingBottom = "20px"
  11.    >
  12.         <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  13.             android:orientation="vertical"   =========>세로배치
  14.             android:layout_width="fill_parent"
  15.             android:layout_height="wrap_content"
  16.             android:background="#ff0000"
  17.             >
  18.             <TextView
  19.                 android:layout_width="wrap_content"
  20.                         android:layout_height="wrap_content"
  21.                         android:text="vertical"
  22.                 />
  23.                 <Button
  24.                         android:text="버튼"
  25.                         android:layout_width="wrap_content"
  26.                         android:layout_height="wrap_content"
  27.                 />
  28.                 <EditText
  29.                         android:text="EditText"
  30.                         android:layout_width="wrap_content"
  31.                         android:layout_height="wrap_content"
  32.                 />             
  33.     </LinearLayout>
  34.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  35.             android:orientation="horizontal"   ========>가로배치
  36.             android:layout_width="fill_parent"
  37.             android:layout_height="wrap_content"
  38.             android:background="#0000ff"
  39.    >
  40.         <TextView
  41.                 android:layout_width="wrap_content"
  42.                         android:layout_height="wrap_content"
  43.                         android:text="horizontal"
  44.                 />
  45.                 <Button
  46.                         android:text="버튼"
  47.                         android:layout_width="wrap_content"
  48.                         android:layout_height="wrap_content"
  49.                 />
  50.                 <EditText
  51.                         android:text="EditText"
  52.                         android:layout_width="wrap_content"
  53.                         android:layout_height="wrap_content"
  54.                 />
  55.     </LinearLayout>
  56. </LinearLayout>



2. RealativeLayout
레이아웃내의 요소들끼리 위치관계를 부여하고, 그 관계에 따라 화면을 구성.
속성값을 살펴보면..


 속성 설명
 layout_above ~의 위에 배치한다.
 layout_below ~의 아래에 배치한다.
 layout_toLeftOf ~의 왼쪽에 배치한다.
 layout_toRightOf ~의 오른쪽에 배치한다.
 layout_alignLeft ~와 왼쪽 변을 맞춘다.
 layout_alignTop ~와 위쪽 변을 맞춘다.
 layout_alignRight ~와 오른쪽 변을 맞춘다.
 layout_alignBottom ~와 아래쪽 변을 맞춘다.
 layout_alignParentLeft true이면 부모와 왼쪽 변을 맞춘다.
 layout_alignParentTop true이면 부모와 위쪽 변을 맞춘다.
 layout_alignParentRight true이면 부모와 오른쪽 변을 맞춘다.
 layout_alignParentBottom true이면 부모와 아래쪽 변을 맞춘다.
 layout_alignBaseline ~와 베이스라인을 맞춘다.
 layout_alignWithParentIfMissing layout_toLeftOf 등의 속성에 대해 앵커가 발견되지 않으면 부모를 앵커로 사용한다.
 layout_centerHorizontal true이면 부모의 수평 중앙에 배치한다.
 layout_centerVertical true이면 부모의 수직 중앙에 배치한다.
 layout_centerInParent true이면 부모의 수평, 수직 중앙에

다음 예제의 맨 밑줄에 속성들을 자세히 살펴보면 다음 RelativeLayout이 쓰이는 용도를 알 수 있다.


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.  xmlns:android="http://schemas.android.com/apk/res/android"
  4.  android:layout_width="fill_parent"
  5.  android:layout_height="wrap_content"
  6.  android:background="#ffffff"
  7.  android:padding="5px"
  8.  >
  9.   <ImageView
  10.         android:id="@+id/picture"
  11.         android:layout_width="wrap_content"
  12.         android:layout_height="wrap_content"
  13.         android:layout_alignParentLeft="true"
  14.         android:layout_marginRight="5px"
  15.         android:src="@drawable/picman"
  16.  />
  17.   <Button
  18.         android:id="@+id/btndel"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:text="Del"
  22.         android:textSize="6pt"
  23.         android:layout_below="@id/picture"
  24.  />
  25.   <TextView
  26.         android:id="@+id/name"
  27.         android:layout_width="wrap_content"
  28.         android:layout_height="wrap_content"
  29.         android:text="최찬호"
  30.         android:textColor="#000000"
  31.         android:textSize="12pt"
  32.         android:layout_alignParentTop="true"
  33.         android:layout_toRightOf="@id/picture"
  34.  />
  35.   <TextView
  36.         android:id="@+id/call"
  37.         android:layout_width="wrap_content"
  38.         android:layout_height="wrap_content"
  39.         android:text="010-3456-8146"
  40.         android:textColor="#0000ff"
  41.         android:textSize="6pt"
  42.         android:layout_alignParentRight="true"
  43.         android:layout_alignBaseline="@id/name"
  44.  />
  45.     <TextView
  46.         android:id="@+id/description"
  47.         android:layout_width="wrap_content"
  48.         android:layout_height="wrap_content"
  49.         android:text="이것저것 쓰면서 아무거나 에헤라디야 안녕하세요 저는 최찬호입니다. 친해지고 싶네요..ㅋㅋ 야호야호 써지나 한번 볼까"
  50.         android:textColor="#000000"
  51.         android:textSize="6pt"
  52.         android:layout_below="@id/name"
  53.         android:layout_alignLeft="@id/name"
  54.  />
  55. </RelativeLayout>

    3. TableLayout
    말그대로 표 형태의 레이아웃을 정리해준다.
    행의 구분은 TableRow로 구분해 준다.
  56. <?xml version="1.0" encoding="utf-8"?>
  57.        
  58. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  59.         android:orientation="vertical"
  60.         android:layout_width="fill_parent"
  61.         android:layout_height="fill_parent"
  62. >
  63.         <TableRow
  64.                 android:layout_weight = "1"
  65.         >
  66.                 <EditText
  67.                         android:id = "@+id/resultText"
  68.                         android:layout_width="fill_parent"
  69.                         android:layout_height="fill_parent"
  70.                         android:layout_weight = "1"
  71.                         android:text=""
  72.                         android:gravity="center_vertical|right"
  73.                         android:background="#ffffff"
  74.                 />
  75.         </TableRow>
  76.         <TableRow
  77.                 android:layout_weight = "1"
  78.                 android:background="#ff0000"
  79.         >
  80.                 <Button
  81.                         android:id="@+id/num7"
  82.                         android:layout_width="fill_parent"
  83.                         android:layout_height="fill_parent"
  84.                         android:text="7"
  85.                         android:layout_weight = "1"
  86.                        
  87.                 />
  88.                 <Button
  89.                         android:id="@+id/num8"
  90.                         android:layout_width="fill_parent"
  91.                         android:layout_height="fill_parent"
  92.                         android:text="8"
  93.                         android:layout_weight = "1"
  94.                 />
  95.                 <Button
  96.                         android:id="@+id/num9"
  97.                         android:layout_width="fill_parent"
  98.                         android:layout_height="fill_parent"
  99.                         android:text="9"
  100.                         android:layout_weight = "1"
  101.                 />
  102.                 <Button
  103.                         android:id="@+id/divide"
  104.                         android:layout_width="fill_parent"
  105.                         android:layout_height="fill_parent"
  106.                         android:text="/"
  107.                         android:layout_weight = "1"
  108.                 />
  109.         </TableRow>
  110.         <TableRow
  111.                 android:layout_weight = "1"
  112.                 android:background="#00ff00"
  113.         >
  114.                 <Button
  115.                         android:id="@+id/num4"
  116.                         android:layout_width="fill_parent"
  117.                         android:layout_height="fill_parent"
  118.                         android:text="4"
  119.                         android:layout_weight = "1"
  120.                 />
  121.                 <Button
  122.                         android:id="@+id/num5"
  123.                         android:layout_width="fill_parent"
  124.                         android:layout_height="fill_parent"
  125.                         android:text="5"
  126.                         android:layout_weight = "1"
  127.                 />
  128.                 <Button
  129.                         android:id="@+id/num6"
  130.                         android:layout_width="fill_parent"
  131.                         android:layout_height="fill_parent"
  132.                         android:text="6"
  133.                         android:layout_weight = "1"
  134.                 />
  135.                 <Button
  136.                         android:id="@+id/multi"
  137.                         android:layout_width="fill_parent"
  138.                         android:layout_height="fill_parent"
  139.                         android:text="*"
  140.                         android:layout_weight = "1"
  141.                 />
  142.         </TableRow>
  143.         <TableRow
  144.                 android:layout_weight = "1"
  145.                 android:background="#0000ff"
  146.         >
  147.                 <Button
  148.                         android:id="@+id/num1"
  149.                         android:layout_width="fill_parent"
  150.                         android:layout_height="fill_parent"
  151.                         android:text="1"
  152.                         android:layout_weight = "1"
  153.                 />
  154.                 <Button
  155.                         android:id="@+id/num2"
  156.                         android:layout_width="fill_parent"
  157.                         android:layout_height="fill_parent"
  158.                         android:text="2"
  159.                         android:layout_weight = "1"
  160.                 />
  161.                 <Button
  162.                         android:id="@+id/num3"
  163.                         android:layout_width="fill_parent"
  164.                         android:layout_height="fill_parent"
  165.                         android:text="3"
  166.                         android:layout_weight = "1"
  167.                 />
  168.                 <Button
  169.                         android:id="@+id/minus"
  170.                         android:layout_width="fill_parent"
  171.                         android:layout_height="fill_parent"
  172.                         android:text="-"
  173.                         android:layout_weight = "1"
  174.                 />
  175.         </TableRow>
  176.         <TableRow
  177.                 android:layout_weight = "1"
  178.                 android:background="#666666"
  179.         >
  180.                 <Button
  181.                         android:id="@+id/clear"
  182.                         android:layout_width="fill_parent"
  183.                         android:layout_height="fill_parent"
  184.                         android:text="c"
  185.                         android:layout_weight = "1"
  186.                 />
  187.                 <Button
  188.                         android:id="@+id/num0"
  189.                         android:layout_width="fill_parent"
  190.                         android:layout_height="fill_parent"
  191.                         android:text="0"
  192.                         android:layout_weight = "1"
  193.                 />
  194.                 <Button
  195.                         android:id="@+id/result"
  196.                         android:layout_width="fill_parent"
  197.                         android:layout_height="fill_parent"
  198.                         android:text="="
  199.                         android:layout_weight = "1"
  200.                 />
  201.                 <Button
  202.                         android:id="@+id/plus"
  203.                         android:layout_width="fill_parent"
  204.                         android:layout_height="fill_parent"
  205.                         android:text="+"
  206.                         android:layout_weight = "1"
  207.                 />
  208.         </TableRow>
  209. </TableLayout>