钛金属显示活动指示器

Question

我在android中使用进度条，但在钛中，它的活动指示器用于显示在android中后台发生的一些进度，我通过制作异步任务来做到这一点，但在钛中，我应该在哪里编写处理后台任务的代码，意味着直到我的后台任务未完成 daisply 指示器并在完成后自动隐藏...我的活动指示器代码和我想在后台显示它的任务如下..

     var ind = Titanium.UI.createActivityIndicator({
            location:Titanium.UI.ActivityIndicator.DIALOG,
            //type:Titanium.UI.ActivityIndicator.DETERMINANT,

           width:50,
height:50,
message: 'loading...',
color: 'FF0000'
    });
         curWin.add(ind);
         ind.show();



 and want to put below code which will be run on back ground.....





     var image = imgvwPlus.image; 
    var filename = new Date().getTime() + "-ea.jpg";
    bgImage =      Titanium.Filesystem.getFile(Titanium.Filesystem.externalStorageDirectory,filename);
    // Write the image to the new file (image created from camera)
    bgImage.write(image);
    imageArray.length = imageArray.length + 1;
            //alert(bgImage);
     custom[j]={"hanger":btntext[0].title,
        "color": btntext[1].title,
        "size":  btntext[2].title,
        "text": btntext[3].title,

        "textStyle": btntext[3].font.fontFamily,
        "textSize": btntext[3].font.fontSize,
        "textColor": btntext[3].color,

        "textTop":textTop,
        "textLeft":textLeft,
        "quantity":quantity, 
        "price":price
    };
    imageArray[i]={"img_path":bgImage,
        "imgPrice":imgPrice,
        "customization":custom
    };
      index = i;
      i++;
      imgvwPlus.image = 'images/Plus.jpg';
      btntext[0].title = 'Select';
      btntext[1].title = 'Select';
      btntext[2].title= 'Select';
      btntext[3].title = 'Select';
      btntext[3].font.fontFamily="Helvetica Neue";
      btntext[3].font.fontSize="15";
      btntext[3].color="#000";
      var win = Ti.UI.createWindow({
      title:'Popmount',
      //url:'popmount.js',
      param:imageArray,
      index:index,

    });
    //alert("image path"+win.param[0].img_path);
    Ti.UI.currentTab.open(win);

Answer 1

以下是更新后的代码，可与 Alloy Frame 配合使用，并在 iOS 和 Android 中均受支持。

indicator.xml

<Alloy>
    <Window class="container" >
        <View id='indicatorBack'/>
        <ActivityIndicator id='activityInd'/>
    </Window>
</Alloy>

indicator.tss

".container" : {
backgroundColor : 'transparent',
zIndex : 5000

},
"#indicatorBack[formFactor=handheld]" :{
opacity : 0.8,
height :  '50dp',
width :  '150dp',
borderRadius : 10,
backgroundColor : 'black'

},
"#indicatorBack[formFactor=tablet]" :{
opacity :0.8,
height : '70dp',
width : '170dp',
borderRadius : 10,
backgroundColor : 'black'
},
"#activityInd":{

    color : 'white',
    font : Alloy.Globals.fontLargeBold,
    message : ' Loading...',
    zIndex : 10,
    opacity : 1 
}

indicator.js

if (Ti.Platform.osname === 'ipad')
    $.activityInd.style = Titanium.UI.iPhone.ActivityIndicatorStyle.BIG;


$.indicator.showIndicator = function() {
    try {
        $.indicator.open();
        $.activityInd.show();

    } catch(e) {
        Ti.API.info("Exception in opening indicator");
    }

};
// Function to hide Indicator

$.indicator.hideIndicator = function() {
    try {
        $.activityInd.hide();
        $.indicator.close();
    } catch(e) {
        Ti.API.info("Exception in hiding indicator");
    }
};

$.activityInd.show();

Alloy.js

//Activity Indicator.
var indWin = null;

    Alloy.Globals.showIndicator = function() {
        try {
            if (indWin == null)
                indWin = Alloy.createController('indicator').getView();
            indWin.showIndicator();
        } catch(e) {
            Ti.API.info("Exception in opening indicator");
        }

    };
    // Function to hide Indicator

    Alloy.Globals.hideIndicator = function() {
        try {

            if (indWin != null) {
                indWin.hideIndicator();
                indWin = null;
            }
        } catch(e) {
            Ti.API.info("Exception in hiding indicator");
        }

    };

这样你就可以显示和隐藏它使用以下函数从任何控制器：

Alloy.Globals.showIndicator();

Alloy.Globals.hideIndicator();

此外，对于自定义消息，您可以在指标控制器中传递参数。

Answer 2

使用窗口中的onOpen来显示指示器。

样式

"#activityIndicator": {
    color: 'white',
    font: Alloy.Globals.fontLargeBold,
    message: 'Loading',
    style: Titanium.UI.iPhone.ActivityIndicatorStyle.BIG
}

视图

<Alloy>
    <Window onOpen="showIndicator" fullscreen="true" backgroundColor="yellow">
        <ActivityIndicator id="activityIndicator"/>
    </Window>
</Alloy>

控制器

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