Tuesday 28 May 2013

Loading Style for iPhone in Appcelerator(In ALLOY)

index.xml

<Alloy>
    <Window class="container">
        <View id="backdrop"/>
        <View id="container">
            <ImageView id="loader"/>
            <Label id="message" textid="Loading..."/>
        </View>
    </Window>
</Alloy>

index.js

$.loader.images = [
    '/img/loading/load-cloud1.png',
    '/img/loading/load-cloud2.png',
    '/img/loading/load-cloud3.png',
    '/img/loading/load-cloud4.png',
    '/img/loading/load-cloud5.png',
    '/img/loading/load-cloud6.png',
    '/img/loading/load-cloud7.png',
    '/img/loading/load-cloud8.png',
    '/img/loading/load-cloud9.png'
];

$.start = function() {
    $.loader.start();
};

$.stop = function() {
    $.loader.stop();
};

$.setMessage = function(key) {
    $.message.text = "Loading...";
};

$.start();


$.index.open();

index.tss

'#container': {
    layout:'vertical',
    height:Ti.UI.SIZE
},

'#backdrop': {
    backgroundColor:'#232323',
    opacity:0.75
},

'#loader': {
    width:'75dp',
    height:'46dp'
},

'#message': {
    color:'#ebebeb',
    textAlign:'center',
    height:Ti.UI.SIZE,
    width:Ti.UI.SIZE,
    font: {
        fontSize:'12dp',
        fontWeight:'bold',
        fontFamily : "PFDinDisplayPro-Regular"
    }
}





All the images, pleases download from this dropbox link

https://dl.dropboxusercontent.com/u/72783403/loading.zip

Screen Shot :)


 

No comments:

Post a Comment