안드로이드 액티비티의 화면 구성하기-레이아웃(layout)

●안드로이드 어플리케이션의 화면을 구성하는 뷰는 위젯(Widget)과 레이아웃(Layout)으로 나뉜다.

위젯에는 텍스트를 표시하는 TextView, 그림을 표시하는 ImageView, Button, CheckBox, RadioButton, EditText 가 있다.

위젯은 사용자의 입력을 받거나 화면에 데이터를 표시한다.

레이아웃은 위젯들을 화면에 어떻게 배치할지 결정하는 컨테이너 역할을 한다.

레이아웃은 뷰를 상속받은 위젯을 포함할 수 있기 때문에 뷰그룹(ViewGroup)이라고도 한다.



●일반적으로 윈도우 응용 어플리케이션의 경우 레이아웃을 작성할 때는 구성요소를 마우스로 끌어 드로그앤 드롭으로 원하는 좌표에 놓는 방식으로 화면을 구성하는데, 안드로이드는 주로 상대적인 위치를 지정하여 레이아웃을 지정한다.




●LinearLayout
- 가장 기본적인 레이아웃으로 수직,수평방향으로 배치한다. orientation속성으로 레이아웃 내 뷰들의 배치방향을 결정하고 vertical은 수직, horizontal은 수평으로 배치한다.

ex)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
</LinearLayout>



●RelativeLayout
- 레이아웃 뷰들 간의 위치 관계를 부여하고 이 관계에 따라 화면을 구성한다. Linearlayout에 비해 뷰의 위치를 좀더 세밀하게 조정할 수 있기 때문에 복잡한 화면을 구성할 때 주로 사용한다.

- 레이아웃내 뷰들간의 관계를 지정하는 속성

android:layout_adove="@+id/대상뷰이름"	id로 지정한 뷰 바로 위에 위치시킴
android:layout_below="@+id/대상뷰이름"	id로 지정한 뷰 바로 밑에 위치시킴
android:layout_toLeftOf="@+id/대상뷰이름"	id로 지정한 뷰 바로 왼쪽에 위치시킴
android:layout_toRightOf="@+id/대상뷰이름"	id로 지정한 뷰 바로 오른쪽에 위치시킴
android:layout_alignRight="@+id/대상뷰이름"	id로 지정한 뷰 오른쪽 끝선에 지정할 뷰 오른쪽 끝선을 맞춤
android:layout_alignLeft="@+id/대상뷰이름"	id로 지정한 뷰 왼쪽 끝선에 지정할 뷰 욎쪽 끝선을 맞춤
android:layout_alignTop="@+id/대상뷰이름"	id로 지정한 뷰 위쪽 끝선에 지정할 뷰 위쪽 끝선을 맞춤
android:layout_alignBottom="@+id/대상뷰이름"	id로 지정한 뷰 아래쪽 끝선에 지정할 뷰 아래쪽 끝선을 맞춤

- 레이아웃과 뷰 간의 관계를 지정하는 속성

android:layout_alignParentRight="true"	뷰의 오른쪽 끝선을 레이아웃의 오른쪽 끝과 일치시킴
android:layout_alignParentLeft="true"	뷰의 왼쪽 끝선을 레이아웃의 왼쪽 끝과 일치시킴
android:layout_alignParentTop="true"	뷰의 위쪽 끝선을 레이아웃의 위쪽 끝과 일치시킴
android:layout_alignParentBottom="true"	뷰의 아래쪽 끝선을 레이아웃의 아래쪽 끝과 일치시킴

●FrameLayout
- 모든 뷰들을 왼쪽 상단을 기준으로 겹쳐서 배치한다.
ex)
<?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" >
   <FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
        <TimePicker
            android:id="@+id/timePicker1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </FrameLayout>
</LinearLayout>

●TableLayout
- 표형태의 레이아웃을 제공한다. 다이얼버튼 등 일정한 선에 맞추어 정렬되어야 하는 뷰를 표시할 때 주로 사용한다. 행구분은 TAbleRow태그로 구분하고 각열의 너비는 열안에 포함된 뷰의 너비에 따라 결정된다.
ex)
<?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" >  
    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <EditText
                android:id="@+id/editText1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
                <requestFocus />
            </EditText>
            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <ProgressBar
                android:id="@+id/progressBar1"
                style="?android:attr/progressBarStyleLarge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <CheckBox
                android:id="@+id/checkBox1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="CheckBox" />
         </TableRow>
    </TableLayout>
</LinearLayout>

●ScrollView
- 뷰들이 한 화면에 표시되기 어려울 만큼 공간을 많이 차지한다면 스크롤바가 생겨 한 화면에 표시되지 않는 뷰를 보여준다. ScrollView는 하나의 뷰만을 포함할 수 있기 때문에 ScrollView에 표시할 뷰들은 LinearLayout나 RelativeLayout 등의 레이아웃에 넣어주고, 이 하나의 레이아웃을 ScrollView에 넣어준다.
ex)
<?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" >
    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
       <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:inputType="textPostalAddress" />
            <EditText
                android:id="@+id/editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:inputType="textMultiLine" 
             <requestFocus />
            </EditText>
     </LinearLayout>
  </ScrollView>
</LinearLayout>