この記事ではハーフモーダルの実装方法について解説していきます。
ハーフモーダルというのはこのようなUIのことを指しています。
実装方法
表示方法
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.xcassets
にSwift
という名前の画像を入れています。
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("下のボタンを押下") } }
参考文献