본문 바로가기
전공 수업/모바일 프로그래밍(Android Studio)

[5주 차] - 안드로이드 주요 레이아웃 (LinearLayout, RelativeLayout, TableLayout, GridLayout, FrameLayout)

by TwoJun 2023. 4. 5.

    과목명 : 모바일 프로그래밍(Mobile programming with Android Studio)

수업일자 : 2023년 03월 31일 (금)

Android Studio (Android Emulator)

 

 

 

 

 

1. 레이아웃 (Layout)

1-1. 레이아웃의 기본적인 개념

(1) ViewGroup 클래스로부터 상속받으며 내부에 여러 가지 위젯(요소)들을 담는 용도로 사용할 수 있습니다.

- 레이아웃은 View들의 위치와 크기를 결정할 수 있습니다.

 

(2) 레이아웃 중에서 가장 많이 사용되는 레이아웃은 <LinearLayout>입니다.

ViewGroup 클래스를 상속받는 LinearLayout, LinearLayout을 상속받는 다양한 레이아웃 클래스들

 

 

 

 

1-2. 레이아웃에서 자주 사용되는 속성들

(1) android:orientation

- 레이아웃 내부에 배치할 위젯의 수직 또는 수평 성분을 설정할 수 있습니다.

 

(2) android:gravity

- 레이아웃 내부에 배치할 위젯의 정렬 방향을 좌측, 우측, 중앙으로 설정할 수 있습니다.

 

(3) android:padding

- 레이아웃 내부에 배치할 위젯의 여백을 설정할 수 있습니다.

 

(4) android:layout_weight

- 레이아웃이 전체 화면에서 차지하는 공간의 가중치 값을 설정하며, 여러 개의 레이아웃이 중복될 때 주로 사용합니다.

 

(5) android:baselineAligned

- 레이아웃 내부에 배치할 위젯을 보다 보기 좋게 정렬할 수 있습니다.

 

 

 

 

 

 

2. 주요 레이아웃의 종류

2-1. LinearLayout (선형 레이아웃)

(1) 왼쪽 위부터 아래쪽 또는 오른쪽으로 차례대로 배치하는 레이아웃입니다.

 

 

2-2. RelativeLayout

(1) 위젯 본인이 속한 레이아웃의 상하좌우 위치를 지정하여 배치하는 레이아웃입니다.

 

(2) 다른 위젯으로부터 상대적인 위치를 지정할 수 있습니다.

 

 

2-3. TableLayout

(1) 위젯을 행과 열의 개수를 지정한 테이블 형태로 배열하는 레이아웃입니다.

 

 

2-4. GridLayout

(1) TableLayout과 비슷하지만 행 또는 열을 확장하여 다양하게 배치할 때 더 편리하게 사용할 수 있는 레이아웃입니다.

 

 

2-5. FrameLayout

- 위젯들을 왼쪽 위에 일률적으로 겹쳐 배치하여 중복해서 보이는 효과를 주는 레이아웃입니다.

 

레이아웃 클래스 설명
LinearLayout 자식 위젯들을 수직이나 수평으로 배치합니다.
TableLayout 자식 위젯들을 테이블 형태로 배치합니다.
GridLayout 자식 위젯들을 바둑판 형태로 배치합니다.
RelativeLayout

ConstraintLayout		 자식 위젯들을 부모나 다른 자식 위젯에 상대적으로 배치합니다.
TabLayout 탭을 이용해서 겹쳐진 자식 위젯 중에서 하나를 선택합니다.
AbsoluteLayout 절대적인 위치로 배치합니다.
FrameLayout 모든 자식 위젯들을 겹치게 배치합니다.

 

여러 가지 레이아웃의 종류

 

 

 

 

 

 

3. 기본적인 LinearLayout의 형태

3-1. LinearLayout

(1) 안드로이드 프로젝트 초기 생성 시, activity.xml 파일을 생성합니다.

 

(2) activity.xml 내부에 TextView 1개가 기본적으로 생성되어 있습니다.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

 

 

 

 

3-2. android:orientation 속성

(1) LinearLayout의 기본적인 속성입니다.

 

(2) android:orientation="vertical"

- LinearLayout 내부에 포함될 위젯들의 배치 방향을 수직으로 설정합니다.

 

(3) android:orientation="horizontal"

- LinearLayout 내부에 포함될 위젯들의 배치 방향을 수평으로 설정합니다.

<?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=".MainActivity">
    
    ~~~~ 해당 영역에 위젯들을 배치시킬 수 있습니다.~~~~
    
