Swift今日は以前、アプリ開発の中で使用したRKNotificationHubの使い方を書いていこうと思います! 公式ものはObjective-CだったのでSwift版です! 公式を見たい方はこちら↓(アニメーションなどが視覚的に理解できるので、1度見てみましょう!) https://github.com/cwRichardKim/RKNotificationHub インストール 何はともあれ、まずはインストール! 自分は、Cocoapodsで管理しているので、管理しているプロジェクトのpodfileに以下を入力する pod ‘RKNotificationHub’ コード全体 そしてインストールしたら、プロジェクトを開いて、使用したいViewControllerで書き込んでいくのですが、 一回コードを全文記載して、その後詳細を説明していこうと思います! // HogeVC.swift import UIKit import RKNotificationHub class HogeVC: UIViewController { // RKNotificationHubのインスタンスを生成 let hub = RKNotificationHub() // バッジをつけたいボタン @IBOutlet weak var hogeButton: UIButton! override func viewDidLoad() { super.viewDidLoad() // hubをhogeButtonに設置し、最初に表示させるバッジのCountを3にする hub.setView(hogeButton, andCount: 3) // 設置するhubの背景色を黒に文字色を白にする hub.setCircleColor(UIColor.blackColor(), labelColor: UIColor.whiteColor()) } @IBAction func touchHogeButton(sender: AnyObject) { // hubのカウント数を1減らす hub.decrement() // hubのアニメーション hub.pop() if hub.count == 0 { // hubのカウントが0になったらボタンを押せなくする self.hogeButton.enable = falses } } } 使い方 まずは、RKNotificationHubをインポートします。 その後、RKNotificationHubのインスタンスとバッジをつけたいボタンの宣言をしています。 // HogeVC.swift import UIKit import RKNotificationHub class HogeVC: UIViewController { let hub = RKNotificationHub() @IBOutlet weak var hogeButton: UIButton! override func viewDidLoad { } @IBAction func touchHogeButton(sender: AnyObject) { } } 宣言をしたら、自分の使いたい様にバッジをカスタムしていきます! ここが一番楽しいときです(笑) // HogeVC.swift import UIKit import RKNotificationHub class HogeVC: UIViewController { let hub = RKNotificationHub() @IBOutlet weak var hogeButton: UIButton! override func viewDidLoad { hub.setView(hogeButton, andCount: 3) hub.setCircleColor(UIColor.blackColor(), labelColor: UIColor.whiteColor()) } @IBAction func touchHogeButton(sender: AnyObject) { hub.decrement() hub.pop() if hub.count == 0 { self.hogeButton.enable = falses } } } ここでは、viewDidLoadでバッジを表示させるhubの初期設定をしています。 setViewで表示させたいViewとバッジの初期値の設定 setCircleColorで背景色と文字色の設定をしています。 試したことが、ないのですが、フォントも変えられるようです! また、hogeボタンを押したときにもメソッドを宣言しています! hub.decrementでバッジの数を減らし、popするアニメーションを指定しいます。 更にhubのCountが0になったらボタンを使えなくしてみました! さらにさらに、 ざっくりと簡単な使い方を書いたのですが、他にも詳細な設定をすることが出来ます! 調整メソッド hub.setView(view, andCount: 3) // 設置するViewと初期値を設定 hub.setCircleAtFrame(frame) // hubのサークルフレームを設定 hub.setCircleColor(circleColor, labelColor) // hubの背景色、文字色を設定 hub.moveCircleByX(x, y: y) // hubの位置を調整出来る(デフォルトは右上) hub.scaleCircleSizeBy(scale) // サークルを拡大・縮小出来る Countの変更 hub.increment // Countを1ずつ増やす hub.incrementBy(10) // Countを10ずつ増やす hub.decrement // Countを1ずつ減らす hub.decrementBy(10) // Countを10ずつ減らす hub.hideCount // Countを隠す hub.showCount // Countを表示させる バッジのアニメーション hub.pop() hub.blink() hub.bump() こんな感じで、自分が使いたいようにカスタムすることが出来ます! Xcodeのデフォルトでは、TabBarItemにしかバッジを表示することができなかったので、 すごく良かったです! ライブラリは、導入しても使い方を理解するまでが大変で、構造を理解しないと後々大変になることが大半なのですが、 このライブラリはシンプルで使いやすく、かっこいいバッジを設置することが出来たので良かったです! よかったら、使ってみてはいかがですか? おしまい