-->
728x90

[Android Studio] / [안드로이드 스튜디오]

Layout / View Group의 종류 2. Frame Layout 

 

* 목표 : FrameLayout의 사용법에 대해 알아보자.

 

FrameLayout이란 자식(Children)으로 추가된 여러 뷰(View) 위젯들 중 하나를 Layout의 전면에 표시할 때 사용하는 클래스이다.

 

 

Frame이란 틀, 액자 의 뜻으로 많이 쓰인다. FrameLayout 또한 액자식 구성으로 배치를 하게 된다.

내가 마음에 드는 사진을 액자에 갈아 끼우듯, 내가 보여주고 싶은 View를 Frame안에 갈아 끼워 넣을 수 있다.

따라서 Fragment의 container로 가장 많이 사용된다. 내가 보여주고 싶은 Fragment의 View를 갈아 끼우기 위해서이다.

FrameLayout의 또 다른 특징 중 하나는 중첩이 허용된다는 것이다.

저번에 배운 LinearLayout만을 이용해 레이아웃을 만들다 보면 분명 한계가 찾아온다. 

수평적, 수직적으로 직선 배치만 허용되는 LinearLayout은 같은 Frame내에서 조그마한 중첩도 허용하지 않는다.

물론 margin, padding 값에 - 를 준다면 가능하겠지만... ex) android:marginStart="-10dp"...

레이아웃의 margin, padding 값을 함부로 다루다간 디바이스 간 호환성 문제 때문에 크게 골머리를 앓을 것이다..(내가 그러고 있음 ㅜ)

따라서 이럴 때도 FrameLayout을 사용하게 된다.

 

다음의 예제를 살펴보자

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

    <FrameLayout
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:background="@color/teal_700">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />

    </FrameLayout>


</LinearLayout>

500dp 정사각형 FrameLayout을 만들고 그 안에 이미지 뷰를 배치했다. 기본적으로 자식 View는 항상 왼쪽 최상단에 배치가 되지만 layout_gravity 속성을 이용해 원하는 배치를 할 수 있다.

저번에 만든 LinearLayout 지옥을 FrameLayout을 이용하면 간단하게 표현할 수 있다.

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

    <FrameLayout
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:background="@color/teal_700">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|center"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|bottom"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
    </FrameLayout>


</LinearLayout>

아름답다..

응용하면 이런 식으로 장난칠 수도 있다.

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

    <FrameLayout
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:background="@color/teal_700">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|center"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|center"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|bottom"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|bottom"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="10dp"
            android:background="@drawable/ic_launcher_background"
            android:src="@drawable/ic_launcher_foreground" />

        
        <LinearLayout
            android:id="@+id/customer_linear1"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:background="@color/teal_200"
            android:layout_weight="1">

            <Button
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:text="1"
                android:textSize="30sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:layout_marginStart="15dp"
                android:layout_weight="1"
                android:text="2"
                android:textSize="24sp" />

            <Button
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:text="3"
                android:textSize="24sp" />
            
        </LinearLayout>

    </FrameLayout>


</LinearLayout>

 

 

<참고자료>

abhiandroid.com/ui/framelayout

 

Frame Layout Tutorial With Example In Android Studio | Abhi Android

Frame Layout Tutorial With Example In Android Studio Frame Layout is one of the simplest layout to organize view controls. They are designed to block an area on the screen. Frame Layout should be used to hold child view, because it can be difficult to disp

abhiandroid.com

developer.android.com/reference/android/widget/FrameLayout

 

FrameLayout  |  Android 개발자  |  Android Developers

 

developer.android.com

 

반응형

'Mobile > 🐸Andorid' 카테고리의 다른 글

[Android] firebase 연동 (최신버전)  (2) 2022.03.22
[Android] Package, Project, Module 이름 바꾸기  (4) 2021.01.07
[Android] Activity와 Fragment  (2) 2020.12.09
[Android] Layout / View Group의 종류 1. Linear Layout  (1) 2020.12.02
[Android] 배경(XML)에 투명도(Opacity) 적용  (4) 2020.11.24

+ Recent posts

티스토리툴바