</LinearLayout>

 

 

 

 

3-3. 예시 코드 (1) - android:orientation 속성 값이 각각 "vertical", "horizontal"인 경우

(1) android:orientation="vertical"

<?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=".MainActivity">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"/>
    
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RadioButton"/>
    
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"/>

</LinearLayout>

 

<위젯 배치 결과>

 

 

(2) android:orientation="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="horizontal"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"/>

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RadioButton"/>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"/>

</LinearLayout>

 

<위젯 배치 결과>

 

 

 

 

3-4. 예시 코드 (2) - android:gravity 속성 값이 "right|bottom"인 경우

- android:gravity 속성은 레이아웃 내부의 위젯을 어디에 배치할 것인지 결정하는 속성입니다.

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"/>

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RadioButton"/>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch"/>

</LinearLayout>

 

<위젯 배치 결과>

 

 

 

 

3-5. 예시 코드 (3) - android:layout_gravity 속성 값이 "right", "center", "left"인 경우

- android:layout_gravity 속성은 자식 위젯들이 본인의 위치를 부모 레이아웃 내부에서 어디에 위치할 것인지 결정하는 속성입니다.

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="TextView"/>

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="RadioButton"/>

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Switch"/>

</LinearLayout>

 

<위젯 배치 결과>

 

 

 

 

3-6. 예시 코드 (4) - android:baselineAligned 속성

- android:baselineAligned 속성은 크기가 다른 위젯들을 각각 보기 좋게 정렬하는 속성입니다.

 

- true(생략 가능) 또는 false 값을 줄 수 있습니다.

(좌) android:baselineAligned="false" / (우) android:baselineAligned="true"

 

 

 

 

 

 

4. 중복되는 LinearLayout의 형태

4-1. 중복되는 LinearLayout

(1) LinearLayout 내부에 또 다른 LinearLayout을 생성하는 방식을 의미합니다.

중복되는 LinearLayout의 대략적인 구조

 

 

 

 

4-2. LinearLayout의 android:layout_weight 속성

(1) LinearLayout을 여러 개 사용할 경우 각 레이아웃에 대한 가중치(Weight, 크기)를 설정할 때 사용하는 속성입니다.

 

(2) 주로 전체 화면에 대한 비율(%, percent)로 지정할 수 있습니다.

 

(3) Weight 속성 계산 방법은 아래와 같고 이해를 돕기 위해 몇 가지 예시를 추가했습니다.

자식 View들의 가중치 값을 기반으로 View들이 남아 있는 공간의 어느 정도를 할당받는지 계산할 수 있다.

 

 

 

 

4-3. 중복된 LinearLayout의 예시 코드 (1) - android:layout_weight 속성 이용하기

(1) android:layout_weight의 속성을 "match_parent" → "wrap_content"으로 변경합니다.

 

(2) 레이아웃마다 구분될 수 있도록 android:background 속성으로 색상을 설정해 줄 수 있습니다.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 2"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00FF00"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 4" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0000FF"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 5" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 6" />
    </LinearLayout>

</LinearLayout>

 

<위젯 배치 결과>

 

 

 

 

4-4. 중복된 LinearLayout의 예시 코드 (2) - android:layout_weight 속성의 가중치 값을 사용해 화면을 모두 채울 수 있다.

(1) 모든 레이아웃에 android:layout_weight="1" 속성을 적용합니다.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 2"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#00FF00"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 4" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0000FF"
        android:gravity="center"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 5" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="버튼 6" />
    </LinearLayout>

</LinearLayout>

 

<위젯 배치 결과>

 

 

 

 

4-5. 중복된 LinearLayout의 예시 코드 (3)

(1) 중복된 LinearLayout을 사용하여 아래와 같은 레이아웃을 구성할 수 있습니다.

중첩된 LinearLayout

 

(2) XML Code 작성

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ff0000"
            android:orientation="vertical">
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#ffd400"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#ffd400"
                android:orientation="vertical">
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#000000"
                android:orientation="vertical">
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#0000ff" />
</LinearLayout>

 

<mainActivity.java 실행 결과>

 

 

 

 

 

 

5. RelativeLayout

5-1. RelativeLayout에 존재하는 위젯의 위치 속성

(1) RelativeLayout의 상하좌우에 배치됩니다.

 

(2) RelativeLayout의 다른 위젯의 상대 위치에 배치됩니다.

 

 

 

 

5-2. RelativeLayout의 상하좌우에 배치시키는 속성들과 예시 코드

