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

访问量: 935

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); }

订阅/RSS Feed

Subscribe

分类/category