简体   繁体   中英

Titanium Android: How to animate a modal window?

I am developing an app for android on Titanium. In this app, I need to open a modal window for which I have the following code.

var window = Ti.UI.createWindow({
  title: "This is modal window"
});
// Add some elements to window
window.open({modal: true});

The problem here is that the window opens in a flash without any animation. I would like to have the modal window crawl from bottom to top while appearing on screen. How can I carry out this animation? I have also trued giving animation:true in window.open(), but didn't succeed.

There is no 'bottom to top' animation in Android by default. You can get a 'right to left' animation by default by creating a 'heavyweight' window. See the bottom of http://developer.appcelerator.com/doc/mobile/android/module_sdk

However, there seems to be a bug in 1.7.5 of the SDK so setting the modal:true property of a window on creation will not show the animation by default. But you can use any of the other properties described in the link above to make a heavyweight window and the animation will show. Here is some code that will show a default animation window opening in Android 2.1 and Appcelerator Mobile 1.7.5:

var win1 = Titanium.UI.createWindow({  
    title:'Win 1',
    backgroundColor:'#fff',
    exitOnClose : true
});

var button = Ti.UI.createButton({
    title: 'open',
    width:'80dp',
    height:'40dp'
});

button.addEventListener('click', function(){
    var win2 = Ti.UI.createWindow({
        title:'Example',
        backgroundColor:'blue',
        windowSoftInputMode:Ti.UI.Android.SOFT_INPUT_ADJUST_UNSPECIFIED  //** important to make a heavyweight window
    });
    win2.open({animated:true});
});

win1.add(button);
win1.open();

If you change the animated:true to animated:false the window will just appear and disappear when you open and close.

You could try to create your own animation to slide the window up from the bottom when opening the window, but I have never tried that on Android / Appcelerator.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM