안드로이드 - 버튼 클릭 시 ImageView의 이미지 변경하기

1. 버튼 클릭 시 ImageView의 이미지 변경하기 

프로젝터 폴더의 drawable폴더에 사용할 이미지를 복사해줍니다. 프로젝트 폴더\app\src\main\res아래에 위치합니다.

안드로이드 스튜디오에서 추가된 것을 확인 할 수 있습니다. 이미지 사용시 각각 다음처럼 코드에서 지정해주면 됩니다.

R.drawable.mountain

R.drawable.sea

activity_main.xml 파일에 이미지를 보여주기 위한 ImageView 하나와 Button 하나를 추가했습니다.

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.tistory.webnautes.changeimage.MainActivity">
 
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView"/>
 
    <Button
        android:text="Change Image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"/>
</LinearLayout>
 

MainActivity.java 파일입니다. 버튼을 클릭할 떄마다  두 장의 이미지를 번갈아 가며 보여주게 됩니다.

package com.tistory.webnautes.changeimage;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
 
public class MainActivity extends AppCompatActivity {
 
    int i = 0;
    ImageView imageview = null;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Button button = (Button)findViewById(R.id.button);
        imageview = (ImageView)findViewById(R.id.imageView);
 
        button.setOnClickListener(new View.OnClickListener(){
 
            @Override
            public void onClick(View view) {
                i = 1 - i;
 
                if ( i == 0 ){
                    imageview.setImageResource(R.drawable.mountain);
                }
                else{
                    imageview.setImageResource(R.drawable.sea);
                }
 
            }
        });
    }
}
 

처음 실행시키면 안드로이드 마스코트가 보입니다.  이때 버튼을 클릭하게 되면 산과 바다 사진이 번갈아 가며 보이게 됩니다. 

2. 버튼 클릭 시  두개의 ImageView에 포함된 이미지 번갈아 가며 보여주기

위에서 작성한 코드를 수정하여 프로그래밍 하였습니다. 

activity_main.xml 파일에 두 개의 ImageView를 추가하고 각각 이미지를 리소스에서 지정해주었습니다. 그리고 버튼하나 추가해줍니다. 

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.tistory.webnautes.changeimage.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:orientation="horizontal">
 
    <ImageView
        android:layout_width="150dp"
        android:layout_height="400dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView1"/>
 
    <ImageView
        android:layout_width="150dp"
        android:layout_height="400dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView2"/>
 
    </LinearLayout>
 
 
    <Button
        android:text="Change Image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button"/>
</LinearLayout>
 

MainActivity.java 파일입니다. 버튼을 클릭할 떄마다  두 개의 ImageView에 있는 이미지를 번갈아 가며 보여주게 됩니다. 

package com.tistory.webnautes.changeimage;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
 
public class MainActivity extends AppCompatActivity {
 
    int i = 0;
    ImageView imageview1 = null, imageview2 = null;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Button button = (Button)findViewById(R.id.button);
        imageview1 = (ImageView)findViewById(R.id.imageView1);
        imageview2 = (ImageView)findViewById(R.id.imageView2);
        imageview1.setImageResource(R.drawable.mountain);
        imageview2.setImageResource(R.drawable.sea);
 
        imageview1.setVisibility(View.VISIBLE);
        imageview2.setVisibility(View.INVISIBLE);
 
 
        button.setOnClickListener(new View.OnClickListener(){
 
            @Override
            public void onClick(View view) {
                i = 1 - i;
 
                if ( i == 0 ){
                    imageview1.setVisibility(View.VISIBLE);
                    imageview2.setVisibility(View.INVISIBLE);
                }
                else{
                    imageview1.setVisibility(View.INVISIBLE);
                    imageview2.setVisibility(View.VISIBLE);
                }
 
            }
        });
    }
}
 

실행결과입니다. 처음 실행 시키면 왼쪽 ImageView에 지정된 이미지만 보여주고 다시 버튼을 클릭하면 오른쪽에 있는 이미지만 보여줍니다. 이 후 버튼을 클릭할 때마다 이미지를 번갈아 가며 보여주게 됩니다.