loading
Development

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

今回はTitaniumでiOS開発をしていて見つけたテクニックを紹介します。慣れている人なら当たり前のことかもしれませんが僕は自分でこのテクニックを見つけてTitaniumのコツを掴んだような気がしました。

NavBarとは

Windowの上部に表示されるエリアでiOSではウィンドウのタイトルや、画面遷移するボタンを左右に表示させるためのものです。

これは Ti.UI.NavigationWindow や TabGroup を親に持つWindowで表示されます。なので親の存在しないWindowオブジェクトに対していくらtitle要素やbarColorを設定しても全く表示されないので注意が必要です。

<Alloy>
  <NavigationWindow platform=”ios”>
<Window title=”test”>
</Window>
</NavigationWindow>
</Alloy>

=>この場合はNavBarが表示されてタイトルにtestが入る

スクリーンショット 2014-02-08 15.52.26

<Alloy>
<Window title=”test”>
</Window>
</Alloy>

=> NavBarエリアは表示されない

スクリーンショット 2014-02-08 15.53.23

 

NavBarのタイトルエリアのAPI

タイトルエリアには通常、Windowのtitleプロパティにセットされた文字列が表示されます。これを独自のUIを変えるためにはWindowのtitleControlというプロパティを利用します。

Titanium 3.Xドキュメントには以下のように書いてあります。(2014年2月8日現在)

titleControl : Titanium.UI.View
View to show in the title area of the nav bar.

つまりWindow.titleControlには Ti.UI.View そのものか Ti.UI.View を継承しているオブジェクトがセットできるということです。

ただしこれは1つまでという制限があります。例えばLabelはTi.UI.Viewを継承しているオブジェクトなのでtitleControlにセットできますが、2つ連続でセットしても後勝ちになってしまい、この方法では複数のLabelは表示できません。

views/index.xml

<Alloy>
<NavigationWindow id=”navigationWindow”>
<Window id=”mainWIndow”>
</WIndow>
</NavigationWindow>
</Alloy>

controllers/index.js

$.navigationWindow.open();
$.mainWindow.titleControl = Ti.UI.createLabel({ text: ‘hoge’ });
$.mainWindow.titleControl = Ti.UI.createLabel({ text: ‘fuga’ });

=> これではタイトルエリアに fuga が表示される(厳密にはhogeが一瞬表示された後にfugaに置き換わる挙動をする)

スクリーンショット 2014-02-08 16.09.06

 

Ti.UI.Viewでラップすれば複数表示できる

そうなんです。Viewオブジェクトは子供を持てる仕様なのです。ですから複数の要素を表示させたい場合はプレーンなViewをコンテナーとして扱い子供に複数のオブジェクトを配置すればいいんですね。

var titleContainer = Ti.UI.createView();
titleContainer.add(Ti.UI.createLabel({ text: ‘hoge’ }));
titleContainer.add(Ti.UI.createLabel({ text: ‘fuga’ }));
$.mainWindow.titleControl = titleContainer;

=> titleControlには1つのViewしかセットしていないので複数のLabelが表示される

スクリーンショット 2014-02-08 16.14.42

 

あ、でも重なってしまった…という場合は

layoutオプションで子供たちを重ならないように配置させる

こんな時のためにlayoutオプションという便利なものがTianiumには用意されているんですね。

使いかたは並ばせたい複数の要素を内包している親要素に対して指定します。今回は横に重ならないように並ばせたいので layout: ‘horizontal’ を使いました。

var titleContainer = Ti.UI.createView({ layout: ‘horizontal’ });

=> 子どもたちは重ならずに整列

スクリーンショット 2014-02-08 16.21.21

 

あれ…でも今度は変な位置になってしまいましたね。

Ti.UI.SIZEで中身の要素のサイズに合わせる

なぜ左上にLabelが移動してしまったのか、それはコンテナビューのエリアが割りと広めに確保されているかなんですね。
背景色をつけてみるとわかりやすいです。

スクリーンショット 2014-02-08 16.24.19

 

この状態で「横に並んで!」と言ったら左上に来てしまうのも無理は無いかと。

またこんな時のためにTitaniumには便利なAPIが用意してあって、コンテナ要素のwidthとheightにTi.UI.SIZEというものをセットしておくと、子供の要素の大きさに合わせて自身のサイズを設定してくれるんですね。

var titleContainer = Ti.UI.createView({
layout: ‘horizontal’,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});

=> 子供のサイズが親に反映される

スクリーンショット 2014-02-08 16.28.22

 

いい感じです。

次回につづく

なんか一つ一つ順を追って紹介していたら長くなってしまったのでこの続きは後編にしたいと思います。

次は今回の配置テクニックを活かしてローディング感のある見た目にしてみたいと思います。

標準