簡単で使いやすく,かっこいいローディングといえば,SVProgressHUD や MBProgressHUD あたりが定番かと思います.
私は最近,Swiftにもだいぶ慣れてきたので,面倒な処理を投げれるUtilityやExtensionを書く機会が増えてきました.
CocoaPodsライブラリを公開したことがなかったこともあり,経験という意味でも,ローディングを表示するライブラリを上のPodsを参考にしながら作成してみました.
差分を図るために,インジケータのデザイン,ピュアSwiftといった点をを意識してみました.
完成したもの
デモ: https://appetize.io/app/nw022juw0znkf1n5u6ynga5ntm
Github: https://github.com/krimpedance/KRProgressHUD
README.mdを見ていただければ,簡単に使うことができると思います.
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
IBDesignable
とIBInspectable
を使用することで,IB上でデザインを調節できます.
色を自在に(と言っても2色のグラデーションですが)変えれるので,アプリのUIに合わせやすいかと思います.
KRProgressHUD
CocoaPods化するにあたっては,以下の記事を参考にさせていただきました.
途中まではうまくいっていたのですが,実際にpod install
してデモを作ろうとすると読み込みはうまくいくのにクラスが使えない,,,
という状況に陥り何回もやり直したり.podspec
いじったりして,数時間が消えていきました.
まあ原因は,外から使いたいものにpublic
修飾子をつけていなかっただけでした..orz
private
修飾子は意識してつけまくっていたのですが,何もつけない場合はinternal
になり,ライブラリ化した場合はアクセスできないということを完全に忘れていました.
普段使うUtilityファイルはプロジェクトにそのままぶち込んで使っていたので問題になっていなかっただけでした.
まあ今回の件でpublic
とinternal
の動作の違いについて学べたので良しとしましょう.(^^;
まとめ
今回は既存のライブラリ+αといった感じでしたが,CocoaPodsのライブラリ作成の流れなどがわかり,楽しかったです.
ここもカスタムしたい!とか,この書き方はFxxk you!などありましたら,コメントまたはGithubの方からお願いします.
それではよいiOSライフを!!!
更新履歴
- 2017/07/04 ver.3.0 用に更新しました.