[Kotlin][Android] 앨범 사진 이미지 뷰에 띄워주기

안녕하세요. 이번 시간에는 앨범 사진을 이미지 뷰에 띄워주는 것을 구현해보도록 하겠습니다. 저번에 카메라에서 찍은 사진을 이미지 뷰에 띄워준 포스팅의 연장선입니다.

아직 전 포스팅을 안 보신 분이 있다면 먼저 읽고 오면 좋겠네요 ^^

https://stickode.tistory.com/302

개발 순서는 다음과 같습니다.

1. XML 파일 수정하기

2. 권한 승인 요청하기

3. 권한 승인 시 앨범 실행

4. 앨범 선택 이미지 uri 값을 받아 이미지뷰에 띄워주기.

 

 

1. XML 파일 수정하기

<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/buttonCamera"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:text="카메라"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/buttonAlbum"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/buttonAlbum"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        app:layout_constraintStart_toEndOf="@id/buttonCamera"
        android:text="앨범"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/imagePreview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/buttonCamera"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />


</androidx.constraintlayout.widget.ConstraintLayout>

앨범 버튼 하나 추가했습니다.

2. 권한 승인 요청하기

 

권한을 요청하기 전에 필요한 권한을 Manifest에 추가해주도록 합시다.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

앨범 버튼을 클릭했을 때 권한 요청을 하도록 아래와 같이 작성해줍시다.

 

val PERMISSION_Album = 101 // 앨범 권한 처리


// 앨범 버튼 클릭 리스너 구현
val albumBtn = findViewById<Button>(R.id.buttonAlbum) as Button
  	albumBtn.setOnClickListener{
  	requirePermissions(arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE), PERMISSION_Album)
}

 

3. 권한 승인 시 앨범 실행

권한이 승인 된 경우에는 openGallaery가 실행되고 권한을 거부당한 경우에는 토스트 메시지가 띄워주도록 하였습니다.

/** 사용자가 권한을 승인하거나 거부한 다음에 호출되는 메서드
     * @param requestCode 요청한 주체를 확인하는 코드
     * @param permissions 요청한 권한 목록
     * @param grantResults 권한 목록에 대한 승인/미승인 값, 권한 목록의 개수와 같은 수의 결괏값이 전달된다.
     * */
    override fun onRequestPermissionsResult(
        requestCode: Int,
        permissions: Array<out String>,
        grantResults: IntArray
    ) {
        if (grantResults.all { it == PackageManager.PERMISSION_GRANTED }) {
            permissionGranted(requestCode)
        } else {
            permissionDenied(requestCode)
        }
    }

    private fun permissionGranted(requestCode: Int) {
        when (requestCode) {
            PERMISSION_CAMERA -> openCamera()
            PERMISSION_Album -> openGallery()
        }
    }

    private fun permissionDenied(requestCode: Int) {
        when (requestCode) {
            PERMISSION_CAMERA -> Toast.makeText(
                this,
                "카메라 권한을 승인해야 카메라를 사용할 수 있습니다.",
                Toast.LENGTH_LONG
            ).show()

            PERMISSION_Album -> Toast.makeText(
                this,
                "저장소 권한을 승인해야 앨범에서 이미지를 불러올 수 있습니다.",
                Toast.LENGTH_LONG
            ).show()
        }
    }
    
    fun openGallery() {
        val intent = Intent(Intent.ACTION_PICK)
        intent.type = MediaStore.Images.Media.CONTENT_TYPE
        startActivityForResult(intent, REQUEST_STORAGE)

    }

4. 앨범 선택 이미지 uri 값을 받아 이미지뷰에 띄워주기.

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if (resultCode == RESULT_OK) {
            when (requestCode) {
                REQUEST_CAMERA -> {
                    realUri?.let { uri ->
                        imageView.setImageURI(uri)
                    }
                }
                REQUEST_STORAGE -> {
                    data?.data?.let { uri ->
                        imageView.setImageURI(uri)
                    }
                }
            }
        }
    }

결과 화면입니다.

 

 

코드 중간에 나오는 Logger 라이브러리는 스틱코드를 참고하시면 가져다 쓸 수 있습니다.

https://stickode.tistory.com/275

https://stickode.com/detail.html?no=2559 

스틱코드