[Android] 안드로이드 레이아웃 둘러보기

안녕하세요.

 

이번시간에는 자주 사용되는 레이아웃에 대해 알아보겠습니다.

 

안드로이드의 View(보여주는 화면)를 작성하는 코드는 xml 입니다.

 

레아이웃은 xml에 작성합니다.

 

레이아웃 종류에 따라 컴포넌트 배치되는 위치가 다르므로

 

원하는 위치에 배치하려면 알맞는 레이아웃을 이용하면 편리하게 사용가능합니다.

 

 

 

 

가장 많이 사용되는 레이아웃 세가지에 대해 배워보겠습니다.

 

 

 

 

 

 

1. LinearLayout (가장많이 사용)

 

리니어 레이아웃이란 위젯들을 직선으로 정렬하는 레이아웃입니다.

 

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

    <LinearLayout
        android:id="@+id/FirstLinear"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal">

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="30dp"
            android:text="좌측"/>

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="30dp"
            android:text="가운데"/>

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="30dp"
            android:text="우측"/>

    </LinearLayout>

    <Button
        android:id="@+id/SecondButton"
        android:text="버튼"
        android:layout_width="match_parent"
        android:layout_height="50dp" />

</LinearLayout>

간단하게 표현하면

 

HTML 언어를 사용해보셨으면 XML에 대해 금방 이해가 되실거라 생각합니다.

 

ALL 레이아웃은 orientation = vertical 세로방향이므로

 

ALL 하위 컴포넌트들은 세로로 배열이 됩니다.(FirstLinear, SecondButton)

 

FirstLinear 라는 Layout도 LinearLayout 입니다.

 

LinearLayout orientation = horizontal 이므로 가로방향으로 TextView 들이 나열될 것입니다.

 

결과화면입니다.

 

 

 

 

 

 

2. FrameLayout

 

프레임 레이아웃은 위젯들을 겹쳐 놓을 수 있는 레이아웃입니다.

 

예를들면 이미지 뷰 위에 버튼 들을 넣고 싶을 때 사용해야 하는 레이아웃입니다.

 

특정 사용자가 원하는 View를 필요로 할 때 사용됩니다.

 

 

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

    <FrameLayout
        android:id="@+id/FirstFrame"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/background" />
        <TextView
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="그림 추천을 원하시면 버튼을 눌러주세요"/>

       <Button
           android:layout_gravity="bottom|center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="추천"/>

    </FrameLayout>

    <Button
        android:id="@+id/SecondButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="버튼"/>

</LinearLayout>

 

 

 

FrameLayout 안에 ImageView TextVIew Button 이 들어가 있으며 이 세 컴포넌트는 겹쳐져 보여지게됩니다.

 

 

 

 

 

3. TableLayout

 

표형식으로 레이아웃을 만들어줌

 

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

    <TableRow
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#ffff00"
            android:text="[0][0]" />

        <TextView
            android:gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#ffff99"
            android:text="[0][1]" />

        <TextView
            android:gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#fff0ff"
            android:text="[0][2]" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#ff00ff"
            android:gravity="center"
            android:text="[1][0]" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#ff0055"
            android:gravity="center"
            android:text="[1][1]" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#0fff00"
            android:gravity="center"
            android:text="[1][2]" />
    </TableRow>

    <TableRow
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#0000ff"
            android:text="[2][0]" />

        <TextView
            android:gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#f05f0f"
            android:text="[2][1]" />

        <TextView
            android:gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#00ff8f"
            android:text="[2][2]" />
    </TableRow>

</TableLayout>

<TableLayout>

<TableRow>    //열 추가

</TableRow>

</TableLayout>

 

간단히 이해 되실거라 생각합니다.

 

 

 

프로젝트 생성후 Java 파일 수성할 필요 없습니다.

 

xml에 activity_main.xml 에 xml소스만 넣으시고 돌리시면 됩니다.

 

감사합니다.

 

 

 

잘못된 점 지적은 환영하며

 

궁금하신 점은 댓글 남겨주시면 답변드리겠습니다.