[모바일 프로그래밍] 이미지뷰와 이미지버튼 실습

애완동물 사진 보기(이미지뷰와 이미지버튼)

📂 activity_main.xml : 화면의 구조와 모양 정의

- 이 파일은 앱의 화면이 어떻게 생겼는지를 정의하는 설계도

- LinearLayout을 사용해 위젯(버튼, 텍스트 등)들을 세로로 차례대로 쌓는 구조

• 초기 화면: 처음에는 "선택을 시작하시겠습니까?" 라는 TextView와 "시작함" CheckBox만 보임
• 숨겨진 요소: 나머지 위젯들(TextView, RadioGroup, Button, ImageView)은 android:visibility="invisible" 속성 때문에 처음에는 화면에 보이지 않음

<?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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="선택을 시작하시겠습니까?"
        android:textSize="20sp"
        />

    <CheckBox
        android:id="@+id/ChkAgree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="시작함"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="좋아하는 애완동물은?"
        android:textSize="20sp"
        android:visibility="invisible"
        />

    <RadioGroup
        android:id="@+id/rGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible">

        <RadioButton
            android:id="@+id/rdoDog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="강아지" />

        <RadioButton
            android:id="@+id/rdoCat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="고양이" />

        <RadioButton
            android:id="@+id/rdoRabbit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="토끼" />

    </RadioGroup>

    <Button
        android:id="@+id/btnFinish"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="선택 완료"
        android:visibility="invisible"/>

    <ImageView
        android:id="@+id/imgPet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"/>

</LinearLayout>

---

📂 MainActivity.kt : 앱의 실제 동작 로직 구현

- activity_main.xml이라는 설계도를 실제로 움직이게 하는 두뇌 역할을 함

- 사용자가 화면을 터치하거나 값을 바꿀 때 어떤 일이 일어날지를 정의

주요 기능 2가지

1. 체크박스 선택에 따른 화면 변화
   • binding.ChkAgree.setOnCheckedChangeListener 코드를 통해 "시작함" 체크박스의 상태 변경을 감지
   • 체크하면 (true): 숨겨져 있던 동물 선택 RadioGroup, "선택 완료" Button, 이미지가 보일 ImageView가 화면에 나타남(View.VISIBLE).
   • 체크를 해제하면 (false): 나타났던 위젯들이 다시 사라짐(View.INVISIBLE).
2. "선택 완료" 버튼 클릭 시 이미지 변경
   • binding.btnFinish.setOnClickListener 코드를 통해 "선택 완료" 버튼 클릭을 감지
   • when 문을 사용해 RadioGroup에서 어떤 동물이 선택되었는지 확인
   • 선택된 동물에 따라 binding.imgPet.setImageResource(...) 코드가 해당 동물의 이미지(예: R.drawable.dog)를 ImageView에 보여줌

package com.cookandroid.project4_2

