UIView를 기반으로 한 커스텀 팝업【Swift3.0】

완성 견본

1. 커스텀 팝업 xib 파일 작성

메뉴: File→New→File로 이동하여 User Interface의 View 파일을 선택합니다. 파일 이름은 PopupView.xib입니다.

2. 커스텀 팝업 클래스 파일 작성

메뉴: File→New→File로 이동하여 Cocoa Touch Class의 템플리를 선택하고 Subclass는 UIView를 선택합니다. 파일 이름은 Popupview.swift입니다.


※ 「Also create XIB file」을 체크하면 .swift와 .xib를 동시에 작성할 수 있습니다만, 이번은 따로 하고 있습니다.

3. xib와 클래스 파일의 연결

왼쪽은 PopupView.swift이고 오른쪽은 PopupView.xib입니다. 왼쪽에서 PopupView.swift를 선택한 후 옵션을 누른 상태에서 PopupView.xib를 선택하면 그림과 같이 정렬됩니다. 오른쪽 화면에서 Popup View를 선택(①)하고 오른쪽의 Custom Class 필드에서 PopupView를 선택(②)합니다. 그리고는 통상대로 컨트롤을 누르면서 아울렛과 액션의 접속(③)을 행합니다. 이번 BaseView(흰색 백 부분)를 아울렛 연결하고 있는 것은 코드로 모서리를 둥글게 하기 때문입니다. OK 버튼에는 닫기 동작을 할당합니다.

// PopupView.swift

import UIKit

class PopupView: UIView {

    @IBOutlet weak var baseView:UIView!

    @IBAction func close(_ sender:UIButton) {
        self.removeFromSuperview()

    }
}

4. 구현

이번은 viewDidLoad()내에 써 보았습니다. 실용한다면 서브 루틴화하여 호출하는 것이 좋습니다. 덧붙여서 알파(투과도)의 설정은 인터페이스 빌더로부터도 할 수 있을 것 같습니다만, 거기서 설정해 버리면 모든 오브젝트에 적용되어 버리는(계속해 버리는?) 때문에 코드로부터 행하고 있습니다.

    // swift 3.0

    override func viewDidLoad() {
        super.viewDidLoad()

        //  カスタムポップアップ
        let popupView:PopupView = UINib(nibName: "PopupView", bundle: nil).instantiate(withOwner: self,options: nil)[0] as! PopupView

        // ポップアップビュー背景色（グレーの部分）
        let viewColor = UIColor.black
        // 半透明にして親ビューが見えるように。透過度はお好みで。
        popupView.backgroundColor = viewColor.withAlphaComponent(0.5) 
        // ポップアップビューを画面サイズに合わせる
        popupView.frame = self.view.frame

        // ダイアログ背景色（白の部分）
        let baseViewColor = UIColor.white
        // ちょっとだけ透明にする
        popupView.baseView.backgroundColor = baseViewColor.withAlphaComponent(0.7)
        // 角丸にする
        popupView.baseView.layer.cornerRadius = 8.0

        // 貼り付ける
        self.view.addSubview(popupView)


    }