Back

Titanium api: 展现层小动画 activity indicator, progress bar

发布时间: 2015-01-07 23:30:00

refer to: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ActivityIndicator

Activity Indicator 用来告诉用户，你正在点击啥啥。。。

ProgressBar 告诉用户，当前进度是多少多少。。。。

ProgressIndicator ，跟ActivityIndicator 基本一个作用。

对于用户体验都特别重要。

代码的例子：

Ti.UI.backgroundColor = 'white';

var win1 = Ti.UI.createWindow({
  backgroundColor: 'blue'
});

var win2 = Ti.UI.createWindow({
  backgroundColor: 'yellow',
  fullscreen: true
});

var style;
if (Ti.Platform.name === 'iPhone OS'){
  style = Ti.UI.iPhone.ActivityIndicatorStyle.DARK;
}
else {
  style = Ti.UI.ActivityIndicatorStyle.DARK;
}
var activityIndicator = Ti.UI.createActivityIndicator({
  color: 'green',
  font: {fontFamily:'Helvetica Neue', fontSize:26, fontWeight:'bold'},
  message: 'Loading...',
  style:style,
  top:10,
  left:10,
  height:Ti.UI.SIZE,
  width:Ti.UI.SIZE
});

// The activity indicator must be added to a window or view for it to appear
win2.add(activityIndicator);

// eventListeners must always be loaded before the event is likely to fire
// hence, the open() method must be positioned before the window is opened
win2.addEventListener('open', function (e) {
  activityIndicator.show();
  // do some work that takes 6 seconds
  // ie. replace the following setTimeout block with your code
  setTimeout(function(){
    e.source.close();
    activityIndicator.hide();
  }, 6000);
});

win1.open();
win2.open();

使用两个 alloy views来实现上面的代码：

win1.xml: 
<Alloy>
    <Window onOpen="openWin2" backgroundColor="blue" />
</Alloy>  
win1.js:

function openWin2 () {
    var win2 = Alloy.createController('win2').getView();
    win2.open();
}

win2.xml:
<Alloy>
    <Window onOpen="showIndicator" fullscreen="true" backgroundColor="yellow">
</Alloy>

win2.js:

function showIndicator(e){
    $.activityIndicator.show();
    // do some work that takes 6 seconds
    // ie. replace the following setTimeout block with your code
    setTimeout(function(){
        e.source.close();
        $.activityIndicator.hide();
    }, 6000);
}

Back