[안드로이드] Layout 종류

개발/Android

[안드로이드] Layout 종류

Eun 2022. 2. 8. 16:25

안드로이드 앱을 개발하기 위해서는 화면이 반드시 필요하고 화면에 보이는 구성 요소를 모두 뷰(VIEW)라고 한다.

Button, Text, Image 등 뷰들을 화면에 배치해야한다.

그러나 뷰 자체로는 자신이 어디에 배치되어야하는지 정보를 가지고 있지 않다.

따라서 뷰를 화면에 배치하는 무언가가 필요하고 그 무언가가 View Group 이다.

안드로이드에서는 이러한 View Group을 상속받는 여러 Layout 클래스를 제공한다.

레이아웃의 종류도 여러가지고 쓰임새가 다 다르기때문에 성질을 파악해야 한다.

1. LinearLayout (리니어 레이아웃)

linear(선의, 선형의)의 뜻처럼 가로나 세로 방향으로 일열로 나열할 때 사용한다.

뷰의 위치를 지정하지 않아도 중첩되지않고 나열된다.

2. RelativeLayout (렐러티브 레이아웃)

렐러티브 레이아웃은 뷰를 특정 뷰나 부모의 위치에 맞게 배치를 할 수 있다.

레이아웃의 상대적인 위치(Relative)에 배치할 수 있다.

사진에서 볼 수 있듯이 부모는 RelativeLayout이 되고 TextView1은 부모의 중앙, TextView2는 TextView1의 오른쪽이자 밑이다.

TextView3은 TextView2의 왼쪽이자 밑이다. 이처럼 각 뷰에 상대적인 위치에 따라 결정할 수 있다.

리니어레이아웃보다 뷰를 유동적으로 배치할 수 있다.

속성

1. 뷰로 설정

layout_toRightOf="@"	@뷰의 오른쪽
layout_toLeftOf="@"	@뷰의 왼쪽
layout_aboveOf="@"	@뷰의 위
layout_belowOf="@"	@뷰의 밑
layout_toStartOf="@"	@뷰의 시작부분
layout_toEndOf="@"	@뷰의 끝부분
layout_alignRight="@"	@뷰의 오른쪽으로 정렬
layout_alignLeft="@"	@뷰의 왼쪽으로 정렬
layout_alignBottom="@"	@뷰의 아래쪽으로 정렬
layout_alignTop="@"	@뷰의 위쪽으로 정렬
layout_alignBaseLine="@"	@뷰의 기본라인으로 정렬

2. true/false 값으로 설정

layout_alignParentRight="true"	부모의 오른쪽
layout_alignParentLeft="true"	부모의 왼쪽
layout_alignParentTop="true"	부모의 위쪽
layout_alignParentBottom="true"	부모의 아랫쪽
layout_centerInParent="true"	부모의 가운데
layout_centerHorizontal="true"	부모의 수평 가운데
layout_centerVertical="true"	부모의 수직 가운데
layout_alignParentStart="true"	부모의 시작지점
layout_alignParentEnd="true"	부모의 끝지점

3. TableLayout (테이블 레이아웃)

테이블레이아웃은 뷰들을 표(Table)처럼 배치할 수 있다. 엑셀처럼 표의 크기와 모양, 테두리 색 변경이 가능하다.

행과 열로 구성되어 있으며 열은 따로 지정하지 않고 행을 추가함으로써 표를 만든다.

속성

<TableRow></TableRow> : 테이블 레이아웃의 행을 추가해준다.
weight : 가중치를 추가해준다.
layout_span="정수" : 지정한 정수만큼 행을 합쳐준다.

주로 계산기나 회계어플을 만들 때 자주 사용한다.

예시

<?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"
    tools:context=".MainActivity">


    <TableRow
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="##FF0000">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="뷰1"
            android:background="#ff9966"
            android:layout_margin="5dp"></TextView>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="뷰2"
            android:background="#ff9966"
            android:layout_margin="5dp"></TextView>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="뷰3"
            android:background="#ff9966"
            android:layout_margin="5dp"></TextView>
    </TableRow>

    <TableRow
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="##FF0000">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="뷰1"
            android:background="#ff9966"
            android:layout_margin="5dp"></TextView>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="뷰2"
            android:background="#ff9966"
            android:layout_margin="5dp"></TextView>
        
    </TableRow>



</TableLayout>