Tistory View

Android Develop/image

안드로이드 ImageView의 ScaleType

What should I do? 2019. 12. 4. 04:37
반응형

안드로이드에서 이미지를 다룰 때, ImageView내에 어떻게 그려낼 지를 미리 정의해 둔 것이 있다. 실제 일일이 코딩으로 계산하며 만드는 시간을 줄여 주는 고마운 방식이다.

 

안드로이드 버전이 올라가면서 추가 될 수도 있겠지만, 총 8가지 방식이 있으며, 필요한 상황에 맞춰 바로 사용하면 된다. 하지만 정확한 동작방식을 일일이 테스트해보기는 시간이 걸리는 작업이니, 이 곳에 그 내용을 정리하도록 한다.

 

표로 정리를 해보았다.

표의 [XML]컬럼은 xml layout의 속성값이다. (android:scaleType="여기")

표의 [이미지 비율]컬럼은 가로/세로의 비율을 말한다.

Java

ScaleType.*

XML 크기변경

비율

설명
MATRIX 0 matrix 지맘대로 지맘 setImageMatrix() 함수를 이용하여 2차원용 Matrix(행렬/3x3)을 적용할 수 있다.
FIT_XY 1 fitXY 변경 변경 이미지가 View내부 전체에 꽉 채우는 방식, 따라서 원본 이미지가 찌그러질 수 있다.(대부분의 상황이 그렇다.)
FIT_START 2 fitStart

변경

유지

View의 최대크기로 변경한 다음, 좌측상단에 위치한다.

FIT_CENTER 3 fitCenter

변경

유지

View의 최대크기로 변경한 다음, 중앙에 위치한다.

FIT_END 4 fitEnd

변경

유지

View의 최대크기로 변경한 다음, 우측하단에 위치하게 된다.

CENTER 5 center 없음 유지 View의 중앙에 그린다.
CENTER_CROP 6 centerCrop

변경

유지

이미지가 비율을 유지하여 작은 쪽을 View의 끝에 맞춘다.

fit(Start, Center, End)는 이미지가 전부 View안으로 들어오지만, centerCrop은 잘려나가는 부분이 생긴다.

 

fit(Start, Center, End)는 View내에 빈공간이 생길 수 있지만,

centerCrop은 빈공간이 없다.

CENTER_INSIDE 7 centerInside

이미지가

큰경우만

축소

유지

이미지가 View보다 큰 경우 이미지를 축소하여 중앙에 놓는다.(fitCenter와 같다)

이미지가 View보다 작은 경우는 View의 중앙과 이미지의 중앙을 같게 한다.(center와 같다)

이렇게 글로 정리를 하니, 내가 정리했지만 뭔소린지 모르겠다. 느낌조차 안온다. 시간이 지나서 읽어보면 더더욱 이해가 안될 것 같다.

 

 

 

 

그래서 그림을 그려봤다.

왼쪽그림은 View보다 이미지가 작을 때이며, 오른쪽 그림은 View보다 이미지가 더 클 경우를 예로 다음과 같이 동작한다.

(이 경우 이미지가 더 크다는 가로나 세로중 하나만이라도 더 크면 크다고 보는 것이다.)

 

 

사용한 이미지 정보는 다음과 같다. 원본그림이 좌우로 퍼진 그림을 사용하였다.

View보다 작은 이미지의 크기 : 100x69

View보다 큰 이미지의 크기    : 250x173

View크기                           : 158x158

 

원본그림

 

 

ScaleType

 

 

위아래로 길쭉한 이미지의 경우는 위의 그림을 보고 상상하는 데 어려움이 없을 것이다.

CENTER_CROP의 경우 방향에 따라 크기가 View 맞추어지는 부분을 파악하면 된다.

 

기타사항

1. 기본값으로는 FIT_CENTER를 쓰는 것으로 알고 있는 데 확실하지는 않다.

2. 그냥 왼쪽 위를 기준으로 크기변화없이 그리려면 MATRIX를 쓰면된다.

 

 

 

 

좀 더 멋지고 이해하기 쉽게 만들려고 했는 데... 포토샵 실력이 처참한 관계로 실패해서 ... 죄송합니다..ㅠㅠ

 

 

 

 

 

반응형
Replies
NOTICE
RECENT ARTICLES
RECENT REPLIES
Total
Today
Yesterday
LINK
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Article Box