ローディング画面

データを取ってくる間などにActivityIndicator を使ってローディング画面を表示することができます。

• showメソッドで表示、hideメソッドで非表示
• 同時に複数は表示できないのでWindowで１つ作っておき使いまわすといいかもしれません。
• 全画面で表示する場合はwidth,heightは“100%“にしておくといいと思います

iOS,Androidでは以下の動作の違いがあります。

• WindowかViewにIndicatorをaddする必要がある
  • view単位で表示が可能なので画像をネットからローディングしている間に表示することに使えたりもします
• styleプロパティでインジケータの形(大きさなど)を指定可能
• top,left,width,heightなども指定可能
• messageプロパティでローディング中にメッセージを表示可能 例：Now Loading
  • messageidというロケールIDも指定可能であるがmessageに言語別に指定すればいいだけなので使用しない

Style Titanium.UI.iPhone.ActivityIndicatorStyle

Tabgroupでの扱い

Windowにaddしても表示されないので調べるとTabGroupではTabGroup自体にAddする必要があるとのことでした。 TabGroupにaddすると表示はされるのですが、テキストが表示されません。 その上なぜかテキスト１文字文ぐらいの幅左にづれるのでテキストはとっておいた方がいいかもしれません。

Universal Modal Activity Indicator for iOS

• messageプロパティでローディング中にメッセージを表示可能 例：Now Loading
  • messageidというロケールIDも指定可能であるがmessageに言語別に指定すればいいだけなので使用しない

exportsを使ったサンプル

LoadingWindow.js

/** アクティブインジケータ */
var actInd;
/** タブグループ */
var tabGroup;
 
/**
 * タブグループ初期化
 * @param {TabGroup} setTabGroup
 * @param {String}	setLoadingStr
 */
exports.initTabGroup = function(setTabGroup,setLoadingStr){
	actInd = Ti.UI.createActivityIndicator({
      backgroundColor:'black',
      opacity:0.7,
      height: '100%',
      width: '100%',
      font: {fontSize:14, fontWeight:'bold'}
    });
    if(Ti.Platform.osname=="android"){
    	actInd.setMessage(setLoadingStr);
    }
    if(Ti.Platform.osname=="iphone"){
    	actInd.setStyle(Titanium.UI.iPhone.ActivityIndicatorStyle.BIG);
    }
    tabGroup = setTabGroup;
    tabGroup.add(actInd);
};
 
/**
 * ローディング画面表示
 */
exports.show = function(){
	actInd.show();
};
 
/**
 * ローディング画面非表示
 */
exports.hide = function(){
	actInd.hide();
};

使用例

//ローディング画面初期化
var LodingWindow = require('LoadingWindow');
LodingWindow.initTabGroup(tabGroup, "Now Loading");
//ローディング画面表示
LodingWindow.show();
//ローディング画面非表示
LodingWindow.hide();