http://iosdevelopertips.com/user-interface/ios-5-uiimage-and-resizableimagewithcapinsets.html 이며 이 블로그의 내용을 다소 수정하여 설명하도록 합니다.
우선 화면상에 간단하게 이미지를 바탕으로 하는 버턴을 만드는 방법부터 알아보겠습니다.
다음 그림은 40x46 픽셀 크기의 blueButton.png 라는 이미지로 버턴 모양을 하고 있지만
세로로 약간 더 긴 형태로 되어 있습니다.
이 이미지를 버턴으로 사용하는 코드는 다음과 같습니다.
int buttonOffset = 70;
// 버턴 이미지 사용해서 edgeInset을 테스트해 보자
UIImage *buttonImage = [UIImage imageNamed:@"blueButton.png"];
// button0는 width=40, height=46인 blueButton.png를 화면에 그대로 출력
UIButton *button0 = [[UIButton alloc] initWithFrame:CGRectMake(140,70,40,46)];
[button0 setBackgroundImage:buttonImage forState:UIControlStateNormal];
[[self view] addSubview:button0];
이와 같이 buttonImage를 배경 이미지로 하는 button0을 만들고 이를 현재 뷰의 자식 뷰로 추가하게되면 화면상에 다음과 같은 버턴을 볼 수 있습니다.
이 버턴을 160x46 크기로 늘여서 화면에 출력해 보겠습니다.
// button1은 (40,46) 크기의 버턴을 (160, 46)으로 늘여서 화면에 보여준다
// 그 결과 화면에는 이미지가 늘어나면서 비정상적으로 보인다
UIButton *button1 = [[UIButton alloc] initWithFrame:CGRectMake(80,70+buttonOffset*1,
160, 46)];
[button1 setTitle:@"Button1" forState:UIControlStateNormal];
[button1 setBackgroundImage:buttonImage forState:UIControlStateNormal];
[[self view] addSubview:button1];
그러면 다음과 같은 버턴을 볼 수 있을 것입니다.
배경이미지로 blueButton.png 가 나타나기는 하지만 40x46 픽셀 크기 원본 이미지를 160x46 크기 버턴 객체의 배경으로 하다보니 부자연스러운 이미지가 나타나는 것을 볼 수 있습니다.
이제 이 blueButton.png 이미지를 사용하여 새로운 (top=0, left=16, bottom=0, right=16) 크기의 inset 사각형을 내부에 만들어서 이 이미지를 resizableImage로 지정합니다.
모서리(edge) 삽입(inset) 사각형은 다음과 같은 구조체 형식으로 top, left, bottom, right 값으로 이루어져 있습니다.
typedef struct { CGFloat top, left, bottom, right; } UIEdgeInsets;
UIEdgeInsetsMake(0, 16, 0, 16) 를 이용하여 edge inset 은 점선 내부의 사각형 영역이 됩니다.
UIImage *insetButtonImage1 = [[UIImage imageNamed:@"blueButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
// 이제 (40,46) 크기의 버턴을 (160, 46) 크기로 늘이면 이 버턴의 배경이미지는
// 스트레칭되는 것이 아니라 모서리 인셋 값을 (0, 16, 0, 16)로 하는 크기로 늘어나게
// 된다.
UIButton *button2 = [[UIButton alloc] initWithFrame:CGRectMake(80,70+buttonOffset*2,
160, 46)];
[button2 setTitle:@"Button2" forState:UIControlStateNormal];
[button2 setBackgroundImage:insetButtonImage1 forState:UIControlStateNormal];
[[self view] addSubview:button2];
UIImage 에서 resizableImageWithCapInsets 메소드를 사용하여 만든 insetButtonImage1을 배경으로 하는 버턴은 다음과 같은 모양를 가지게 된다. 위의 코드를 이용하여 버턴을 만들게 되면 다음과 같은 자연스러운 버턴을 얻을 수 있습니다.
이제 버턴의 크기를 크게 만드는 경우를 생각해 봅니다. 위의 코드에서 아래와 같이 버턴의 프레임 너비와 높이를 160x66으로 만들어 봅니다.
UIImage *insetButtonImage2 = [[UIImage imageNamed:@"blueButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
// 이제 (40,46) 크기의 버턴을 (160, 66) 크기로 만들어 보자
UIButton *button3 = [[UIButton alloc] initWithFrame:CGRectMake(80,70+buttonOffset*3,
160, 66)];
[button3 setTitle:@"Button3" forState:UIControlStateNormal];
[button3 setBackgroundImage:insetButtonImage2 forState:UIControlStateNormal];
[[self view] addSubview:button3];
위의 코드를 실행시키면 다음과 같은 결과를 얻을 수 있습니다.
이미지의 edge inset 값이 (0,16,0,16)이므로 이 값을 cap inset으로 할 경우 오왼쪽, 오른쪽 inset 값을 16 픽셀씩 사용하여 이 이미지를 160x66 이미지의 왼쪽과 오른쪽에 넣을 수 있으나 위, 아래는 0픽셀을 사용하므로 그림과 같은 부자연스러운 결과를 보여주고 있습니다.
이제 이 코드를 다음과 같이 약간 수정해 봅니다.
UIImage *insetButtonImage3 = [[UIImage imageNamed:@"blueButton.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 16, 15, 16)];
// 이제 (40,46) 크기의 버턴을 (160, 66) 크기로 늘이면 이 버턴의 배경이미지는
// 스트레칭되는 것이 아니라 모서리 인셋 값을 (15, 16, 15, 16)로 하는 크기로 늘어나게
// 된다.
UIButton *button4 = [[UIButton alloc] initWithFrame:CGRectMake(80,70+buttonOffset*4,
160, 66)];
[button4 setTitle:@"Button4" forState:UIControlStateNormal];
[button4 setBackgroundImage:insetButtonImage3 forState:UIControlStateNormal];
[[self view] addSubview:button4];
이제 버턴 이미지의 모서리 inset 값을 (15, 16, 15, 16)으로 하여 이것을 cap inset 값으로 주게되면 이미지의 왼쪽, 오른쪽 뿐만아니라 위,아래로 15 픽셀을 둥근 모서리 값으로 사용하게 되어 다음과 같은 결과를 얻을 수 있습니다.
원본 이미지에 약간의 그레디에이션이 있어서 약간 부자연스러운 버턴이 되지만 그레디에이션을 빼게되면 단색의 버턴 배경이미지를 얻을 수 있습니다.
현재 블로그에 zip 파일이 포스팅되이 않는 버그가 있어 임시로 아래 주소에 소스를 포스팅 합니다.
소스코드 :
http://ivis.cwnu.ac.kr/zbxe/?mid=ivis_pds&document_srl=81792
결과는 아래와 같습니다.
iOS-메모리관리.pdf
글