[Android] 21. 위젯 : 이미지 뷰와 이미지 버튼

# 위젯 : 이미지 뷰와 이미지 버튼

 

 

# 위젯 : 이미지 뷰

: 그림을 출력하는 위젯으로, 그림을 첨부하거나 화면을 구성할 때 이용

 

+ 이미지 뷰에서 사용할 그림 파일은 일반적으로 프로젝트의 [res]-[drawable] 폴더에 저장되어 있어야 함

-->  이미지로의 접근은 XML에서 "@drawable/그림 아이디" 형식으로 접근

-->  파일의 포멧은 png, jpg, gif를 모두 지원하지만 png, jpg 형식을 권장

 

 

- 이미지 뷰/버튼의 XML 속성

src	이미지의 경로
maxHeight / maxWidth	이미지 크기 지정
scaleType	이미지의 확대 및 축소 방식 지정

+ scaleType의 경우 center, fitEnd, fitStrart, matrix 등의 속성값이 존재하며, 지정된 값에 따라 이미지를 확대 및 축소하는 방식이 결정된다.

 

 

ex 1) 실습 1_이미지 뷰와 이미지 버튼 사용 실습

① picture_of_android.png 파일을 drawable 폴더에 저장

 

 

② activity_main.xml 파일을 아래와 같이 수정 후 프로그램의 정상 작동 여부 확인

프로그램이 정상적으로 작동됨을 확인

 

 

 

ex 2) 실습 2_이미지 뷰와 이미지 버튼을 사용하여 이미지와 이미지 정보 출력하기

① picture_of_android.png 파일을 drawable 폴더에 저장

 

 

② activity_main.xml 파일을 아래와 같이 수정

 

 

③ 프로그램의 정상 작동 여부 확인

프로그램이 정상적으로 작동됨을 확인

 

 

 

ex 3) 실습 3_음식 사진 보기 앱 제작하기

① rice.png, meat.png, pizza.png 파일을 모두 drawable 폴더에 저장

 

 

② activity_main.xml 파일을 아래와 같이 수정하기

 

 

③ MainActivity.kt 파일을 아래와 같이 수정하기

package com.example.image_integ_app

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.provider.MediaStore.Audio.Radio
import android.widget.*

class MainActivity : AppCompatActivity() {

    lateinit var text1 : TextView
    lateinit var text2 : TextView
    lateinit var chkAgree : CheckBox
    lateinit var rGroup1 : RadioGroup
    lateinit var rdoRice : RadioButton
    lateinit var rdoMeat : RadioButton
    lateinit var rdoPizza : RadioButton
    lateinit var btnOK : Button
    lateinit var imgFood : ImageView

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

        title ="음식 사진 보기"
        text1 = findViewById(R.id.Text1)
        chkAgree = findViewById(R.id.ChkAgree)

        text2 = findViewById(R.id.Text2)
        rGroup1 = findViewById(R.id.Rgroup1)
        rdoMeat = findViewById(R.id.RdoMeat)
        rdoPizza = findViewById(R.id.RdoPizza)
        rdoRice = findViewById(R.id.RdoRice)

        btnOK = findViewById(R.id.BtnOK)
        imgFood = findViewById(R.id.ImgFood)

        chkAgree.setOnCheckedChangeListener { buttonView, isChecked ->
            if (chkAgree.isChecked == true) {
                text2.visibility = android.view.View.VISIBLE
                rGroup1.visibility = android.view.View.VISIBLE
                btnOK.visibility = android.view.View.VISIBLE
                imgFood.visibility = android.view.View.VISIBLE
            } else {
                text2.visibility = android.view.View.INVISIBLE
                rGroup1.visibility = android.view.View.INVISIBLE
                btnOK.visibility = android.view.View.INVISIBLE
                imgFood.visibility = android.view.View.INVISIBLE
            }
        }
        btnOK.setOnClickListener {
            when(rGroup1.checkedRadioButtonId)
            {
                R.id.RdoRice -> imgFood.setImageResource(R.drawable.rice)
                R.id.RdoMeat -> imgFood.setImageResource(R.drawable.meat)
                R.id.RdoPizza -> imgFood.setImageResource(R.drawable.pizza)
                else -> Toast.makeText(applicationContext, "음식을 먼저 선택하시오.", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

 

 

④ 프로그램의 정상 작동 여부 확인

프로그램이 정상적으로 작동됨을 확인