(1) 각 속성 값들은 true 또는 false입니다.

부모(레이아웃)의 위치를 적용시킬 때의 각각의 속성들

 

상세 속성 역할
android:layout_centerHorizontal 부모 컨테이너의 수평 방향 중앙에 위치시킵니다.
android:layout_centerVertical 부모 컨테이너의 수직 방향 중앙에 위치시킵니다.
android:layout_centerInParent 부모 컨테이너의 수직 & 수평, 정중앙에 위치시킵니다.
android:layout_alignParentTop 부모 컨테이너의 상단 끝과 자식 View의 상단 끝을 맞춥니다.
android:layout_alignParentBottom 부모 컨테이너의 하단 끝과 자식 View의 하단 끝을 맞춥니다.
android:layout_alignParentLeft 부모 컨테이너의 왼쪽 끝과 자식 View의 왼쪽 끝을 맞춥니다.
android:layout_alignParentRight 부모 컨테이너의 오른쪽 끝과 자식 View의 오른쪽 끝을 맞춥니다.

 

 

<XML 예시 코드>

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Top"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Left"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Right"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Bottom"/>

</RelativeLayout>

 

<위젯 배치 결과>

 

 

 

 

5-3. 다른 위젯의 상대 위치에 배치시킬 때(id 값으로 지정한 View 기준으로 설정하는)의 속성들과 예시 코드 

(1) 각 속성의 값들은 다른 위젯의 id를 지정합니다.

 

(2) "@+id/기준 위젯의 아이디"와 같은 형식으로 사용합니다.

 

다른 위젯의 상대적인 위치를 적용할 때의 속성들

 

상세 속성 역할
android:layout_above 지정된 View의 상단으로 위치시킵니다.
android:layout_toLeftOf 지정된 View의 왼쪽으로 위치시킵니다.
android:layout_toRightOf 지정된 View의 오른쪽으로 위치시킵니다.
android:layout_below 지정된 View의 하단으로 위치시킵니다.
android:layout_alignTop 지정된 View와 위쪽을 맞춰서 위치시킵니다.
android:layout_alignBottom 지정된 View와 아래쪽을 맞춰서 위치시킵니다.
android:layout_alignLeft 지정된 View와 왼쪽을 맞춰서 위치시킵니다.
android:layout_alignRight 지정된 View와 오른쪽을 맞춰서 위치시킵니다.
android:layout_alignBaseline 지정된 View와 텍스트 기준선을 맞춰서 위치시킵니다.

 

 

<XML 예시 코드>

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

    <Button
        android:id="@+id/baseBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="150dp"
        android:height="150dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="기존 위젯" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:text="1번" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/baseBtn"
        android:layout_toLeftOf="@id/baseBtn"
        android:text="2번" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/baseBtn"
        android:layout_toLeftOf="@id/baseBtn"
        android:text="3번" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/baseBtn"
        android:layout_above="@id/baseBtn"
        android:text="4번" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/baseBtn"
        android:layout_below="@id/baseBtn"
        android:text="5번" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/baseBtn"
        android:layout_toRightOf="@+id/baseBtn"
        android:text="6번" />

</RelativeLayout>

 

<위젯 배치 결과>

 

 

 

 

5-4. 다른 위젯의 상대 위치에 배치시킬 때 예시 코드 

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

    <Button
        android:id="@+id/baseBtn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="기준 1" />

    <Button
        android:id="@+id/baseBtn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="기준 2"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/baseBtn2"
        android:layout_toRightOf="@id/baseBtn1"
        android:text="1번" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/baseBtn1"
        android:text="2번"/>

</RelativeLayout>

 

<위젯 배치 결과>

 

 

 

 

 

 

6. TableLayout

(1) 주로 위젯을 표(Table)의 형태로 표현할 때 사용되는 레이아웃입니다.

 

(2) <TableRow>와 함께 사용되는데 <TableRow>개수가 행(Row)의 개수입니다.

 

(3) 열(Column)의 개수는 <TableRow> 내부에 포함된 위젯의 수로 결정되며, 3행 4열의 TableLayout의 형태는 아래와 같습니다.

3행 4열 TableLayout

 

 

 

 

 

 

7. GridLayout

(1) TableLayout과 비슷하지만, 위젯을 표의 형태로 배치할 때 사용하고 좀 더 직관적인 레이아웃입니다.

 

(2) android:layout_row, android:layout_column 속성에서 인덱스 값을 주어 n행 m열 형태의 GridLayout을 배치시킬 수 있습니다. 

 

 

