LoginSignup
3
2

More than 3 years have passed since last update.

BulletinBoardを使ってiOSの半モーダルビューを再現

Last updated at Posted at 2021-04-14

はじめに

BulletinBoardを使ってAirPods同期のときとかに出てくる半モーダルビュー?(正式名称不明)を再現します
↓これ

目次

  1. BulletinBoardのインストール
  2. BLTNPageItemの作成
  3. BLTNPageItemのボタンにHandlerを設定
  4. BLTNItemManagerの作成
  5. BLTNItemAppearanceを設定
  6. コード全体
  7. 完成

BulletinBoardのインストール

CocoaPods

Podfile.
pod 'BulletinBoard'

Carthage

Chartfile.
github "alexaubry/BulletinBoard"

BLTNPageItemの作成

let item = BLTNPageItem(title: "AirPods Pro")
item.image = UIImage(systemName: "airpodspro")
item.actionButtonTitle = "一時的にオーディオを共有"
item.alternativeButtonTitle = "iPhoneに接続"

BLTNPageItemのボタンにHandlerを設定

item.actionHandler = { _ in
    print("actionButton押された")
}

item.alternativeHandler = { _ in
    print("alternativeButton押された")
}

BLTNItemManagerの作成

let manager = BLTNItemManager(rootItem: item)
manager.showBulletin(above: self)

BLTNItemAppearanceを設定

BLTNItemAppearanceを変更すると見た目を変えれます

item.appearance.actionButtonColor = .lightGray
item.appearance.actionButtonTitleColor = .black
item.appearance.titleTextColor = .black

コード全体

class ViewController: UIViewController {

    var manager: BLTNItemManager = {
        let item = BLTNPageItem(title: "AirPods Pro")
        item.actionButtonTitle = "一時的にオーディオを共有"
        item.alternativeButtonTitle = "iPhoneに接続"
        item.image = UIImage(systemName: "airpodspro")?.resize(size: CGSize(width: 350, height: 350))
        item.appearance.actionButtonColor = .lightGray
        item.appearance.actionButtonTitleColor = .black
        item.appearance.titleTextColor = .black

        item.actionHandler = { _ in
            print("actionButton押された")
        }

        item.alternativeHandler = { _ in
            print("alternativeButton押された")
        }

        return BLTNItemManager(rootItem: item)
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func show(_ sender: Any) {
        manager.showBulletin(above: self)
    }

}

完成

         ←理想 現実→

ありがとうございました。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2