はじめに

こんにちは。
今回は、iOSでいい感じのポップアップアニメーションを表示する 「FFPopup」 というライブラリを試してみたので、その紹介をさせていただきます。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

FFPopup

GitHub: https://github.com/JonyFang/FFPopup

e.g.

上から下へ跳ねる	中心イン&アウト	下から下へスライド

1. 導入

今回は、cocoapodsで導入しました。
Podfileに pod 'FFPopup' を追加し、 $ pod install します。

2. 実装

まずは、StoryBoadrdに簡単なボタンを追加し、デフォルトの動作を確認してみます。
ボタンをタップしたらサンプルで作成したUIViewに対してポップアップ表示を適用させます。

import UIKit
// FFPopupのインポート追加
import FFPopup
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func tapButton(_ sender: Any) {
        
        // サンプルcontentViewの作成
        let contentView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
        contentView.backgroundColor = UIColor.white
        
        // FFPopupの初期化
        let popup = FFPopup(contentView: contentView)
        let layout = FFPopupLayout(horizontal: .center, vertical: .center)
        
        // popup表示
        popup.show(layout: layout)
    }
}

実行結果

デフォルトのパラメータを使用すると、
「上からポップアップが出現し、作成したcontentView以外をタップしたら
下にポップアップが消える」挙動を確認できました！

デフォルトのパラメータは以下のようです。

// FFPopupの初期化
let popup = FFPopup(contentView: contentView)

// ポップアップの表示アニメーションタイプ
popup.showType = .bounceInFromTop
// ポップアップを消すアニメーションタイプ
popup.dismissType = .bounceOutToBottom
// 背景マスク
popup.maskType = .dimmed
// マスクのアルファ値
popup.dimmedMaskAlpha = 0.5
// 表示の遷移時間
popup.showInDuration = 0.15
// 非表示への遷移時間
popup.dismissOutDuration = 0.15
// 背景タッチでポップアップを消す
popup.shouldDismissOnBackgroundTouch = true
// コンテンツビューのタッチでポップアップを消す
popup.shouldDismissOnContentTouch = false

let layout = FFPopupLayout(horizontal: .center, vertical: .center)

// popup表示
popup.show(layout: layout)

こちらのパラメータを変更・調整することによって、ポップアップをカスタマイズすることができます。

3. カスタムビューを用いた実装例

簡単なカスタムビューを用いて、どのような実装ができるか試してみようと思います。
カスタムビューの作成をし、カスタムビューのボタンをタップして、FFPopupのアニメーションを適用させます。

(1) CustomAlertView.xibの追加

戻るボタンと決定ボタンを備えたCustomAlertViewを作成します。

( 参考：https://dev.classmethod.jp/smartphone/xib/ )

(2) xibファイルとカスタムクラスの紐付けをした、CustomAlertView.swiftを作成する

IBOutletで2つのボタンをストーリーボードから紐付けます。

//
//  CustomAlertView.swift
// 

import UIKit

class CustomAlertView: UIView {

    // StoryBoardで2つのボタンを追加
    @IBOutlet weak var okButton: UIButton!
    @IBOutlet weak var cancelButton: UIButton!
    
    override init(frame: CGRect){
        super.init(frame: frame)
        loadNib()
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }
    
    func loadNib(){
        guard let view =  UINib(nibName: "CustomAlertView", bundle: nil).instantiate(withOwner: self, options: nil).first as? CustomAlertView else {
            return
        }
        view.frame = self.bounds
        self.addSubview(view)
    }
}

※ @Outlet や @IBAction を利用するため、
Placeholders → File's Ownerに紐付けを行います。

(3) ViewControllerの実装

ボタンをタップしたら、CustomAlertViewを作成
CustomAlertViewの2つのボタンのイベントを設定
背景タッチしてもポップアップが消えないようにする
2つのボタンをタップした際のアニメーションタイプを分ける


import UIKit
// 追加
import FFPopup
class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    var contentView: CustomAlertView?
    var popup:FFPopup?
    
    @IBAction func tapButton(_ sender: Any) {
        
        // カスタムcontentViewの作成
        contentView = CustomAlertView()
        contentView?.frame = CGRect(x: 0, y: 0, width: 300, height: 300)

        // okButtonのイベント設定
        contentView?.okButton.addTarget(self, action: #selector(tappedOk(_:)), for: .touchUpInside)
        
        // cancelButtonのイベント設定
        contentView?.cancelButton.addTarget(self, action: #selector(tappedCancel(_:)), for: .touchUpInside)

        // FFPopupの初期化
        popup = FFPopup(contentView: contentView!)

        // 中心から出現するアニメーション
        popup?.showType = .bounceIn

        // 背景タッチしてもポップアップが消えないようにする
        popup?.shouldDismissOnBackgroundTouch = false

        let layout = FFPopupLayout(horizontal: .center, vertical: .center)

        // popup表示
        popup?.show(layout: layout)
    }


    @objc func tappedOk(_ sender:UIButton) {
        // 拡大して消えるアニメーション
        popup?.dismissType = .growOut
        popup?.dismiss(animated: true)
        print("ok")
    }
    
    // 下に消えるアニメーション
    @objc func tappedCancel(_ sender:UIButton) {
        popup?.dismissType = .bounceOutToBottom
        popup?.dismiss(animated: true)
        print("cancel")
    }
}

(4) 実行結果

ボタンを押したらアラートのポップアップが表示され、
選択したボタンによって異なるアニメーションを表現することが実現できました！

おわりに

今回は、FFPopupというライブラリを試してみました。
さまざまなshowTypeとdismissTypeを組み合わせることによって、
リッチなポップアップアニメーションを簡易的に実装することができそうです。

最後までご覧いただきありがとうございました。