Problem with zIndex in view

You must Login before you can answer or comment on any questions.

Hello Guys, I'm with a problem that does not know how to solve. I have within the window "A", three views and three buttons. Each button activates a view (all are with zIndex). And in the "B", a blank window (just to illustrate the example). When the window opens, the first view is displayed. But if I click on the third button, for example, and open the "B", when I return to the window "A" to the third view, which was the last I clicked view, is not being displayed. The first view is again displayed. But I would like to keep the screen the way I left.

Does anyone know how to solve this?

Thanks!

— asked 3 years ago by Mauricio Rodrigues
2 Comments
  • Could you post sample code? It's hard to help w/o some code.

    — commented 3 years ago by Minh Nguyen

  • One moment please, while i write the code

    — commented 3 years ago by Mauricio Rodrigues

2 Answers

Accepted Answer

Try this:

bt1.addEventListener('click',function(e){  
    vw1.zIndex = 10;
    vw2.zIndex = 1;
    vw3.zIndex = 1;
 
    viewContainer.animate({
        view: vw1,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
    },function(){
        win1.setTitle('Showing view 2');          
    });   
});
 
bt2.addEventListener('click',function(e){
    vw1.zIndex = 1;
    vw2.zIndex = 10;
    vw3.zIndex = 1;
 
    viewContainer.animate({
        view: vw2,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
    },function(){
        win1.setTitle('Showing view 2');          
    });   
});
 
bt3.addEventListener('click',function(e){ 
    vw1.zIndex = 1;
    vw2.zIndex = 1;
    vw3.zIndex = 10;
 
    viewContainer.animate({
        view: vw3,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
    },function(){
        win1.setTitle('Showing view 2');          
    });   
});

here is the code:

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
 
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
 
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
 
var tab1 = Titanium.UI.createTab({  
    title:'Tab 1',
    window:win1
});
 
var vw1 = Ti.UI.createView({
    backgroundColor:'blue',
    width:1024,
    height:597,
    zIndex: 4,
    top:0
});
 
var vw2 = Ti.UI.createView({
    backgroundColor:'red',
    width:1024,
    height:597,
    zIndex: 3,
    top:0
});
 
var vw3 = Ti.UI.createView({
    backgroundColor:'orange',
    width:1024,
    height:597,
    zIndex: 3,
    top:0
});
 
var viewContainer = Ti.UI.createView({
    width:1024,
    height:597,
    top:0
});
 
viewContainer.add([vw1,vw2,vw3]);
 
var viewButtons = Ti.UI.createView({
    backgroundColor:'black',
    height:58,
    width:500,
    bottom:0
});
 
var bt1 = Ti.UI.createButton({
    top:0,
    width: 171,
    height: 50,
    left:0,
    title: 'Show View 1',
    style: Ti.UI.iPhone.SystemButtonStyle.PLAIN 
});
 
var bt2 = Ti.UI.createButton({
    top:0,
    width: 171,
    height: 50,
    left:171,
    title: 'Show View 2',
    style: Ti.UI.iPhone.SystemButtonStyle.PLAIN
});
 
 
var bt3 = Ti.UI.createButton({
    top:0,
    width: 171,
    height: 50,
    left:342,
    title: 'Show View 3',
    style: Ti.UI.iPhone.SystemButtonStyle.PLAIN
});
 
viewButtons.add([bt1,bt2,bt3]);
 
win1.add([viewContainer,viewButtons]);
 
bt1.addEventListener('click',function(e){  
    viewContainer.animate({
        view: vw1,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
    },function(){
        win1.setTitle('Showing view 2');          
    });   
});
 
bt2.addEventListener('click',function(e){  
    viewContainer.animate({
        view: vw2,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
    },function(){
        win1.setTitle('Showing view 2');          
    });   
});
 
bt3.addEventListener('click',function(e){  
    viewContainer.animate({
        view: vw3,
        transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_RIGHT
    },function(){
        win1.setTitle('Showing view 2');          
    });   
});
 
 
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    title:'Tab 2',
    window:win2
});
 
var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 2',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
 
win2.add(label2);
 
//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
 
 
// open tab group
tabGroup.open();

— answered 3 years ago by Mauricio Rodrigues
answer permalink
1 Comment
  • If you want to create a test application in Titanium, paste the above code in the file app.js and run the project, it will work. It was exactly what I did now.

    Thus, the problem better spread.

    — commented 3 years ago by Mauricio Rodrigues

Your Answer

Think you can help? Login to answer this question!