[Android-04]Layout

참고:

안드로이드 스튜디오 설치에서 빌드까지 - 설치, 프로젝트 만들기(1/3)

안드로이드 스튜디오 설치에서 빌드까지 - 가상 디바이스에서 빌드하기(2/3)

안드로이드 스튜디오 설치에서 빌드까지 - 실제 디바이스에서 빌드하기(3/3)

GUI프로그래밍에서 Layout이라는 것은 화면을 배치하는 방식을 의미한다.

각각의 위젯을 어떻게 배치할것인지에 대한 방식이라는 것이다.

어느 GUI프로그래밍이나 이러한 레이아웃은 중요하다.

단 데스크탑의 GUI프로그래밍과는 조금의 차이는 존재한다고 할 수 있다.

데스크탑의 경우에는 GUI로 표시할 수 있는 공간이 넓다.

따라서 공간을 배치하는 문제가 크게 와닿지 않는다. 그러나 안드로이드에서는 이 문제를 항상 깊게 생각해야한다.

왜냐하면 폰은 배치되는 공간이 작기 때문이다. 따라서 잘 배치 하느냐의 문제도 항상 있는 것이다.

이제 각각의 레이아웃에 대해서 알아보자.

RelativeLayout

이 레이아웃은 부모(레이아웃)과 위젯과의 관계(Relation)을 바탕으로 하는 레이아웃이다.

즉 어떤 레이아웃의 특정 지점에서 부터 얼마만큼 떨어져있다. 이런식으로 레이아웃이 구성되어 있다.  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1"
    tools:context="com.example.jiharu.javaseminar.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="49dp"
        android:layout_marginTop="69dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_marginTop="66dp"
        android:layout_toEndOf="@+id/button"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/button2"
        android:layout_marginEnd="34dp"
        android:layout_marginTop="71dp"
        android:text="Button" />
</RelativeLayout>

속성 정리

기준 속성 - 부모

alignParentTop:부모의 상단에서 시작

alignParentBottom:부모의 하단에서 시작

alignParentLeft,Start:부모의 좌측에서 시작

alignParentRight,End:부모의 우측에서 시작

기준 속성 - 위젯

toEndof: 특정 위젯의 뒤에 배치한다.

toStartof: 특정 위젯의 앞에 배치한다.

below: 특정 위젯의 아래에 배치한다.

above: 특정 위젯의 위에 배치한다.

alignRight,End: 특정 위젯의 뒤에 배치한다.

alignLeft,Start: 특정 위젯의 앞에 배치한다.

alignBottom: 특정 위젯의 아래에 배치한다.

alignTop: 특정 위젯의 위에 배치한다.

centerVertical:중앙 세로선에서 시작

centerHorizontal:중앙 가로선에서 시작

마진 속성

marginStart:좌측에서 멀어짐

marginEnd:우측에서 멀어짐

marginTop:상단에서 멀이짐

marginBottom:하단에서 멀어짐

위젯 관계 속성

toEndof: 특정 위젯의 뒤에 배치한다.

toStartof: 특정 위젯의 앞에 배치한다.

below: 특정 위젯의 아래에 배치한다.

above: 특정 위젯의 위에 배치한다.

alignRight,End: 특정 위젯의 뒤에 배치한다.

alignLeft,Start: 특정 위젯의 앞에 배치한다.

alignBottom: 특정 위젯의 아래에 배치한다.

alignTop: 특정 위젯의 위에 배치한다.

※align과 아닌것의 차이는 align은 특정위젯의 기준선의 안쪽으로 들어가고 나머지는 바깥쪽으로 나간다.

단위는 보통 dp를 단위로 한다. px도 단위가 될 수 있다. dp는 인치당 픽셀수로 가변길이이다.

위의 xml을 보면 알 수 있다. 특정 위젯, 부모를 기준으로 특정 단위만큼 떨어져있다~~ 이런식으로 되는 것이다.

LinearLayout

LinearLayout은 위젯을 한줄에 한개씩 배치하는 레이아웃이다.

여기서는 orientation이라는 속성이 중요하다.

android:orientation : LinearLayout의 방향을 결정

vertical : 가로로 배치

horizontal : 세로로 배치

orientation이 vertical이면 모든 위젯이 가로로 쌓이게된다.

horizontal이면 모든 위젯이 세로로 차곡차곡 쌓인다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.jiharu.javaseminar.MainActivity">

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

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

