XIB를 사용한 사용자정의 팝업뷰 만들기 (Swift 3.0)

2017-02-06
27 Views

UIView를 추가해서 팝업창을 디자인한 XIB로 별도로 만들어 호출하고 사용하는 방법을 알아보자.

1. Xcode에서 프로젝트를 생성한 다음

2. 사용자정의 팝업용 XIB파일을 만든다.

File – New – FIle에서 User Interface에서 [View]파일을 선택한다. 파일명은 PopupView.xib로 지정한다.

3. 다음으로 사용자정의 팝업 클래스를 추가한다. 메뉴에서 File – New – File에서 Cocoa Touch Class 템플릿을 선택하고 서브클래스는 UIView를 선택한다. 파일명은 PopupView.swift로 한다.

“Also create XIB file”을 체크하면 swift와 xib파일을 동시에 만들수 있다.

4. 아래 화면과 같이 XIB화면과 소스코드화면을 분할해서 보여주고 우선 화면 디자인을 구성하자. 팝업용 뷰를 추가하고 레이블과 닫기 버튼을 추가한다. 그런 다음 뷰에서 Custom Class란에서 PopupView를 선택한다. 그 다음 화면에 배치한 요소들을 선택한 다음 컨트롤키를 누른 상ㅌ태에서 아웃렛과 액션을 연결한다.

PopupView.swift

마지막으로 만든 팝업을 열어주는 부분을 구현한다. 이 예제에서는 ViewController가 열리면서 팝업으로 바로 열어주지면 실제 앱에서는 서브루틴화해서 호출하게 된다.

Facebook Comments

You may be interested

페이지 로딩 위치에 따른 사용자 시선 유도
Swift 3.0
shares3 views
Swift 3.0
shares3 views

페이지 로딩 위치에 따른 사용자 시선 유도

MJ Kim - 4월 29, 2017

로딩되는 표시를 표시할 위치를 조금 고민해보면서 사용자경험(UX)를 개선하기 위함을 고려해서 정리해 본다. 로딩을 생각해보면 대부분 한가운데에 표시하면 된다고 생각하지만, Twitter…

iOS와 Android UX의 차이점
Swift 3.0
shares2 views
Swift 3.0
shares2 views

iOS와 Android UX의 차이점

MJ Kim - 4월 29, 2017

최근 필자가 iOS와 Android를 같이 개발하다보니 UX의 차이점을 기억하고자 정리해본다.  이를 정리하는 이유는 운영체제별로 차이점을 이해하고 그 차이점을 극복하기 위함이다.…

모바일 앱 아키텍처
Swift
shares26 views
Swift
shares26 views

모바일 앱 아키텍처

MJ Kim - 4월 22, 2017

이 내용은 나름대로 개발해본 내용을 토대로 정리해본 모바일 앱 아키텍처에 대한 내용이다. 이를 정리한 이유는 오래된 아키텍처부터 최근 아키텍처까지 정리해보고…