LoginSignup
2

More than 1 year has passed since last update.

posted at

updated at

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

はじめに

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

}

完成

         ←理想 現実→

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

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
What you can do with signing up
2