loading
Development

TitaniumでiOSのNavBarにローディング中を示す表示をしてみる 後編

前回はWindowのタイトルエリアに複数のLabelを追加して中央位置に方法をご紹介しました。今回はこれを応用してグルグルと回りいかにもローディング中ですよ！という感じの見た目にしてみたいと思います。

ImageViewでGIFアニメは動かない

Webの技術を応用してネイティブアプリ開発が出来るTitaniumですがImageViewにGIFアニメを表示させてみても動かないのです。

ではどうするか。ImageViewには画像のパスやバイナリを入れる image というプロパティの他に images というものも用意されてます。

Array of images to animate, defined using local filesystem paths, File objects, remote URLs (Android only), or Blob objects containing image data.Blob and File objects are not supported on Mobile Web.

ドキュメントでは上記のように説明されていて、画像パスの文字列か、画像のバイナリデータか、Fileオブジェクトのインスタンス、いずれかのデータを配列に格納したパラメータを設定できます。
この配列にアニメのコマごとの画像を渡すことでアニメーションを実現できる仕組みです。若干めんどくさいですね。

ローディング画像を用意する

ではローディング画像を用意しましょう。Ajaxload – Ajax loading gif generator というサイトで手軽にいわゆる”ぐるぐる”が生成できるのでこれを利用します。

スクリーンショット 2014-02-10 11.24.51

 

ダウンロードしたGIFをphotoshopで開くとコマごとにレイヤーに分割されて読み込まれました。全部で12個のレイヤーがあります。

スクリーンショット 2014-02-10 11.26.28

 

ちょっとめんどくさいんですが、レイヤーごとにWeb用に保存でpngに書き出しました。もしかしたら全レイヤーを別々に書きだす方法もあるかもしれませんが見つけられませんでした。

スクリーンショット 2014-02-10 11.28.42

 

ちなみにフォルダに入れてファイル名にコマの番号を振っておくと扱いやすいかと思います。

素材ができたのでImageViewに設定してみます。ControllerでImageViewを生成してimagesに複数画像を設定します。材画像は66×66サイズだったのでRetinaを考慮して33×33にしておきます。

var spinner = Ti.UI.createImageView({
 images: [
 '/images/spinner/1.png',
 '/images/spinner/2.png',
 '/images/spinner/3.png',
 '/images/spinner/4.png',
 '/images/spinner/5.png',
 '/images/spinner/6.png',
 '/images/spinner/7.png',
 '/images/spinner/8.png',
 '/images/spinner/9.png',
 '/images/spinner/10.png',
 '/images/spinner/11.png',
 '/images/spinner/12.png'
 ],
 width: 33,
 height: 33
 });

前回で紹介した通りコンテナとなるViewを生成して格納しておきます。

var titleContainer = Ti.UI.createView({
 width: Ti.UI.SIZE,
 height: Ti.UI.SIZE,
 layout: 'horizontal'
 });
titleContainer.add(spinner);
 $.mainWindow.titleControl = titleContainer;

ここでビルドしてみるとわかるのですが、画像は表示されません。

スクリーンショット 2014-02-10 11.40.46

 

これは画像は複数セットされているがアニメーションがスタートしていないためです。なので以下のようにstartメソッドを実行するようにしてビルドすれば画像が表示されます。

spinner.start();

スクリーンショット 2014-02-10 11.43.27

 

画像とNavBarの背景色があっていないのでちょっと変ですが、大目に見てください。style設定でNavigationWindowのbackgroundColorを#fffにすれば馴染むと思います。

Labelも一緒に入れてみる

これだけだとちょっと物足りないのでNow Loading…というLabelも並べてみます。

var title = Ti.UI.createLabel({
 text: 'Now Loading...'
 });
titleContainer.add(title);

するとこうなります。

スクリーンショット 2014-02-10 11.47.38

 

画像と文字がくっついてしまっていて見栄えが悪いので、Labelのleftプロパティに10を設定して再ビルドしてみると以下のようになりました。

スクリーンショット 2014-02-10 11.49.00

 

いい感じです。

まとめ

Titanium Mobileでの開発にはiOS SDKを直接あつかう本来の開発に比べると不自由な部分があるのは否めません。しかし今回ぐらいのカスタマイズが出来るのであれば割りと一般的なUIの構築には困らないのではないかと思います。まだまだ応用の効くAPIもあるかもしてないのでこれからも発見次第お伝えしていきたいと思います。

標準