xml을 확인하면 대충 레이아웃에 어떻게 구현되어 있는지 알 수 있다.

이 중에서 다른 개념은 쉽게 이해할 수 있는데 두가지의 새로운 속성이 있다.

바로 layout_width와 layout_height이다.

layout_with : 가로길이

layout_height : 세로길이

match_parent : 부모의 길이에 맞춰서 만들 수 있는 가장 큰 크기

wrap_content : 본인이 만들수 있는 적절한 크기

여기서 match_parent크기는 부모(레이아웃)크기에 맞추게 된다.

wrap_content는 본인이 만들 수 있는 적절한 크기가 된다.

layout_width를 match_parent를 줬기에 화면크기 딱 맞춰서 증가 하게된다.

layout_height를 wrap_content를 줬기에 화면크기에 적당히 맞춰서 늘어나게된다.

이런식으로 크기를 적절하게 비율에 맞춰서 정할 수도 있다. xml코드는 아래와 같다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1"
    tools:context="com.example.jiharu.javaseminar.MainActivity">

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

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.333"
        android:text="Button" />

</LinearLayout>

여기서 보면 레이아웃에 WeightSum이라는 속성이 있다.

이걸로 레이아웃안에 넣을 위젯들의 가중치의 합계를 정할 수 있다.

그리고 각각의 비율에 맞춰서 위젯들을 layout_weight를 정해준다.

위의 경우 두개의 버튼은 전부 비율이 1/3으로 되어있다.

TableLayout

TableLayout은 테이블 형태를 띄고 있는 레이아웃이다.

어떤 의미로는 GridLayout과 비슷한 형태라고 할 수 있다.그리고 쓰는 느낌도 GridLayout과 비슷하다.

TableLayout은 그냥 위젯들을 집어넣는게 아니다.

TableRow라는 위젯을 TableLayout에 집어넣고 그 TableRow안에다가 위젯을 집어넣는다.

만약 위처럼 위젯들이 배치되어있다고 가정하자.

xml코드는 아래와 같다.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.jiharu.javaseminar.MainActivity">


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

        <CheckedTextView
            android:id="@+id/checkedTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CheckedTextView" />

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

        <ToggleButton
            android:id="@+id/toggleButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ToggleButton" />
    </TableRow>

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

        <SeekBar
            android:id="@+id/seekBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CheckBox" />

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RadioButton" />
    </TableRow>
</TableLayout>

만약 여기서 특정한 위젯이 테이블에서 차지하는 공간을 바꿀수 있다 예를 들면 아래와 같이 말이다.

<RadioButton
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="3"
    android:text="RadioButton" />

레이아웃의 RadioButton의 layout_column을 3으로 배치했다.

이제  이 위젯의 위치는 그 열의 4번째 칸이 된다.

만약 특정 위젯이 2칸 이상을 차지하게 할 수도 있을까? 이 역시 가능하다.

새로운 테이블열을 추가하여보자.

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

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_span="3"
        android:text="Switch" />
</TableRow>

여기서 layout_span속성을 3을주면 3칸을 차지하고 2를 주면 2칸을 차지하게 된다.

새로 만든 스위치가 3칸을 차지하는 것을 볼 수 있다.

GridLayout

GridLayout은 TableLayout과 쓰는 느낌이 비슷하다.

그러나 가장큰 차이점은 아무래도 행과 열 모두 span이 가능하다는 점이다.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="4"
    tools:context="com.example.jiharu.javaseminar.MainActivity">


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

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

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="1"
        android:text="Button" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_rowSpan="2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="2"
        android:text="Button" />
</GridLayout>

GridLayout은 rowSpan과 columnSpan이 따로 존재한다.

이 둘을 사용해서 위젯의 크기를 늘릴 수 있다.

여기서 중요한건 저걸 지정해주고 layout_gravity 속성을 fill을 해주어야한다.

FramLayout

FrameLayout은 위젯이 무조건 좌측 상단에 겹쳐서 나오게 된다.

이는 일반적으로 사용하는 레이아웃은 아니며 특별한 무언가를 구연할 때 사용된다.

ConstraintLayout

RelativeLayout을 대신하여 새로 추가된 레이아웃이다.

쓰기는 더 까다로운데 화면이 조금 다른 형식으로 형성되어도 일관성있는 화면 표현이 가능하다는 장점이 있다.