(3) 인덱스 속성 값은 0부터 시작하므로 n행 m열의 GridLayout의 속성 값은 android:layout_row="n - 1",  android:layout_column="m - 1"입니다.

 

- 2행 3열의 GridLayout을 배치하고자 하는 경우

 

android:layout_row="1"

android:layout_column="2"

 

 

(4) Android 4.0 (Icecream Sandwich, API 14) 버전부터 지원합니다.

2행 3열의 GridLayout

 

 

 

 

7-1. GridLayout 자체 레이아웃에서 자주 사용되는 속성

(1) android:rowCount

- 행의 개수를 결정하는 속성입니다.

 

(2) android:columnCount

- 열의 개수를 결정하는 속성입니다.

 

(3) android:orientation

- GridLayout의 수평 방향으로 우선 설정할지, 수직 방향으로 우선 설정할지 결정하는 속성입니다.

 

 

 

 

7-2. GridLayout 내부에 포함될 위젯에서 자주 사용되는 속성

(1) android:layout_row

- 자신이 위치할 행 번호를 결정하는 속성입니다. (인덱스 번호는 0번부터 시작합니다.)

 

(2) android:layout_column

- 자신이 위치할 열 번호를 결정하는 속성입니다. (인덱스 번호는 0번부터 시작합니다.)

 

(3) android:layout_rowSpan

- 행을 지정된 수만큼 확장하는 속성입니다.

 

(4) android:layout_columnSpan

- 열을 지정된 수만큼 확장하는 속성입니다.

 

(5) android:layout_gravity

- 주로 fill, fill_vertical, fill_horizontal 등으로 지정하며 행 또는 열을 확장할 때 위젯을 확장된 셀에 꽉 채워지는 효과를 줄 수 있는 속성입니다.

 

 

 

 

 

 

8. FrameLayout

(1) FrameLayout의 경우 단순히 레이아웃 내의 위젯을 왼쪽 상단부터 겹쳐서 출력할 수 있도록 하는 레이아웃입니다.

 

(2) FrameLayout 자체로 사용하기보다는 탭 위젯 등과 혼용해서 사용합니다.

FrameLayout의 구조

 

 

 

 

8-1. FrameLayout의 속성들과 예시 코드

(1)  android:foreground

- FrameLayout의 전경 이미지를 지정할 수 있는 속성입니다.

 

(2) android:foregroundGravity

- 전경 이미지의 위치를 지정할 수 있는 속성입니다.

 

(3) 예시 코드

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:foreground="@drawable/img"
    android:foregroundGravity="center|fill_horizontal"
    tools:context=".MainActivity">

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_background"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox" />
</FrameLayout>

 

< 위젯 배치 결과>

 

 

 

 

 

 

9. Reference

(1) Reference

- Android Studio를 활용한 안드로이드 프로그래밍 / 한빛아카데미(Hanbit Academy, Inc.)

 

(2) URL

https://www.hanbit.co.kr/store/books/look.php?p_code=B1212492850 

 

IT CookBook, Android Studio를 활용한 안드로이드 프로그래밍(7판)

안드로이드 프로그래밍을 하면서 부딪힐 수 있는 다양한 오류나 실수까지 친절하게 안내하여 시행착오 없이 안드로이드를 빠르게 정복할 수 있습니다.

www.hanbit.co.kr

 

 

 

 

- 학부에서 수강했던 전공 수업 내용을 정리하는 포스팅입니다.

- 내용 중에서 오타 또는 잘못된 내용이 있을 시 지적해 주시기 바랍니다.

'전공 수업 > 모바일 프로그래밍(Android Studio)' 카테고리의 다른 글

[7주 차] - 안드로이드 메뉴(Option menu, Context menu), Toast 위젯, 대화 상자(Dialog)  (0) 2023.04.18
[6주 차] - 안드로이드 날짜 시간 관련 위젯, 기타 위젯, 간단한 기능과 복잡한 기능을 가진 View Container  (0) 2023.04.13
[4주 차] - 안드로이드 기본 위젯 (View 클래스, TextView, EditText, Button, ImageView & ImageButton, CheckBox, ToggleButton, RadioButton & RadioGroup)  (0) 2023.03.26
Action Bar의 setTitle(), setIcon(), Intent 객체의 Uri.parse(), setImageResource() 메소드 정리  (0) 2023.03.24
[3주 차] - TextView, EditText & Button, Intent 화면 전환, ImageView & Toast.makeText() 메소드  (0) 2023.03.21

관련글

댓글

티스토리툴바