[Objective-C] 커스텀 팝업 만들기

안녕하세요 오늘의 주제는 '커스텀 팝업 만들기' 입니다. 안드로이드의 경우 사용자에게 피드백을 전달할 경우 '토스트'를 사용합니다. 하지만 ios에서는 토스트 대신 팝업을 주로 사용합니다.  아이폰을 사용하지 않는 저는 당연하게 'ios toast'를 검색했습니다, 검색 결과를 보니 토스트는 없고 커스텀한 팝업이나 토스트 형대로 커스텀 해서 사용한다는 결론을 내렸습니다.  커스텀 팝업 사용법을 익히고 자유자재로 사용해보도록 합시다.

작성이력

최초 작성 : 18/01/08 

1차 수정 : 18/01/09 ( 파편화 ) 

ViewController 파일과 xib 생성하기

요즘은 xib보다는 스토리보드가 워낙 잘 되어 있어서 잘 사용하지 않지만, 커스텀 팝업의 경우 스토리 보드를 사용할 경우 팝업의 배경이 딤처리되어 일반 뷰가 보이도록 하는게 불가능하다고 합니다. 혹시 스토리보드로 구현하신분 있으시면 댓글 부탁드립니다.

ViewController 파일 생성

프로젝트 디렉토리 우클릭 - > New File - > Cocoa Touch Class 생성 ( 'PopupViewController' 로 생성 ) 

xib 생성하기 

프로젝트 디렉토리 우클릭 - > New File - > View 생성  ( 편의상 viewController 파일과 이름을 동일하게 작성 했습니다. )

Popup View 설정

생성된 최상단 뷰의 Background를 'Clear Color' 로 변경합니다.  ( 팝업의 딤처리된 배경으로 뒤에 깔린 뷰를 보이게 하기 위함입니다. ) 'Object Library' 에서 View를 찾아서 추가하고 알파값을 조정합니다. ( 'AlphaView' , Background - Dark Gray Color , Alpha - 0.6 )  위 과정과 동일하게 View를 추가하고 사용할 팝업을 꾸며줍니다. ( MainView )

팝업 뷰 계층 구조	'AlphaView' Attributtes inspecterr	최상단 뷰 Attributtes inspector

File's Owner Outlets 설정

xib 파일을 클릭 해보시면 File's Owner Connection inspector 를 설정해줘야 에러를 피할 수 있습니다.

view outlets을 최상단 뷰로 설정해주셔야 합니다.

※아래 사진에 파란색 밑줄과 작성중이신 파일을 비교해주세요

팝업 호출

위 과정에서 만든 팝업 호출을 원하는 ViewController 에서 아래와 같이 작성하세요.

헤더파일 (.h)

PopupViewController 를 import 후 프로퍼티를 선언합니다.

#import "PopupViewController.h"

@interface PlaySettingViewController : UIViewController{ 

        }

        

@property (strong,nonatomic) PopupViewController *popUpViewController;

        

구현파일 (.m)

실제 호출을 원하는 조건문 속에 다음과 같이 구현합니다.

_popUpViewController=[[PopupViewController alloc]initWithNibName:@"PopupViewController" bundle:nil];

[self.view addSubview:_popUpViewController.view];

팝업 닫기

팝업과 부모 뷰 간의 상호작용이 필요 없이 단순 알림 팝업이라면 델리게이트를 사용할 필요없이 단순 종료를 하시면 됩니다.  하위 뷰를 모두 지우는 메소드를 사용합니다. 아래 코드중 [self view] 는 팝업을 호출한 부모 뷰를 뜻하며, 코드를 해석하면 '부모 뷰의 하위 뷰를 모두 지운다' 입니다.

- (IBAction)closePopup:(id)sender { 

    [[self view] removeFromSuperview];

}

파편화 이슈

xib파일을 보시면 어떤 디바이스가 타겟으로 화면이 그려지고 있는지 알 수 있습니다. 그걸 신경 못쓰고 작업하다 보니 작은 디바이스에서 실행했을때는 터무니 없게 깨지는 경우가 있기 때문에 아래의 모든 디바이스를 클릭하고 프리뷰를 확인해야합니다.

첫번째 문제점으로는 최상단 뷰가 아닌 'AlphaView'의 크기가 디바이스가 바껴도 고정되어 있어서 se와 같이 작은 디바이스에 들어갔을땐 뷰가 어긋났습니다.

오토레이아웃으로 설정해줘도 전체 크기 자체가 최상단 뷰에서 어긋나기 때문에 소용 없었습니다.  (아래 사진에서 확인하실 수 있습니다.)

이를 해결하기 위해선 AlphaView에 'leading' 과 'trailing'  제약을 0으로 추가해 최상위 뷰의 크기 변화에 따라 변하도록 해줘야합니다. 그렇게 하면 아래와 같이 

어긋나던 뷰가 알맞게 들어가게 되어 팝업에 해당하는 콘텐츠들도 자리를 잡습니다,

한가지 더 해줘야 하는게 있습니다. 팝업을 불러올때 presentView를 사용한 호출이 아닌, addSubview를 사용 했기 때문에 디바이스의 크기만큼 뷰의 크기를 재조정 해줘야 합니다.

디바이스 크기 얻기 

    CGRect screenRect=[[UIScreen mainScreen]bounds];

    CGFloat deviceWidth=screenRect.size.width;

    CGFloat deviceHeight=screenRect.size.height;

뷰 크기 재조정

상단에 얻은 디바이스 크기로 뷰를 호출하기전에 리사이즈 합니다.

[_popUpViewController.view setFrame:CGRectMake(0, 0, deviceWidth, deviceHeight)];

이제 가상 디바이스를 빌드해보시면 팝업이 정상적으로 나오고 닫히는걸 알 수 있습니다.

이상으로 포스팅을 마치겠습니다.  

ps. 포스팅을 할 수록 내용이 더러워 보이는건 왜 일까요.. 더 노력하겠습니다.

※해당 포스팅은 지극히 주관적인 내용으로 저자의 복기 목적으로 작성된 것이고, 내용에대해 수정이나 추가 요청은 언제든 환영합니다.