안녕하세요. 오늘 포스팅 주제는 빈번하게 사용하는 'ImageView' 입니다. ImageView의 많은 기능중 Scale Type을 정리하겠습니다. |
Scale Type
ImageView 크기 조절을 위한 옵션으로 정해진 사이즈의 이미지를 여러 디바이스에 맞춰야 할 때 기본적으로 사용됩니다. 모든 디바이스의 이미지 뷰를 완벽하게 맞추는건 어렵고, 효율이 떨어집니다. 그렇기 때문에 하나의 이미지로 최대한 많은 파편화 이슈를 해결하고, 이질감이 느껴지지 않도록 노력들을 하는데, 그 중에서 가장 대표적이면서 간단한 작업이 'Scale Type' 조정이라고 생각합니다.
Scale Type Value
스케일링 옵션은 총 8개로 다음과 같습니다. 예시 사진은 설명 아래 기재 하겠습니다.
ImageView.ScaleType.CENTER |
원본 크기 그대로 이미지를 중앙에 맞춥니다. |
ImageView.ScaleType.CENTER_CROP |
넓이와 높이중 작은 것을 이미지의 비율에 맞게 늘려주어 꽉 차도록 하고 큰 부분은 일부 짤립니다. 이미지는 가운데 정렬입니다. |
ImageView.ScaleType.CENTER_INSDIE |
넓이와 높이중 큰 것을 이미지의 비율에 맞게 줄여 모든 이미지가 노출되도록 하고, 이미지는 가운데 정렬입니다. |
ImageView.ScaleType.FIT_CENTER |
X 와 Y 중 큰 것을 이미지의 비율에 맞게 줄여 모든 이미지가 노출되도록 하고, 이미지는 가운데 정렬입니다. |
ImageView.ScaleType.FIT_END |
X 와 Y 중 큰 것을 이미지의 비율에 맞게 줄여 모든 이미지가 노출되도록 하고 , 이미지는 끝 정렬입니다. |
ImageView.ScaleType.FIT_START |
X 와 Y 중 큰 것을 이미지의 비율에 맞게 줄여 모든 이미지가 노출되도록 하고 , 이미지는 시작 정렬입니다. |
ImageView.ScaleType.FIT_XY |
X 와 Y 중 뷰에 맞지 않는 것을 늘리거나 줄여 꽉 차도록 합니다. 원본 이미지 비율을 무시하기 때문에 찌글어질 수 있다. |
ImageView.ScaleType.MATRIX |
뷰의 왼쪽 상단을 기점으로 뷰의 크기대로 그려준다. |
CENTER
중앙 정렬이 우선순위
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
원본 크기 그대로 가운데 정렬 |
원본 크기 그대로 가운데 정렬 |
|
|
CENTER_CROP
이미지가 뷰에 꽉 차도록 표현하는게 우선순위
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
뷰의 크기대로 늘려 중앙 정렬 합니다. |
뷰의 크기대로 늘려 중앙 정렬합니다. ( 동일한 조건에서 FIT_CENTER와 동일) |
|
|
CENTER_INSIDE
이미지가 뷰보다 클 경우만 스케일링
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
뷰의 크기대로 줄이고 가운데 정렬합니다. (동일한 조건에서 CENTER_INSIDE 와 동일 ) |
원본 크기 그대로 가운데 정렬 ( 동일한 조건에서 CENTER 와 동일 ) |
|
|
FIT_CENTER
이미지가 뷰에 모두 표현하는게 우선순위
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
뷰의 크기대로 줄이고 정렬은 가운데 정렬입니다. ( 동일한 조건에서 CENTER_INSIDE와 동일 ) |
뷰의 크기대로 늘리고 정렬은 가운데 정렬입니다. ( 동일한 조건에서 CENTER_CROP 과 동일 ) |
|
|
FIT_END
이미지가 뷰에 모두 표현하는게 우선순위
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
뷰의 크기대로 줄이고 정렬은 끝 정렬입니다. |
뷰의 크기대로 늘리고 정렬을 끝 정렬입니다. |
|
|
FIT_START
이미지가 뷰에 모두 표현하는게 우선순위
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
뷰의 크기대로 줄이고 정렬을 시작 정렬입니다. |
뷰의 크기대로 늘리고 정렬은 시작 정렬입니다. |
|
|
FIT_XY
이미지가 뷰에 꽉 차도록 하는게 우선순위 ( 이미지의 비율을 무시하기 때문에 찌그러져 보일 수 있다. )
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
뷰의 크기대로 줄입니다. |
뷰의 크기대로 늘립니다. |
|
|
MATRIX
왼쪽 상단을 기준으로 뷰를 그려준다. ( 다른 타입과 달리, 다른 타입으로 설정후 MATRIX로 설정해도 기존 성질을 유지한다. )
이미지가 뷰의 크기보다 클 경우 |
이미지가 뷰의 크기보다 작을 경우 |
왼쪽 상단을 기준으로 뷰의 원본 크기대로 그려준다. |
왼족 상단을 기준으로 뷰의 원본 크기대로 그려준다. |
|
|
각 타입별 예시 사진을 보시고 이해 안가시는 부분은 댓글로 남겨주세요.
※해당 포스팅은 지극히 주관적인 내용으로 저자의 복기 목적으로 작성된 것이고, 내용에대해 수정이나 추가 요청은 언제든 환영합니다.
'안드로이드 > 자바' 카테고리의 다른 글
[안드로이드/Android] 데이터 바인딩 사용하기[2/2] (0) | 2018.01.16 |
---|---|
[안드로이드/Android] 데이터 바인딩 사용하기[1/2] (2) | 2018.01.15 |
[안드로이드/Android] 권한 체크하기 (6) | 2017.12.17 |
[안드로이드/Android] 네이버 로그인 연동 (0) | 2017.12.12 |
[안드로이드/Android] Firebase Database 시작하기 (4) | 2017.11.10 |