코틀린 버튼 클릭시 버튼 이미지 변경 - koteullin beoteun keulligsi beoteun imiji byeongyeong

소스코드

MainActivity.java

package org.techtown.framelayout;

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

    }

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

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

    }

}

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

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

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

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

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

이미지 2개 아무거나 저장후 drawable 폴더에 넣기

결과화면

이미지 바꾸기 클릭시

-> 버튼클릭시 이미지가 dream01, dream02 이미지가 왔다갔다 바뀌는걸 볼수있음

안드로이드 스튜디오

[안드로이드 스튜디오] 버튼으로 이미지 변경하기

버튼으로 이미지 변경하기!

별 것 아닌 듯 하면서도

가장 기본적이며 사용하기 편한?

많이 사용되는 것이

버튼으로 무언 가를 하는 것 같습니다.

이 포스팅으로

버튼으로 무언가(?)를 하는 것과

이미지를 변경하는 것 

두 가지를 알아갈 수 있다고 생각하며

본론으로 들어가보겠습니다.

1. 버튼(Button) 생성

프로젝트 생성 시에

기본적으로 생성되는 메인 xml에서 해보겠습니다.

기본적인 레이아웃(Layout) 안에

버튼(Button)을 생성하여 줍니다.

( Design 툴에서 드래그하여 추가하거나, xml에서 직접 입력하실 수 있습니다. )

android:text = "Button" 

여기에는 버튼에 적힐 글자를 입력하시면 되고

anroid:id = "@+id/button" 에서

button 대신 나중에 편하게 호출 할(기억이 잘 날.. ) 

id 를 입력하시면 됩니다.

자, 간단하게 버튼을 생성했으니..

이미지도 한번 추가하여 보겠습니다.

2. 이미지(ImageView)  생성

이미지는

이미지뷰 (ImageView) 를 이용하여 나타냅니다.

이미지 뷰 역시 버튼 처럼 생성이 가능합니다.

여기서 이미지 뷰의 핵심(?)은 

이미지 아니겠습니까?

android:src="@drawable/image0"

이 소스에서 'image0' 은 파일 이름이며

drawable은 파일이 있는 폴더 이름입니다.

(확장자 안쓰셔도 됩니다. 이득)

이곳에서 에러가 나시는 분들은

이미지 파일이 존재하지 않기 때문일겁니다.

본인이 사용할 이미지를 미리

폴더에 넣어두시면 코딩할 때 에러가 나지 않겠죠?

변경 전, 후 이미지를 drawable 폴더에 넣어 줍니다.

( 경로 예:  AndroidStudioProjects\STUDY\app\src\main\res\drawable  )

( STUDY 라는 프로젝트 밑의 경로들을 확인 바랍니다. )

3. 버튼 이벤트 (onClick)

​​버튼의 이벤트처리에는 

여러가지 방식이 있습니다.

여기서 제가 하는 방식은

안드로이드 스튜디오의 장점(?)을 이용한

간단한 방식으로 onClick 함수를 xml에서 미리 정해주는 겁니다.

MainActivity로 들어가기 전에

activity_main.xml 로 다시 돌아갑니다.

그리고 버튼에서

android:onClick = "onClick"  을 적어줍니다.

여기서 따옴표가 있는  "onClick" 은

원하는 함수의 이름으로 적으시면 됩니다. 

그리고 MainActivity 로 넘어가 줍니다.

자.

xml 에서 선언했던 버튼과 이미지 뷰의 id 값으로

MainActivity 에서 버튼과 이미지 뷰를 선언해줍니다.

( 사실 이 방식에서는 버튼을 선언 할 필요도 없는 듯 합니다.. )

버튼에서 선언했던 

onClick 함수를 기억하시죠?

'onClick' 함수를 선언합니다.

여기서 'onClick'은 (만들었던) button 이라는 id를 가진 버튼을

눌렀을 때 반응하는 이벤트입니다.

그 이벤트의 내용으로는

Change_image 라는 id를 가진 이미지 뷰의 이미지를 변경 하는 것입니다.

setImageResource 를 호출하였고,

인자값에는 R.drawable.image1 가 적혀있습니다.

drawable 폴더 안에있는 image1 파일이 있고,

image1 이라는 파일로 이미지를 변경하는 것입니다.

이제 실행을 해봅시다.

변경 이라는 버튼을 누르면

이미지가 변경 되는 것이 보이나요?

성공입니다.

누를 때마다 변경 되는 것에는

여러가지 방법이 있을 것입니다.

코딩의 화려함 또는

toggle 버튼 등..?

그것은 차차

알아가기로 하고!

오늘도 수고하셨습니다.