[안드로이드 스튜디오 강좌 #12] 프레임 레이아웃(Frame Layout)

!목표

하나의 뷰만 화면에 나타내 주는 프레임 레이아웃을 공부해보자

프레임 레이아웃을 이용해 이미지 화면을 전환하는 어플을 만들어보자

 

 

1. 프레임 레이아웃이란?

프레임 레이아웃은 하나의 뷰만 화면에 표시해주는 레이아웃이다.

 

프레임 레이아웃에 뷰를 하나 이상 추가할 경우 추가된 순서대로 쌓이게 되고 가장 나중에 추가한 뷰만 보이게 된다.

이때 가장 나중에 추가한 뷰를 보이지 않게 하는 경우 그 전에 추가된 뷰가 보이게 된다.

보이거나 보이지 않게 하는 속성인 가시성(Visibility)을 가지고 있어서 여러 뷰를 전환할 때 많이 사용 된다.

 

 

-실습

화면에 있는 버튼을 누를 때마다 두개의 이미지가 전환되는 어플을 만들어보자

 

SampleFrameLayout 프로젝트를 새로 생성하자

먼저 activity_main.xml의 최상위 레이아웃을 LinearLayout(vertical)으로 변경해준 후 윗부분에 버튼을 추가하자

 

또, 이미지를 추가하기 위해서 프로젝트 폴더안의 SampleFrameLayout\app\src\main\res\drawable 폴더에 위의 이미지를 넣어주자

이미지 파일의 이름은 반드시 소문자, 숫자, _만들어가 있어야 한다.

나는 pixalbay에서 받은 강아지, 고양이 사진을 추가해주었다.

 

*추가한 이미지 (임의로 아무 사진이나 2가지 추가해도 된다.)

 

-XML 설정

아래의 코드와 같이 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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="이미지바꾸기"
        android:onClick="onButton1Clicked"/>

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/cat"
            android:visibility="invisible"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/puppy"
            android:visibility="visible"/>
    </FrameLayout>
</LinearLayout>

디자인 화면을 이용해서 해당 설정처럼 만들어보자

 

이미지뷰는 Palette에서 끌어서 사용하면 되고,

FrameLayout도 마찬가지로 Palette에서 끌어서 배치해주면 된다.

 

먼저 추가한 이미지에는 android:visibility="invisible"

후에 추가한 이미지에는 android:visibility="visible" 설정을 추가해주자.

 

 

-JAVA

이제 Java에서 버튼을 누를 때마다 이미지뷰가 가지는 visibility 속성을 변경해주면 이미지가 전환 되는 효과를 만들 수 있다.

 

아래와 같은 코드를 MainActivity.java에 입력해주자.

package org.techtowm.sampleframelayout;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    //imageView들 선언
		ImageView imageView; 
    ImageView imageView2;

    int imageIndex = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); //activity_main을 시작화면으로 설정
				
				//XML에서 설정된 imageView들을 자바로 가져와준다.
        imageView  = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View v){
        changeImage();
    }

    private void changeImage() {
        if (imageIndex == 0) {
            imageView.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.INVISIBLE);

            imageIndex = 1;
        }
        else if (imageIndex == 1) {
            imageView.setVisibility(View.INVISIBLE);
            imageView2.setVisibility(View.VISIBLE);

            imageIndex = 0;
        }
    }
}

 

*Code 설명

-findViewById : XML의 뷰 설정들을 Java로 가지고 오는 역할

(Java에서 뷰 설정을 바꾸면 XML에도 적용이 되도록 해줌)

-public void onButton1Clicked(View v) :

버튼이 클릭 될때 마다 changeImage()를 실행시켜준다.

-changeImage() :

imageIndex가 0일 때 imageView를 Visible, imageView2를 Invisible하게 변경하여 첫번째로 등록했던 고양이 사진이 보여지도록 설정한다.

imageIndex가 1일 때 imageView를 Invisible, imageView2를 Visible하게 변경하여 마지막으로 등록했던 강아지 사진이 보여지도록 설정한다.

 

 

어플을 실행시켜보면, 처음에는 마지막으로 등록했던 강아지 사진을 확인할 수 있다.

 

 

이미지 바꾸기 버튼을 클릭해보면, 귀여운 고양이로 사진이 바뀌는 것을 확인할 수 있다.

내가 사진을 골랐지만 너무 귀엽다. 사진은 위에 첨부해 놓았으니 이용해도 된다.

 

이미지가 바뀌는 것 처럼 보이지만 실제로는 두개의 이미지뷰가 중첩되어 있는 상황에서 하나를 보이게 하거나 보이지 않게 하는 것이다.

 

 

## 이 글은 허락을 받아 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8