SwiftUIの基本を身につけたい方はこちら

【Xcode/Swift】ハーフモーダルの実装方法

この記事ではハーフモーダルの実装方法について解説していきます。

ハーフモーダルというのはこのようなUIのことを指しています。

実装方法

表示方法

STEP.1
ライブラリ導入

まずは、以下のライブラリをcocoapodsで導入してください。

pod 'BulletinBoard'
【Xcode/Swift】CocoaPodsの使い方を徹底解説
STEP.2
ボタンを配置・紐付け

Main.storyboardにボタンを配置し、Actionで紐付ける

STEP.3
インポート

まずはimportする。

import BLTNBoard
STEP.4
BLTNPageItemの作成

以下のように、BLTNPageItemを作成する

var boardManager: BLTNItemManager = {
    let item = BLTNPageItem(title: "ハーフモーダルタイトル")
    item.actionButtonTitle = "ボタンタイトル"
    item.alternativeButtonTitle = "下のボタンタイトル"
    item.image = UIImage(named: "Swift")
    return BLTNItemManager(rootItem: item)
}()

Assets.xcassetsSwiftという名前の画像を入れています。

STEP.5
表示させる

ボタンを押したらハーフモーダルを表示させる。

@IBAction func buttonAction(_ sender: Any) {
    boardManager.showBulletin(above: self)
}

これで完成です。

左のようにボタンを押すとハーフモーダルが表示されると思います。

ボタンのタップ判定

変数のプロパティに以下のコードを追加

item.actionHandler = { _ in
    print("上のボタンを押下")
}
item.alternativeHandler = { _ in
    print("下のボタンを押下")
}

これで、タップ判定が取得できます。

staticでメソッドを切り出す方法

以下のように、記述

item.actionHandler = { _ in
    ViewController.didTapActionButton()
}
item.alternativeHandler = { _ in
    ViewController.didTapAlternativeButton()
}

そして、staticで関数として記述する

static func didTapActionButton() {
    print("上のボタンを押下")
}

static func didTapAlternativeButton() {
    print("下のボタンを押下")
}

全てのコード

import UIKit
import BLTNBoard

class ViewController: UIViewController {
    var boardManager: BLTNItemManager = {
        let item = BLTNPageItem(title: "ハーフモーダルタイトル")
        item.actionButtonTitle = "ボタンタイトル"
        item.alternativeButtonTitle = "下のボタンタイトル"
        item.image = UIImage(named: "Swift")
        item.actionHandler = { _ in
            ViewController.didTapActionButton()
        }
        item.alternativeHandler = { _ in
            ViewController.didTapAlternativeButton()
        }
        return BLTNItemManager(rootItem: item)
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func buttonAction(_ sender: Any) {
        boardManager.showBulletin(above: self)
    }
    
    static func didTapActionButton() {
        print("上のボタンを押下")
    }
    
    static func didTapAlternativeButton() {
        print("下のボタンを押下")
    }
}

評価