[iOS] Stretchable Image를 이용해 이미지 늘리기 (feat. 9-patch)

Apple Developer Documentation

Stretchable Image를 이용해 이미지 늘리기

 

• 안드로이드의 9-Patch 이미지와 유사한 기능으로 image를 9부분으로 나누어 자유롭게 늘리거나 줄이는 것이 가능하다.
  • Top, Bottom, Left, Right 4가지 Inset으로 나뉜다.
  • 각 Inset은 Image에서 이미지를 늘리더라도 늘어나지 않는 공간을 지정하는 역할을 한다.
  • Top, Bottom Inset의 공간은 고정된 height를 유지하고, Left, Right Inset의 공간은 고정된 width를 유지한다.
  • 각 Inset이 겹치는 코너들은 항상 고정된 크기를 가지게 된다.
• 코드 상에서는 UIImage.resizableImage(withCapInsets: resizingModel:) 메소드를 호출하여서 inset을 설정할 수 있고 혹은 Image Asset에서 Inspector로 설정할 수도 있다.

 

Example

 Stretchable Image를 가장 많이 활용하는 케이스인 대화상자 이미지이다.

 

 아무런 설정없이 Image를 늘리게 되면 아래와 같이 전체적인 이미지 영역이 늘어나게 된다.

 

아래와 같이 Slicing을 이용해 inset을 적용해준다.

 

그럼 고정된 영역은 늘어나지 않는 모습을 볼수 있다.

(뭔가 inset적용 후 이미지가 좀 이상해지는데 이건 내가 설정에 익숙하지 않아서 그런 듯 하다.)