Xcode
iOS
CocoaPods
Swift

[iOS]ローディングをいい感じに表示してくれるCocoaPodsライブラリ「KRProgressHUD」の宣伝

More than 1 year has passed since last update.

簡単で使いやすく,かっこいいローディングといえば,SVProgressHUDMBProgressHUD あたりが定番かと思います.

私は最近,Swiftにもだいぶ慣れてきたので,面倒な処理を投げれるUtilityやExtensionを書く機会が増えてきました.
CocoaPodsライブラリを公開したことがなかったこともあり,経験という意味でも,ローディングを表示するライブラリを上のPodsを参考にしながら作成してみました.
差分を図るために,インジケータのデザインピュアSwiftといった点をを意識してみました.

完成したもの

デモ: https://appetize.io/app/nw022juw0znkf1n5u6ynga5ntm
Github: https://github.com/krimpedance/KRProgressHUD
README.mdを見ていただければ,簡単に使うことができると思います.


(*このGifは最新版ではないですが,挙動はだいたい同じです.)
 

特徴

  • MaskViewの色:.black, .white, .clearから選択
  • progressHUDの背景色:.white, .black, .custom(background:, text:, icon:)
  • KRActivityIndicator(クルクル):開始色と終了色を指定することで,グラデーションのあるインジケータを表示
  • カスタム画像も設定可能
  • その他の細かいところはデモアプリで確認していただけると嬉しいです!

KRActivityIndicatorView

まず初めにクルクル回るインジケータを作成しました.
画像を使うという手もありましたが,使う側のことを考えてインジケータの色はバリエーションをもたせたかったので,UIBezierPathで描画してます.

基本のデザインはIllustratorで作り,自前のパス変換ツールによりUIBezierPath化しています.

paths.enumerated().forEach { index, path in
  let pathLayer = CAShapeLayer()
  pathLayer.frame = animationLayer.bounds
  pathLayer.fillColor = colors[index].cgColor
  pathLayer.lineWidth = 0
  pathLayer.path = path
  animationLayer.addSublayer(pathLayer)
}

インジケータの各丸は色が異なるため,別々のレイヤで描画しています.
各色は,グラデーションから等間隔で抽出したものを使用しました.(抽出に関してはこちらにまとめてあります.)

副産物

このインジケータは今回のライブラリ用に作っていたのですが,普通にUIActivityIndicatorのように使えるのでは?となり,諸々の処理を追加,別のライブラリとして公開することにしました.(笑)
Github: https://github.com/krimpedance/KRActivityIndicatorView
デモ: https://appetize.io/app/v73ez7gvuzzuhxecu4zqv4em0r

IBDesignableIBInspectableを使用することで,IB上でデザインを調節できます.
色を自在に(と言っても2色のグラデーションですが)変えれるので,アプリのUIに合わせやすいかと思います.

KRProgressHUD

CocoaPods化するにあたっては,以下の記事を参考にさせていただきました.

途中まではうまくいっていたのですが,実際にpod installしてデモを作ろうとすると読み込みはうまくいくのにクラスが使えない,,,
という状況に陥り何回もやり直したり.podspecいじったりして,数時間が消えていきました.

まあ原因は,外から使いたいものにpublic修飾子をつけていなかっただけでした..orz

private修飾子は意識してつけまくっていたのですが,何もつけない場合はinternalになり,ライブラリ化した場合はアクセスできないということを完全に忘れていました.
普段使うUtilityファイルはプロジェクトにそのままぶち込んで使っていたので問題になっていなかっただけでした.
まあ今回の件でpublicinternalの動作の違いについて学べたので良しとしましょう.(^^;

まとめ

今回は既存のライブラリ+αといった感じでしたが,CocoaPodsのライブラリ作成の流れなどがわかり,楽しかったです.
ここもカスタムしたい!とか,この書き方はFxxk you!などありましたら,コメントまたはGithubの方からお願いします.

それではよいiOSライフを!!!

更新履歴


  • 2017/07/04 ver.3.0 用に更新しました.