iOS) 채팅방 말풍선 만들기
오늘은 채팅방 말풍선을 만드는 방법에 대해서 설명해 드릴까 합니다!
"그거 그냥 이미지 넣고 레이블 넣어주면 끝 아니야?!" 라고 말하시는 분들도 있을것 같아요 (저도 그랬습니다)
하지만 그 방식대로 한다면, 아마도 이러한 결과물을 마주하게 될거에요
위 그림의 제목에 nine-patch 를 적용하지 않은 모습이라고 되어있습니다. 그럼 nine-patch 가 무엇인지 알아볼까요?
위 그림에서 볼수 있듯이 nine-patch 이미지는 말그대로, 이미지를 9 개의 부분으로 나누는 것을 의미하고, 고정된 부분과, 늘어나는 부분을 지정해서, 이미지가 늘어나더라도 모서리 부분은 고정되어 첫번째 사진처럼 모서리가 늘어져 모양이 이상해 지는것을 방지해 주게 됩니다.
그래서 iOS 에서는 어디서 이 nine-patch 이미지의 늘어나는 부분과, 고정된 부분을 설정할수 있을까요?
그다음! start slicing를 눌러주면! 이런식으로 화면이 바뀌게 될거에요
이런식으로 nine-patch이미지를 조절해줄수 있습니다. 애플에서는 이 과정을 slicing이라고 부르고 있습니다.
지금은 slicing 에서 가로부분으로 slicing를 진행해 주었습니다.
가로,세로 모두 똑같은 방법으로 진행되니 그대로 진행해주시면 됩니다.
일단 파란색 부분은 늘어나거나 반복되는 부분이고, 초록색 부분은 이미지가 그대로 사라지게 됩니다.
또 왼쪽과, 오른쪽 끝 부분은 어떤 변화가 없이 그대로 존재하게 되는 부분입니다.
이 부분이 채팅말풍선의 모서리 부분이 되겠군요.
다음으로는, 인스펙터 영역의 center 속성(위 사진의 ? 부분입니다.)에는 Stretches와 Tiles 두가지가 있는데, 각각 무엇인지 아래 사진을 통해 설명드리도록 하겠습니다.
어떠신가요! 차이가 느껴 지시나요?
Stretches 는 말 그대로 해당 부분을 늘여서 표현하게 됩니다.
Tiles 는 해당 부분을 반복해서 표현하게 되구요.
채팅방 말풍선을 만들때는, 늘여야 하는 부분이 직선이라 어떤것을 사용해서 구현하더라도 실제 보여지는것은 문제가 없을것 같아요.
하지만, 위와같이 이미지가 단순하지 않을때에는 차이가 확 느껴지실것 같습니다.
이렇게 iOS 에서 nine-patch 이미지를 조절해서 채팅방말풍선 까지 만드는 방법을 알아보았습니다.
오늘도 도움이 되었으면 좋겠네요!