[Android/Kotlin] ImagePicker 라이브러리를 사용하여 이미지 보여주기(1)

오늘은 Android 앱 개발 시 종종 들어가는 기능으로 갤러리 또는 카메라를 통해 이미지를 가져오고 화면에 표시하기 위해 사용하는 라이브러리 소개와 구현 방법에 대해서 정리하려고 한다.

---

먼저, ImagePicker 라이브러리는 아래 라이브러리를 사용했다.

https://github.com/esafirm/android-image-picker 

GitHub - esafirm/android-image-picker: Image Picker for Android 🤖

 

라이브러리를 사용하기 위해서 project의 build.gradle에 아래와 같이 추가를 해주고,

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

app 모듈의 build.gradle에 아래와 같이 추가해준다. (버전은 라이브러리 링크로 들어가서 최신 버전을 찾아서 사용해도 된다.)

// ImagePicker
implementation 'com.github.esafirm:android-image-picker:3.0.0-beta1'

이제, Image Picker를 위한 UI를 먼저 만들어준다.

여러 장의 이미지를 선택하고 보여줄 수 있는데, 여러 장을 선택해서 이미지 슬라이드로 보여주는 건 다음 포스팅에서 정리하려고 한다.

 

1번 예제로는 프로필 사진을 업로드하는 UI로 구현해봤다.

프로필 이미지가 들어가는 ImageView와 업로드 하는 버튼을 배치하고, 업로드 버튼을 클릭했을 때 Image Picker가 화면에 올라오고, 이미지를 선택하면 선택한 이미지가 ImageView에 들어가는 형식이다.

 

ImagePickerLauncher의 인스턴스를 생성하여 갤러리에서 이미지를 선택했을 때, 결과를 처리하는 부분을 먼저 구현한다.

갤러리에서 이미지를 선택하게 되면, 갤러리 선택 화면이 사라지면서 callback으로 result에 선택한 이미지가 파라미터로 들어오게 된다.

여러 장 또는 1장만 선택할 수 있게끔 하는 옵션이 있기 때문에 result는 List 타입으로 들어오게 된다.

private lateinit var launcher: ImagePickerLauncher
	
launcher = registerImagePicker { result ->
	if (result.isNotEmpty()) {
		val profileImage = result.first() // 1장만 선택하기 때문에
        
		// 이미지 Uri를 통해 이미지뷰에 이미지를 넣어준다.
		setProfileImage(profileImage.uri)
	}
}

프로필은 1장만 선택이 가능해야 하기 때문에 당연히 result로  List 타입이지만 1개가 들어오게 되고

그 이미지의 URI를 참조하여 Glide 라이브러리로 ImageView에 이미지를 뿌려주도록 구현했다.

private fun setProfileImage(imageUri: Uri) {
	Glide.with(this).load(imageUri).circleCrop().into(profileImageView)
}

 

결과를 어떻게 처리할지 구현을 했으면 이제, 프로필 사진 업로드 버튼에 클릭 이벤트를 넣어준다.

ImagePicker에 필요한 옵션들을 넣어 ImagePickerConfig를 만들어준다.

그런 다음 ImagePickerLauncher에 Config 값들을 넣어주고 실행되도록 한다.

        private lateinit var launcher: ImagePickerLauncher

        // 프로필 사진 업로드 버튼 클릭 이벤트
        profileButton.setOnClickListener {
            val config = ImagePickerConfig {
                mode = ImagePickerMode.SINGLE // 1장만 선택
                isFolderMode = false
                isIncludeVideo = false
                arrowColor = Color.WHITE
                imageTitle = "이미지를 선택하세요"
                doneButtonText = "추가" // returnMode가 NONE인 경우 표시됨
                isShowCamera = true
                returnMode = ReturnMode.ALL
            }

            launcher.launch(config)
        }

사용한 옵션들을 간단하게 설명하자면

• mode : 위에서 말했듯이 여러 장 또는 1장 선택을 위한 옵션
• isFolderMode : 갤러리 화면에서 이미지를 폴더 형식으로 묶을지 아니면 한 장씩 전체적으로 나오게 할지 설정하는 옵션
• isIncludeVideo :  갤러리 화면에서 비디오타입의 파일을 표시할지에 대한 옵션
• arrowColor : 뒤로가기 버튼의 색상을 설정하는 옵션
• imageTitle : 상단 타이틀바에 넣을 텍스트를 설정하는 옵션
• doneButtonText : 이미지 선택을 완료하는 버튼의 텍스트를 설정하는 옵션
• isShowCamera : 상단 우측에 카메라 아이콘을 표시할지에 대한 옵션으로 true 시 카메라를 통해 바로 촬영한 이미지를 추가할 수 있음
• returnMode : 이미지를 선택하거나, 카메라로 촬영했을 때 바로 결과를 반환할지에 대한 옵션으로 SINGLE MODE일 때 ALL 값을 주면 이미지를 선택하자마자 또는 카메라로 촬영하자마자 바로 Callback이 들어오게 됨
  (기본 값은 없음 - Done 버튼 클릭 시 Callback이 들어옴)

 

일단 프로필 사진을 업로드 하는 예제를 만들 때 사용한 옵션들은 이 정도이고, 더 많은 옵션은 라이브러리 페이지에서 확인할 수 있다.

 

프로필 사진 업로드 버튼 클릭 시 갤러리 화면으로 이동 / 이미지 선택 시 ImageView에 표시

카메라 버튼 클릭 시 카메라 화면으로 전환

 

이번 포스팅에서는 사진 1장만 가져와서 단순하게 ImageView에 넣어주는 것에 대해서 정리를 했는데,

다음 포스팅에서는 여러장을 가져와서 이미지 슬라이드를 구현하는 것을 이어서 정리하려고 한다.

 

이 포스팅이 도움이 되셨다면 ❤️를 눌러주시거나, 광고 한번 클릭 부탁드립니다!👍🏻

 

 

2022.03.01 - [개발 공부/[Android 개발]] - [Android/Kotlin] ImagePicker 라이브러리를 사용하여 이미지 슬라이드 만들기(2)

[Android/Kotlin] ImagePicker 라이브러리를 사용하여 이미지 슬라이드 만들기(2)