今日は以前、アプリ開発の中で使用した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にしかバッジを表示することができなかったので、
すごく良かったです! ライブラリは、導入しても使い方を理解するまでが大変で、構造を理解しないと後々大変になることが大半なのですが、 このライブラリはシンプルで使いやすく、かっこいいバッジを設置することが出来たので良かったです!
よかったら、使ってみてはいかがですか?
おしまい