Android (이미지뷰, 이미지버튼, 속성, drawable, 애완동물 사진 앱, 연습문제, 라디오버튼 이벤트 등록, 이미지 출력, 안드로이드 버전 이미지 앱)

1. 이미지뷰, 이미지버튼

 - 속성

 - fitXY : 가로세로 상관없이 레이아웃의 각면의 꽉 차게 출력

 - fitCenter : 가로세로 길이 중간에 맞게 출력

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#ffffff"
        android:src="@drawable/q10"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:src="@drawable/q10"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#ffffff"
        android:scaleType="fitXY"
        android:src="@drawable/q10"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="#ffffff"
        android:scaleType="fitCenter"
        android:src="@drawable/q10"/>

</LinearLayout>

 

 

2. 애완동물 사진 보기 앱 만들기

 - cat, dog, rabbit 이미지 drawable 폴더에 추가

<?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"
    android:background="#F2F6ED"
    android:padding="30dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="선택을 시작하겠습니까?"
        />

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

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

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

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

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

            android:id="@+id/radioButtonRabbit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="토끼"/>
    </RadioGroup>

    <Button
        android:id="@+id/btnOK"
        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>

 

1) 변수 선언

lateinit var textView01: TextView
lateinit var checkBoxAgree : CheckBox
lateinit var textView02: TextView
lateinit var radioGroup: RadioGroup
lateinit var radioButtonDog : RadioButton
lateinit var radioButtonCat : RadioButton
lateinit var radioButtonRabbit : RadioButton
lateinit var btnOK : Button
lateinit var imgPet : ImageView

 

2) 변수 ID 할당

textView01 = findViewById(R.id.textView01)
checkBoxAgree = findViewById(R.id.checkBoxAgree)
textView02 = findViewById(R.id.textView02)
radioGroup = findViewById(R.id.radioGroup)
radioButtonDog = findViewById(R.id.radioButtonDog)
radioButtonCat = findViewById(R.id.radioButtonCat)
radioButtonRabbit = findViewById(R.id.radioButtonRabbit)
btnOK = findViewById(R.id.btnOK)
imgPet = findViewById(R.id.imgPet)

 

3) 시작 체크 여부에 따라 요소 출력 이벤트 등록

// 시작 체크 켜짐 안 켜짐 이벤트 등록
checkBoxAgree.setOnCheckedChangeListener { buttonView, isChecked ->
    if (isChecked) {
        textView02.visibility = View.VISIBLE
        radioGroup.visibility = View.VISIBLE
        btnOK.visibility = View.VISIBLE
        imgPet.visibility = View.VISIBLE
    } else {
        textView02.visibility = View.INVISIBLE
        radioGroup.visibility = View.INVISIBLE
        btnOK.visibility = View.INVISIBLE
        imgPet.visibility = View.INVISIBLE
    }
}

 

4) '선택완료'를 클릭하면 동작하는 리스너를 정의

// '선택완료'를 클릭하면 동작하는 리스너를 정의
btnOK.setOnClickListener {
    when (radioGroup.checkedRadioButtonId) {
        R.id.radioButtonDog -> imgPet.setImageResource(R.drawable.dog)
        R.id.radioButtonCat -> imgPet.setImageResource(R.drawable.cat)
        R.id.radioButtonRabbit -> imgPet.setImageResource(R.drawable.rabbit)
        else -> Toast.makeText(applicationContext,
        "동물을 먼저 선택하세요", Toast.LENGTH_SHORT).show()
    }
}

 

5) 전체 코드

