이미지 슬라이싱이란?

  • Android의 9-Patch 이미지와 같다고 보면 된다.
  • 9-Patch 이미지를 모른다면, 그냥 이미지를 확대 축소할 경우 전체적인 리사이징이 아니라 특정 부위만 길어지고 짧아지게 하여 보다 자연스럽게 나타나게하는 방법이다.
  • 예제를 통해 쉽게 알아보자

이미지 슬라이싱 적용

  • 아래와 같은 이미지가 있는 경우를 가정해보자.

  • 이 이미지를 키우면 테두리의 모양들이 이미지 높이와 함께 늘어나면서 비율이 깨지고 이상해진다.

  • 이제 이미지 슬라이싱을 적용해서 빨간색 네모 영역만 늘이고 줄이도록 할 것이다.

  • Asset으로 이동하여 해당 이미지를 선택후 우측 하단을 보면 Show Slicing 옵션을 확인할 수 있다.

  • Show Slicing을 누르면 Slicing 옵션을 확인할 수 있다.

  • Slices에서 Vertical, Horizontal, Vertical & Horizontal을 선택할 수 있다. 각각 어느 방향으로 슬라이스할지를 나타낸다.
  • 그 다음 Top과 Bottom이 있는데, Slices를 Vertical로 했기 때문에 늘어나기 시작하는 부분과 끝나는 부분이 있어야하고, 그 시작점이 Top, 끝이 Bottom이 된다.
  • 직접 숫자를 입력해도 되고, 이미지에 보이는 검은색 라인을 움직여 지정해도 된다.

  • 적당히 조절이 끝났으면 결과를 확인해보자.

  • 이렇게 하면 이미지의 비율을 깨지 않으면서 크기를 수정할 수 있다.