[Kotlin] 갤러리에서 이미지 받아서 1:1 비율 원형으로 띄우기

코틀린으로 갤러리에서 이미지 불러오기

이걸로 이미지 가져왔는데 이대로 하면 오른쪽으로 회전되는 문제가 발생했다.

갤러리에서 선택한 사진의 Uri를 이용해 ImageView에 업로딩 시키는 소스

Glide.with(this).load(Uri).into(이미지뷰);

"Uri" 부분에 필요한 Uri 변수를 넣고 "이미지뷰" 부분에 이미지뷰 id값을 넣으면 적용된다.

 

Android) ImageView 사진이 자동으로 회전될 때 해결법 - Glide 라이브러리 사용하기

 

val bitmap = MediaStore.Images.Media.getBitmap(contentResolver, currentImageUrl)
binding.ivMypageProfile.setImageBitmap(bitmap)

이 부분을 glide로 변경해줬다.

 

이제는 1:1 비율로 받아와야한다.

android:scaleType="centerCrop"

centerCrop으로 설정해주면 1:1 비율로 설정된다.

 

 

안드로이드 이미지뷰 영역에 맞게 이미지를 확대 또는 축소하는 방법. [scaleType] (How to Scale the Imag

 

원형으로 받아오는 것은 간단히 .circleCrop() 코드 하나만 추가해주면 된다.

Glide.with(this).load(currentImageUrl).circleCrop().into(binding.ivMypageProfile)

 

안드로이드 Glide와 CircleImageView로 원형 이미지 표시

 

최종 코드

private val OPEN_GALLERY = 1
    private fun openGallery() {
        val intent = Intent(Intent.ACTION_GET_CONTENT)
        intent.setType("image/*")
        startActivityForResult(intent, OPEN_GALLERY)
    }

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

        if (resultCode == Activity.RESULT_OK) {
            if (requestCode == OPEN_GALLERY) {
                var currentImageUrl: Uri? = data?.data

                try {
                    Glide.with(this).load(currentImageUrl).circleCrop().into(binding.ivMypageProfile)
                } catch (e: Exception) {
                    e.printStackTrace()
                }
            }
        } else {
        }
    }

 

 

다음은 Glide에 대해 공부하기 위해 아래 사이트들에서 가져온 글이다.

 

[Android] Glide 로 이미지 Load하기

[Android] Glide 라이브러리 사용하기

 

Glide는 안드로이드에서 이미지를 빠르고 효율적으로 불러올 수 있게 도와주는 라이브러리이다. 사용 방법도 간단하고 확장성도 넓어서 이미 메이저하게 사용되고 있는 라이브러리이다. 이미지, Gif, 비디오 스틸의 로딩과 디코딩, 캐싱 등의 다양한 API를 사용할 수 있다. 기본적으로는 커스텀하게 만들어진 HttpUrlConnection 기반이지만, Volley나 OkHttp 라이브러리를 사용할 수 있는 플러그인도 지원한다.

Glide는 어떠한 종류의 이미지이더라도 빠르고 부드럽게 스크롤 하는 것을 목적으로 한다. 

뷰에 이미지 로드하기

특별한 옵션 없이 단순히 뷰에 이미지를 넣는 것이라면 with(), load(), into() 로도 표현할 수 있다.

/* Activity에서 사용할 경우 */

Glide.with(this)
    .load(R.drawable.img_file_name)
    .into(imageView)

/* ViewHolder에서 사용할 경우 */

Glide.with(itemView)
    .load(R.drawable.img_file_name)
    .into(itemView.imageView)

 

drawable에 img_file_name.jpeg 파일을 넣고 Glide로 불러오는 방식을 사용해보았다. RecyclerView에서 사용하려면 ViewHolder에서 바인드할 때 같은 방식으로 불러주면 된다.

 

각 함수의 기능을 간단히 살펴보자.

• with() : View, Fragment 혹은 Activity로부터 Context를 가져온다.
• load() : 이미지를 로드한다. 다양한 방법으로 이미지를 불러올 수 있다. (Bitmap, Drawable, String, Uri, File, ResourId(Int), ByteArray)
• into() : 이미지를 보여줄 View를 지정한다.

 

위의 함수들은 Glide의 뼈대가 되는 기능이다. Glide는 단순히 로딩만 도와주는 것이 아니라, 에러 상황이 발생한다던가 후가공이 필요할 때에 손쉽게 처리할 수 있도록 함수를 제공한다.

예시로, 이미지 로딩 전/후 처리에 대한 함수를 보자.

Glide.with(this)
    .load(R.drawable.img_file_name)
    .placeholder(R.drawable.img_file_place_holder)
    .error(R.drawable.img_file_error)
    .fallback(R.drawable.img_file_no_img)
    .into(imageView)

• placeholder() : Glide 로 이미지 로딩을 시작하기 전에 보여줄 이미지를 설정한다.
• error() : 리소스를 불러오다가 에러가 발생했을 때 보여줄 이미지를 설정한다.
• fallback() : load할 url이 null인 경우 등 비어있을 때 보여줄 이미지를 설정한다.

Glide의 모토가 빠르고 부드러운 스크롤을 제공하는 것이라고 한 것을 기억한다면, 위 함수가 이해가 될 것이다. 하얀 화면을 보여주는 것보다 placeholder나 no image 파일을 보여준다면 사용자 입장에서 더 좋은 UX를 경험할 수 있을 것이다.

 

또 다른 장점으로는, Glide에서는 기본적으로 이미지의 URL을 이용해 메모리와 디스크에 캐싱을 한다.

Glide.with(this)
    .load(R.drawable.img_file_name)
    .skipMemoryCache(true)
    .diskCacheStrategy(DiskCacheStrategy.NONE)
    .into(imageView)

• skipMemoryCache() : 메모리에 캐싱하지 않으려면 true로 준다.
• diskCacheStrategy() : 디스크에 캐싱하지 않으려면 DiskCacheStrategy.NONE로 준다. 다음과 같은 옵션이 있다. (ALL, AUTOMATIC, DATA, NONE, RESOURCE)

이로써 메모리 사용과 서버 통신을 효율적으로 할 수 있게 해준다.

 

 

1. override()

 override 메서드로 이미지 사이즈를 조절해줄 수 있다. 사이즈를 조절하며 이미지 로딩 속도를 최적화할 수 있다. 메모리를 절약하고 싶을 때 유용하게 사용된다.

Glide.with(this)
    .load("이미지 url")
    .override(100, 100)
    .into(imageView)

 

2. asGif()

 gif 이미지도 로딩할 수 있다.

Glide.with(this)
    .asGif()
    .load("gif 이미지 url")
    .into(imageView)

 

3. thumbnail()

 원본 이미지를 썸네일로 사용한다. 지정한 % 비율만큼 미리 이미지를 가져와서 보여준다. 0.1f로 지정했다면 실제 이미지 크기 중 10%만 먼저 가져와서 흐릿하게 보여준다.

Glide.with(this)
    .load("이미지 url")
    .thumbnail(0.1f)
    .into(imageView)