Swift3でカスタマイズできるポップアップを作る方法

投稿：2017年04月11日｜更新：2019年01月07日

UIViewを使ってカスタマイズできるポップアップを作る方法をご紹介します。

また、カスタムデリゲートでポップアップがクローズされるときにポップアップを開いたViewControllerへデリゲート通知されるようにします。

プロジェクトを右クリックして、File→New

Viewを選択します。

popup.xibとしました。

File→NewでCocoa Touch Classを選択します。

ClassはPopup.swift Subclass:UIViewを選択します。

popup.xibを選択し、UIViewとその中にテキストフィールドとボタンをおきます。

popup.xibのViewを選択して、Custom ClassをPopupとします。

popup.xibにUIViewとPopup.swiftをドラッグして関連付けます。

設置したボタンを右クリックして、Touchup Insideを選んで、メソッド名はcloseでConnectをクリックします。

カスタムデリゲート

ポップアップがクローズされるときにポップアップを開いたViewControllerへデリゲート通知されるようにします。

Popup.swift

import UIKit


@objc protocol PopupViewDelegate {
    // デリゲートメソッド定義
    func didClose(str:String)
}


class Popup: UIView {

    @IBOutlet weak var baseView: UIView!
    
    @IBOutlet weak var textField: UITextField!
    
    
    // PopupViewDelegateのインスタンスを宣言
    weak var delegate: PopupViewDelegate?
    
    @IBAction func close(_ sender: Any) {
        self.delegate?.didClose(str: self.textField.text!);
        // クリックしたらViewを削除
        self.removeFromSuperview()
        
    }
}

import UIKit

@objc protocol PopupViewDelegate {

// デリゲートメソッド定義

func didClose(str:String)

}

class Popup: UIView {

@IBOutlet weak var baseView: UIView!

@IBOutlet weak var textField: UITextField!

// PopupViewDelegateのインスタンスを宣言

weak var delegate: PopupViewDelegate?

@IBAction func close(_ sender: Any) {

self.delegate?.didClose(str: self.textField.text!);

// クリックしたらViewを削除

self.removeFromSuperview()

}

親のXXXViewController.swiftにポップアップの記述をします。

class ViewController: UIViewController,PopupViewDelegate{

    func popup(){
        //  カスタムポップアップ
        let popupView:Popup = UINib(nibName: "popup", bundle: nil).instantiate(withOwner: self,options: nil)[0] as! Popup
        popupView.delegate = self
        
        // 背景色
        let viewColor = UIColor.black
        // 透過度
        popupView.backgroundColor = viewColor.withAlphaComponent(0.8)
 
        // ポップアップビュー=画面サイズ
        //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)
    }
    
    // popupを閉じた時にデリゲート通知
    func didClose(str:String) {
        print(str);
    }

}

class ViewController: UIViewController,PopupViewDelegate{

func popup(){

// カスタムポップアップ

let popupView:Popup = UINib(nibName: "popup", bundle: nil).instantiate(withOwner: self,options: nil)[0] as! Popup

popupView.delegate = self

// 背景色

let viewColor = UIColor.black

// 透過度

popupView.backgroundColor = viewColor.withAlphaComponent(0.8)

// ポップアップビュー=画面サイズ

//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)

}

// popupを閉じた時にデリゲート通知

func didClose(str:String) {

print(str);

}