UIAlertView 커스터마이징

원본: http://joris.kluivers.nl/iphone-dev/?p=CustomAlert
출처: http://www.devpia.com/MAEUL/Contents/Detail.aspx?BoardID=7462&MAEULNO=911&no=51914&page=1

iPhone SDK는 사용자에게 팝업을 보여주기 위한 UIAlertView 클래스를 제공합니다. 예를 들어, 애플은 이 팝업을 문자 메시지가 도착했을 때 사용합니다. 어플리케이션 개발자들은 이와 같은 팝업을 사용할 수 있습니다. 최상위의 특수한 윈도우 레벨에 보여집니다. 팝업 아래의 컨텐츠들에 대한 사용자의 입력은 팝업이 사라질 때까지 무시됩니다.

나의 최근 프로젝트들 중, 하나의 뷰가 모든 다른 컨텐츠들의 최상위에 보여져야만 했습니다. Spotlight dim effect와 사용자 입력을 막는 것은 재사용할 수 있었으나, 파란색의 UIAlertView 스타일은 나의 요구와 맞지 않았습니다. 처음부터 나만의 뷰를 만드는 대신, UIAlertView가 제공하는 것을 재사용하고 모든 불필요한 기능들을 제거하기로 결심했습니다.

이 페이지는 아래에 나온 피가 튀기는 것 같은 변형된 Alert를 생성하기 위해 무엇이 필요한지 설명할 것입니다.

 

A normal alert vs. a custom alert

 

팝업을 우리가 원하는 어떤 것으로든 변형할 수 있지만, 단순함을 유지하려고 했습니다. 피가 튀기는 팝업은 두 가지 주요 파트들로 구성되어져 있습니다. 배경 이미지와 텍스트 레이블. 위의 비교에서 볼 수 있듯이, 우리는 버튼과 기본 텍스트를 무시할 겁니다. 새로운 초기화 함수는 JKCustomAlert에게 정보를 제공하기 위해 사용될 것입니다.

 

- (id) initWithImage:(UIImage *)backgroundImage text:(NSString *)text;

 

자체 Initializer를 사용함으로써, 기본 타이틀과 메시지는 설정되지 않습니다. 만약 지금 시점에서 팝업을 보여준다면, 비어있고 작지만, 기본 모습을 가진 팝업이 나타날겁니다.

팝업의 배경을 기본에서 자체 배경으로 변경하기 위해서 drawRect: 는 Override 되어야 합니다. 우리가 해야할 것은 배경 이미지를 뿌리는 것 뿐입니다.

- (void) drawRect:(CGRect)rect {
    // do not call the super drawRect

    CGSize imageSize = self.backgroundImage.size;
    [self.backgroundImage drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
}

 

마지막으로 할 것은 배경 이미지의 크기에 맞게 JKCustomAlert의 크기를 변경하는 것입니다. show 함수는 팝업의 크기를 재설정하고 애니메이션할 책임이 있습니다. 에니메이션을 시작하고 뷰의 크기를 맞추기 위해 super 함수를 호출합니다.

 

- (void) show {
    // call the super show method to initiate the animation
    [super show];

    // resize the alert view to fit the image
    CGSize imageSize = self.backgroundImage.size;
    self.bounds = CGRectMake(0, 0, imageSize.width, imageSize.height);
}

 

팝업에 나타나는 Text label은 addSubView: 함수에 추가되고, 위치는 layoutSubviews 함수 안에서 설정됩니다.

사용자에게 버튼을 제공하지 않기 때문에, dismissWithClickedButtonIndex:animated셀렉터를 사용하여 팝업을 수동으로 없애야 합니다. 그렇지 않으면, 프로그램은 팝업이 보이는 동안 멈추어 있을 것입니다.

 

Sample Project

Download CustomAlert.zip (23kb)