[안드로이드] ImageView 이미지 출력하기 예제(OnClick 이벤트처리)

목차

1. 안드로이드 스튜디오 앱 프로젝트 생성 예제 이전 포스팅 참고 학습
2. 안드로이드 Butotn OnClick 이벤트 처리 예제 이전 포스팅 참고 학습
3. 안드로이드 레이아웃 XML에 ImageView 추가 예제
4. 안드로이드 리소스에 이미지 파일 추가 예제
5. 안드로이드 버튼 클릭시 ImageView에 이미지 출력하기 예제

 

 

 

 

 

 

 

 

안드로이드 스튜디오 앱 프로젝트 생성 예제 이전 포스팅 참고 학습

이전 포스팅에서는 안드로이드 스튜디오 개발환경에서 새로운 신규 앱 프로젝트를 생성하여 빌드하는 방법을 알아보았습니다. 오늘 예제 또한 레이아웃 XML을 수정하고 Java코드를 작성하여 실행해야 결과를 확인할 수 있습니다.

 

하지만 아직 신규 앱 프로젝트 생성 방법을 모르신다면 아무래도 예제를 따라하는데 있어서 문제가 있을 수 밖에 없습니다. 따라서 아직 위와 같은 내용을 모르신다면 아래의 이전 포스팅을 참고하여 학습해주세요.

 

2023.08.22 - [Android] - [안드로이드] 프로젝트 생성 예제(로그출력, TextView)

[안드로이드] 프로젝트 생성 예제(로그출력, TextView)

 

 

 

 

 

안드로이드 Butotn OnClick 이벤트 처리 예제 이전 포스팅 참고 학습

오늘 예제에서는 버튼을 클릭할 때마다 새로운 이미지를 화면에 출력하는 예제입니다. 따라서 안드로이드에서 버튼 UI를 구성할 줄 알아야합니다. 추가로 OnClick 이벤트 처리 방법을 알아야 이미지를 교체할 수 있습니다.

 

따라서 아직 버튼 생성 및 이벤트 처리방법에 대해 모르신다면 아래의 이전 포스팅 링크를 참고하여 학습해주세요.

 

2020.06.23 - [Android] - 안드로이드 버튼 클릭 이벤트 처리 예제 - 3

안드로이드 버튼 클릭 이벤트 처리 예제 - 3

 

 

 

 

 

안드로이드 레이아웃 XML에 ImageView 추가 예제

아래는 앱의 레이아웃을 정의하는 XML 파일에 ImageView를 추가하는 예제입니다. ImageView는 이미지를 화면에 출력할 수 있는 컴포넌트 입니다. 실제 이미지를 연결하는 방법은 아래 예제에서 Java 코드를 통해 수행하겠습니다.

 

<?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">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/test_image"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/test_btn"
        android:text="BTN"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/test_btn2"
        android:text="BTN2"/>
</LinearLayout>

 

아직 이미지뷰에 이미지가 비어있어서 화면에 나타나지 않는 모습

 

 

 

 

 

안드로이드 리소스에 이미지 파일 추가 예제

안드로이드에서 이미지를 사용하려면 리소스에 이미지 파일을 추가해야합니다. 리소스 폴더는 res/drawable이며 추가하는 방법을 알아보도록 하겠습니다. PNG, JPEG 등의 이미지 파일을 추가하여 앱에서 활용할 수 있습니다.

 

스튜디오 왼쪽 프로젝트 메뉴에서 res->drable 디렉토리에 사진 파일을 마우스로 끌어 삽입한다. 위 예제에서는 "port.png", "rigi.jpg" 파일 2개를 추가한 모습

 

 

 

 

 

안드로이드 버튼 클릭시 ImageView에 이미지 출력하기 예제

아래는 MainActivity에서 Java 코드를 통해 버튼을 누를 때마다 이미지를 바꾸는 예제입니다.

 

package com.example.blog_test_app;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView image = (ImageView)findViewById(R.id.test_image);
        Button btn = (Button)findViewById(R.id.test_btn);
        Button btn2 = (Button)findViewById(R.id.test_btn2);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                image.setImageResource(R.drawable.port);
            }
        });
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                image.setImageResource(R.drawable.rigi);
            }
        });
    }
}

 

버튼을 누르면 이미지가 출력된다.