BAD_ACCESS

おもにiOS、ときどき変な電子工作、ガジェット話。

オリジナルの「loadingView」をサクッとつくるために「SVProgressHUD」をforkしてみた。

Objective-C iPhone Github UI

標準のUIActivityIndicatorで満足できない方に

まずは超有名なこちらのSVProgressHUDをお試しすることをおすすめします。 これだけで、大概の方は用が足せてしまうのではないのでしょうか。

しかしながら、仕事上、または己のアプリのデザインポリシー上、特殊なローディングビューを使うことを余儀なくされている方は一度、次のリポジトリを試してみてはいかがでしょう。

somtd / SVProgressHUD

toggleView_design1

こちらは前述したSVProgressHUDを一部改変したものです。このライブラリを使うことで下記のことが実現できます。

  • ローディング中の背景画像とグルグル画像をお好きな画像に変えることができます。
  • ローディングのビューをお好きなアニメーションに変えることができます。

ローディング中画像の背景とグルグルを変えたい方

せっかくSVProgressHUDが用意してくれているシックなグレーの背景とUIActivityIndicatorが気に入らないという稀有な方に。

元のSVProgressHUDを使うように記述できます。 maskType:の引数としてSVProgressHUDMaskTypeCustomを指定してください。

ViewController.m

[SVProgressHUD showWithStatus:@"TEST" maskType:SVProgressHUDMaskTypeCustom];

テキストを表示しない場合、

ViewController.m

[SVProgressHUD showWithMaskType:SVProgressHUDMaskTypeCustom];

ぐるぐるを止める時、

ViewController.m

[SVProgressHUD dismiss];

※オリジナルの背景画像、グルグル画像への差し替え

SVProgressHUD.mで独自の背景、独自のグルグル画像を指定する必要があります。 ローディング画像のサイズはnon-retinaで36px-36px、retinaで72px-72pxぐらいになることを想定して作られています。（大きいサイズでも表示可能だと思いますが、バランスを確認していません。）

SVProgressHUD.m

NSString *const CUSTOM_HUD_BACKGROUND = @"custom_hud_bg.png";
NSString *const CUSTOM_SPINNER_IMAGE  = @"spinner.png";

ローディングビューを好きなアニメーションに変えたい方

せっかくSVProgressHUDがシンプルな読み込み中の画面を用意してくれているというのに、それが気に入らないだけでなく、さらに自分でアニメーションまで用意して使いたいという稀有な方に。

※背景は先程のカスタム背景画像と同じになることをご了承ください。 maskType:の引数としてSVProgressHUDMaskTypeAnimationを指定してください。

ViewController.m

[SVProgressHUD showWithStatus:@"TEST" maskType:SVProgressHUDMaskTypeAnimation];

テキストを表示しない場合、

ViewController.m

[SVProgressHUD showWithMaskType:SVProgressHUDMaskTypeAnimation];

ぐるぐるを止める時、

ViewController.m

[SVProgressHUD dismiss];

※オリジナルのアニメーション画像への差し替え

toggleView_design1

コマ画像のサンプルは、リポジトリの/Demo/Resources以下に保管されています。 デフォルトはspinner0@2x.png,spinner1@2x.png・・・のように連番で書き出しています。 独自の画像に置き換える場合、下記のようにSVProgressHUD.mでアニメーションのコマ画像、コマ数を指定する必要があります。

SVProgressHUD.m

//animation hud image setting
NSString *const ANIMATION_SPINNER_IMAGE  = @"spinner%d.png";//ファイル名の不変部分
const int ANIMATION_COUNT = 8;//コマ数

まとめ

以前の記事でUI周りのカスタマイズは結構需要がありそうな感じだったので、書きっぱなしにしてたものをまとめてみました。 使う中で不便に感じるところはまた書きなおしていこうと思います。 ローディングの画面に個性があると、アプリのオリジナリティが増すのではないでしょうか。

somtd / SVProgressHUD