Android Studio / 안드로이드 앱만들기 공부9 / 프레임 레이아웃과 뷰 전환 / 이미지 추가해서 이미지 바꾸기

프레임 레이아웃과 뷰의 전환

프레임 레이아웃에 뷰를 넣으면 그중에서 하나만 표시되는데 프레임 레이아웃은 중첩(Overlay) 기능이 있다

뷰를 하나 이상 추가할 경우 추가된 순서대로 차곡차곡 쌓이는데 가장 먼저 추가한 뷰가 가장 아래쪽에 쌓이고

하나씩 위에 쌓이면서 나중에 추가된 뷰만 보인다 나중에 쌓인 뷰를 지우면 그전 뷰가 보이고 이런 식

이런 속성을 가시성 (Visibility) 속성이라고 한다.

또 여러 개의 뷰를 전환할 때 사용하기도 한다.

 

이미지 두 개를 이용해서 버튼을 누를 때마다 두 개의 이미지가 전환되는 기능을 만들 거다.

1. 새 프로젝트 생성 SampleFrameLayout

2. activity_main.xml 파일에 코드를 입력하거나 리니어 레이아웃으로 변경해서 버튼을 추가하자

3. LinearLayout을 추가한다 

 

FrameLayout을 추가하다 보니까 orientation 속성 vertical을 까먹었는데... 그래서 이전에 쓴 거 다시 찾아옴

tog-code.tistory.com/6

 여기서 android:orientation="vertical" 속성은 가로 세로 방향 중 어느 방향인지 지정하는 것으로 필수 속성이다.

 

프로젝트 폴더에 이미지 추가하기

 

 

Palette에서 이미지를 FrameLayout에 끌어다 두면 화면이 나온다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Import Drawables를 눌러서

추가할 이미지를 찾아서 추가한다

 

 

 

 

 

 

 

 

 

 

이 방법 말고도 ctrl+c ctrl+v 를 이용해서 경로 app/res/drawable 에 붙여 넣기 해서 사용이 가능하지만 새로고침을 해줘야 반영이 되는 거 같아서 위에 있는 방법으로 사용하는 게 좋을 거 같다.

(새로고침하는 방법을 잘 몰라서 전체 프로젝트를 새로고침을 하는 걸 했다...)

 

activity_main.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">

    <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="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/_1"
            android:visibility="invisible"
            app:srcCompat="@drawable/test_moon1" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:srcCompat="@drawable/test_moon2"
            android:contentDescription="@string/_2" />

    </FrameLayout>


</LinearLayout>

이 코드 작성할때 Button의 android:onClick은 java 코드를 작성한 뒤에 추가했다

 

MainActivity.java 코드

package com.togapp.sampleframelayout;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    ImageView imageView2;

    int imageIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);
        // R 여기서 R은 프로젝트 패키지 명 임폴트로 넣어두고 생략 가능 import static com.togapp.sampleframelayout.R.*;
        // XML 레이아웃 파일에서 id 값으로 "@+id/imageView"를 부여했다면 자바 파일에서는 R.id.imageView로 id를 참조함
        // id가 imageView 인것을 찾아오기

    }

    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;
        }
    }

}

 

+ 소스에서  ImageView imageView; 부분은 android.widget.ImageView라는 내장 class를 가져오는 구문이다.

(이미 정의되어있는 클래스를 적용하는부분 activity_main.xml 파일에 있는 View를 가져오는 듯하다)

+ 나머지는 소스를 보면 이해가 갈 거 같아서 패스한다