お役立ちコンテンツ | フリーランスエンジニアの案件・求人なら【テクフリ】

【Swift】RKNotificationHubを使ってみた

 yamazaki_k | 2019/10/18 - 10:37
目次

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

    おしまい

    今すぐシェアしよう!

    B!
    仕事内容
    techcareer freelancetechcareer freelance


    【マージン率10%案件が多数掲載!】テクフリで高単価案件を探してみよう!

    上部へ戻る