프로젝트를 하다가 쇼핑몰 상세페이지 처럼 긴 이미지를 보여줘야 할 때가 있다. 하지만 안드로이드의 ImageView의 ScaleType에는 이미지를 어떠한 기준으로 자르거나 이미지의 비율은 유지하지만 잘리거나 찌그러지는 등의 옵션만이 존재했다.
나는 이미지의 가로는 디바이스의 가로를 가득 채우고, 이미지의 세로는 원본 이미지에서 이미지의 가로가 늘어나거나 줄어든 값에 대해 세로 비율을 변화시켜서 원본 비율을 유지하면서 가로를 가득 채우는 ImageView가 필요했다.
ImageView의 ScaleType를 fitXY로 설정합니다.
먼저, ImageView를 상속받고, 이미지가 그려질때 setLayoutParams(drawable : Drawable?) 메소드를 실행합니다.
파라미터로 전달된 drawable 객체에서 가로(intrinsicWidth), 세로(intrinsicHeight) 길이를 알 수 있습니다.
그리고 deviceSize를 가져와서 ImageView의 width는 디바이스의 가로 길이로 설정하고, height는 디바이스의 가로 길이를 원본 이미지의 비율로 나눈 값을 소숫점 첫째자리에서 반올림한 값으로 설정합니다.
이렇게하면 ImageView의 크기가 변하게되고, 그 변한 ImageView에 이미지가 가득 채워지게 됩니다.
+2022.02.17 추가
이미지를 Base64인코딩 방식으로 string으로 변환하여 서버에서 주고받다가, 이미지를 url로 주고받는 방식으로 변경했더니 위에 포스팅한 내용대로 이미지 비율이 유지되지 않았습니다. 이미지를 url로 받아 Glide로 이미지를 표시하는 방법이 아닌, bitmap으로 변환하여 이미지뷰에 표시하셔야 합니다.
Glide의 의존성
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
잘못된 구현 방식
요렇게 했더니 이미지 비율이 의도한대로 되지 않았다.
올바른 구현방식
이렇게 url로 받은 이미지를 bitmap으로 변환하여 imageView.setBitmapImage(bitmap)로 해주셔야 이미지 비율이 유지가 됩니다.