package kr.jeongmo.animal_project

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class MainActivity : AppCompatActivity() {
    // 변수 선언
    lateinit var textView01: TextView
    lateinit var checkBoxAgree : CheckBox
    lateinit var textView02: TextView
    lateinit var radioGroup: RadioGroup
    lateinit var radioButtonDog : RadioButton
    lateinit var radioButtonCat : RadioButton
    lateinit var radioButtonRabbit : RadioButton
    lateinit var btnOK : Button
    lateinit var imgPet : ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        title = "Animal Gallery"
        
        // 변수 Id 할당
        textView01 = findViewById(R.id.textView01)
        checkBoxAgree = findViewById(R.id.checkBoxAgree)
        textView02 = findViewById(R.id.textView02)
        radioGroup = findViewById(R.id.radioGroup)
        radioButtonDog = findViewById(R.id.radioButtonDog)
        radioButtonCat = findViewById(R.id.radioButtonCat)
        radioButtonRabbit = findViewById(R.id.radioButtonRabbit)
        btnOK = findViewById(R.id.btnOK)
        imgPet = findViewById(R.id.imgPet)

        // 시작 체크 켜짐 안 켜짐 이벤트 등록
        checkBoxAgree.setOnCheckedChangeListener { buttonView, isChecked ->
            if (isChecked) {
                textView02.visibility = View.VISIBLE
                radioGroup.visibility = View.VISIBLE
                btnOK.visibility = View.VISIBLE
                imgPet.visibility = View.VISIBLE
            } else {
                textView02.visibility = View.INVISIBLE
                radioGroup.visibility = View.INVISIBLE
                btnOK.visibility = View.INVISIBLE
                imgPet.visibility = View.INVISIBLE
            }
        }

        // '선택완료'를 클릭하면 동작하는 리스너를 정의
        btnOK.setOnClickListener {
            when (radioGroup.checkedRadioButtonId) {
                R.id.radioButtonDog -> imgPet.setImageResource(R.drawable.dog)
                R.id.radioButtonCat -> imgPet.setImageResource(R.drawable.cat)
                R.id.radioButtonRabbit -> imgPet.setImageResource(R.drawable.rabbit)
                else -> Toast.makeText(applicationContext,
                "동물을 먼저 선택하세요", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

3. 연습문제

<?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"
    android:padding="30dp"
    android:background="#F2F6ED"
    tools:context=".Switch_MainActivity">

    <TextView
        android:id="@+id/textView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="선택을 시작하겠습니까?"
        />

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

    <TextView
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:text="좋아하는 안드로이드 버전은?" />

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

        <RadioButton
            android:id="@+id/androidOreo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OREO"/>

        <RadioButton
            android:id="@+id/androidPie"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="PIE"/>

        <RadioButton
            android:id="@+id/androidQ10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Q10"/>
    </RadioGroup>
    
    <ImageView
        android:id="@+id/imgAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        />

    <Button
        android:id="@+id/btnEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="종료"
        android:visibility="invisible"
        />

    <Button
        android:id="@+id/btnRe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="처음으로"
        android:visibility="invisible"
        />
    
</LinearLayout>

 

package kr.jeongmo.animal_project

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class Switch_MainActivity : AppCompatActivity() {
    // 변수 선언
    lateinit var textView01 : TextView
    lateinit var switchAgree : Switch
    lateinit var textView02 : TextView
    lateinit var radioGroup02 : RadioGroup
    lateinit var androidOreo : RadioButton
    lateinit var androidPie : RadioButton
    lateinit var androidQ10 : RadioButton
    lateinit var imgAndroid : ImageView
    lateinit var btnEnd : Button
    lateinit var btnRe : Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_switch_main)

        title = "Android Favorite Version"

        // 변수 Id 할당
        textView01 = findViewById(R.id.textView01)
        switchAgree = findViewById(R.id.switchAgree)
        textView02 = findViewById(R.id.textView02)
        radioGroup02 = findViewById(R.id.radioGroup02)
        androidOreo = findViewById(R.id.androidOreo)
        androidPie = findViewById(R.id.androidPie)
        androidQ10 = findViewById(R.id.androidQ10)
        imgAndroid = findViewById(R.id.imgAndroid)
        btnEnd = findViewById(R.id.btnEnd)
        btnRe = findViewById(R.id.btnRe)

        // 스위치로 요소 출력 이벤트 등록
        switchAgree.setOnCheckedChangeListener { buttonView, isChecked ->
            if (isChecked) {
                textView02.visibility = View.VISIBLE
                radioGroup02.visibility = View.VISIBLE
                imgAndroid.visibility = View.VISIBLE
                btnEnd.visibility = View.VISIBLE
                btnRe.visibility = View.VISIBLE
            } else{
                textView02.visibility = View.INVISIBLE
                radioGroup02.visibility = View.INVISIBLE
                imgAndroid.visibility = View.INVISIBLE
                btnEnd.visibility = View.INVISIBLE
                btnRe.visibility = View.INVISIBLE
            }
        }

        // 라디오 버튼 이벤트 등록 (클릭 시 해당 이미지 출력함)
        androidOreo.setOnClickListener {
            imgAndroid.setImageResource(R.drawable.oreo)
        }
        androidPie.setOnClickListener {
            imgAndroid.setImageResource(R.drawable.pie)
        }
        androidQ10.setOnClickListener {
            imgAndroid.setImageResource(R.drawable.q10)
        }

        btnEnd.setOnClickListener {
            finish()
        }

        btnRe.setOnClickListener {
            switchAgree.isChecked = false
            imgAndroid.setImageResource(0)
            radioGroup02.clearCheck()
        }
    }
}

---

공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.

부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.

읽어주셔서 감사합니다 :)