import android.os.Bundle
import android.view.View
import android.widget.CompoundButton
import androidx.appcompat.app.AppCompatActivity
import com.cookandroid.project4_2.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    // onCreate는 액티비티(화면)가 처음 생성될 때 단 한 번 호출되는 메서드입니다.
    // 모든 초기화 로직은 여기서 시작됩니다.
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // View Binding을 사용하여 XML 레이아웃 파일(activity_main.xml)과 연결합니다.
        // 'binding' 객체를 통해 XML에 있는 모든 위젯(버튼, 텍스트 등)에 접근할 수 있습니다.
        val binding = ActivityMainBinding.inflate(layoutInflater)

        // setContentView()는 화면에 표시할 뷰(View)를 설정합니다.
        // 여기서는 binding.root, 즉 activity_main.xml의 최상위 레이아웃을 화면으로 설정합니다.
        setContentView(binding.root)

        // 액티비티(앱 화면)의 제목을 "애완동물 사진 보기"로 설정합니다.
        setTitle("애완동물 사진 보기")

        // '시작함' 체크박스(ChkAgree)의 체크 상태가 변경될 때마다 호출될 리스너를 설정합니다.
        binding.ChkAgree.setOnCheckedChangeListener(object : CompoundButton.OnCheckedChangeListener {
            // onCheckedChanged는 체크박스의 상태가 바뀔 때 (체크되거나 해제될 때) 자동으로 호출됩니다.
            // p0: 상태가 변경된 체크박스 자체
            // p1: 체크박스가 현재 '체크된 상태'인지 여부 (true: 체크됨, false: 해제됨)
            override fun onCheckedChanged(p0: CompoundButton, p1: Boolean) {
                // 만약 체크박스가 체크되었다면
                if (binding.ChkAgree.isChecked() == true) {
                    // 숨겨져 있던 위젯들을 화면에 보이도록 설정합니다.
                    binding.text2.visibility = View.VISIBLE     // "좋아하는 애완동물은?" 텍스트
                    binding.rGroup1.visibility = View.VISIBLE   // 동물 선택 라디오 그룹
                    binding.btnFinish.visibility = View.VISIBLE // "선택 완료" 버튼
                    binding.imgPet.visibility = View.VISIBLE    // 이미지가 표시될 뷰
                } else {
                    // 그렇지 않고, 체크박스가 해제되었다면
                    // 화면에 보였던 위젯들을 다시 보이지 않도록 설정합니다.
                    binding.text2.visibility = View.INVISIBLE
                    binding.rGroup1.visibility = View.INVISIBLE
                    binding.btnFinish.visibility = View.INVISIBLE
                    binding.imgPet.visibility = View.INVISIBLE
                }
            }
        })

        // "선택 완료" 버튼(btnFinish)이 클릭되었을 때 호출될 리스너를 설정합니다.
        binding.btnFinish.setOnClickListener {
            // 라디오 그룹(rGroup1)에서 현재 선택된 라디오 버튼의 ID를 확인하여
            // when 문으로 각 경우에 따라 다른 코드를 실행합니다.
            when (binding.rGroup1.checkedRadioButtonId) {
                // '강아지' 라디오 버튼(rdoDog)이 선택되었다면
                R.id.rdoDog ->
                    // 이미지 뷰(imgPet)에 강아지 이미지(R.drawable.dog)를 설정합니다.
                    binding.imgPet.setImageResource(R.drawable.dog)

                // '고양이' 라디오 버튼(rdoCat)이 선택되었다면
                R.id.rdoCat ->
                    // 이미지 뷰(imgPet)에 고양이 이미지(R.drawable.cat)를 설정합니다.
                    binding.imgPet.setImageResource(R.drawable.cat)

                // '토끼' 라디오 버튼(rdoRabbit)이 선택되었다면
                R.id.rdoRabbit ->
                    // 이미지 뷰(imgPet)에 토끼 이미지(R.drawable.rabbit)를 설정합니다.
                    binding.imgPet.setImageResource(R.drawable.rabbit)
            }
        }
    }
}

---

📂 build.gradle.kts : 프로젝트의 설정 및 라이브러리 관리

- 이 파일은 앱을 만들고 실행하는 데 필요한 각종 설정을 담고 있는 설정 파일

• viewBinding = true:
  - 이 설정이 가장 중요
  - XML 파일의 위젯 ID를 binding.위젯ID 형태로 MainActivity.kt에서 쉽게 접근할 수 있게 해주는 'View Binding' 기능
  - 이 덕분에 findViewById 없이 편리하게 코드를 작성할 수 있음
• dependencies: appcompat, material 등 앱을 만드는 데 필요한 안드로이드 기본 라이브러리들이 무엇인지 명시

plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
}

android {
    namespace = "com.cookandroid.project4_2"
    compileSdk = 36

    defaultConfig {
        applicationId = "com.cookandroid.project4_2"
        minSdk = 24
        targetSdk = 36
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }
    kotlinOptions {
        jvmTarget = "11"
    }

    buildFeatures {
        viewBinding = true
    }
}

dependencies {

    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.appcompat)
    implementation(libs.material)
    implementation(libs.androidx.activity)
    implementation(libs.androidx.constraintlayout)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
}

---

✨ 전체 동작 흐름 요약

1. 앱 실행: 사용자에게는 "선택을 시작하시겠습니까?" 문구와 "시작함" 체크박스만 보임
2. "시작함" 체크: 사용자가 체크박스를 선택하면, 숨겨져 있던 "좋아하는 애완동물은?" 문구, 동물 라디오 버튼, "선택 완료" 버튼이 화면에 나타남
3. 동물 선택 및 완료: 사용자가 강아지, 고양이, 토끼 중 하나를 선택하고 "선택 완료" 버튼을 누름
4. 이미지 표시:
   - 선택한 동물의 이미지가 화면 하단에 나타남
   - 만약 체크박스를 다시 해제하면 모든 것이 원래대로 사라짐