안드로이드 - 8. 레이아웃(layout)

예제 : https://www.inflearn.com/course/

예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Tutorial10_layout

다음은 RelativeLayout을 위한 예제파일입니다.

RelativeLayout은 상대적으로 위치를 지정합니다.

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent">

    <Button

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:text="top"

        />

    <Button

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:text="bottom"

        />

</RelativeLayout>

레이아웃 화면

버튼이 위쪽 가운데와 아래쪽 가운데에 배치된 것을 알 수 있습니다.

다음은  TableLayout을 위한 예제 파일입니다.

HTML의  table과 비슷합니다. 각  행별로 뷰를 지정하게됩니다.

activity_main3.xml

<?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"

    android:stretchColumns="*"

    >

    <TableRow>

        <Button android:text="1" />

        <Button android:text="2" />

        <Button android:text="3" />

    </TableRow>

    <TableRow>

        <Button android:text="4" />

        <Button android:text="5" />

        <Button android:text="6" />

    </TableRow>

    <TableRow>

        <Button android:text="7" />

        <Button android:text="8" android:layout_span="2" />

    </TableRow>

</TableLayout>

레이아웃 화면

아래와 같이 행단위로 표시가 되며 3번째 행은 layout_span옵션에 의해서 2개의 열을 차지하게 되었습니다.

다음은 GridLayout을 위한 예제 파일입니다.

먼저 행렬을 선언해둔 뒤 그다음 각 뷰를 몇 번좌표에 넣을지 결정하는 방식입니다.

activity_main4.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <GridLayout

        android:id="@+id/grid1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        android:columnCount="4"

        android:rowCount="3">

        <Button android:text="1"

            android:layout_row="0"

            android:layout_column="0"

            android:layout_rowSpan="2"

            android:layout_gravity="fill_vertical"

            />

        <Button android:text="2"

            android:layout_column="1"

            android:layout_row="0"

            android:layout_columnSpan="3"

            android:layout_gravity="fill_horizontal"

            />

        <Button

            android:layout_column="2"

            android:layout_row="1"

            android:text="3"

            />

    </GridLayout>

</LinearLayout>

레이아웃 화면

다음과 같이 버튼들이 배치되는데 이때 유의할 점은 1번 버튼은 2개의 행을 차지하게 되는데 만약

2번째 행에 아무내용도 없다면 1번과 2번은 나란히 배치되게 됩니다.

2번째 행이 없어서 1번과 2번이 나란히 배치되었습니다. 그래서 3번 버튼이 있어야 됩니다.

다음은 FrameLayout을 위한 예제파일입니다.

맨위쪽의 왼쪽 좌표를 기준으로 뷰들을 겹치게해서 필요한것만 보여주는 방법의 레이아웃입니다.

activity_main5.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent">

    <RatingBar

        android:layout_width="100dp"

        android:layout_height="30dp" />

    <TextView

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:text="A"/>

</FrameLayout>

레이아웃 화면

아래와 같이 텍스트뷰와 레이팅바가 겹친 것을 알 수 있습니다.