Command disabled: backlink

ローディング画面

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

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

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

iOSローディング画面

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

Style Titanium.UI.iPhone.ActivityIndicatorStyle

PLAINdefault サイズ普通 色白
BIGサイズ大 色白
DARKサイズ普通 色灰色

Tabgroupでの扱い

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

Universal Modal Activity Indicator for iOS

Androidローディング画面

  • 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();
titanium/indicator.txt · 最終更新: 2012/07/03 02:04 by enibloadmin
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0