본문 바로가기
IT

UI에 맞게 이미지 비율, 위치 적용하기 / UIView의 ContentMode

by havejin 2020. 4. 18.

기획서를 작성하다 보면 이미지를 표시하는 정책에 대해 구체적으로 작성하지 않아 이미지 비율과 위치가 맞지 않는 경우들이 있다. 

이미지가 큰 경우에 비율을 유지한 상태에서 이미지를 늘려서 중간 정렬하고 UI 영역에 맞게 크롭

라고 기획서에 쓰는 것보다 아래와 같이 커뮤니케이션하는 것이 더 정확하고 효율적인 커뮤니케이션이 될 것이다.

AspectFill, Center

 

UIView의 ContentMode

ContentMode는 이미지를 불러올 때 캐싱하고 있던 비트맵 데이터를 활용해서 빨리 처리할 수 있도록

미리 이미지의 비율과 위치를 결정하는 정책

 

이미지 비율

크기를 변경하는 모드, 아래 3가지 중 선택

  • Scale : 가로, 세로 비율을 유지하지 않음
  • Aspect : 가로, 세로 비율을 유지

 

1. ScaleToFill

Default 값, 원본 비율을 변경해서 UIVeiw에 맞추는 방식

 

2. AspectFit (ScaleAspectFit)

원본의 비율을 유지하며 이미지가 잘리지 않도록 표시

 

3. AspectFill (ScaleAspectFill)

원본의 비율을 유지하며 이미지가 잘리더라도 UIVeiw에 맞춤

 

이미지 위치

이미지의 위치만 변경, 아래 9가지 중 선택

1. Center

2. Top

3. Bottom

4. Left

5. Right

6. Top Left

7. Top Right

8. Bottom Left

9. Bottom Right

'IT' 카테고리의 다른 글

프러덕트팀 제플린 협업 커뮤니케이션  (0) 2020.05.05