Question

I’m placing a view (viewB) over the top of another view (viewA). The lower viewA has two buttons, btn1 can be clicked and btn2 can not. Ideally I would like to pass the click propagation from viewB to btn2.

I realise the problem is to do with the zIndex on viewB being higher then viewA, which means btn2 is technically behind it, although the button is fully visible.

It there anyway to pass the click propagation down without restructuring it?

This is a very simplified version of the real code and simply adding btn2 to viewB is not possible, the exact position of btn2 in the real code is unknown, it’s a child of a number of other views all with their own tops and lefts.

If it’s not possible I’m equally interested in hearing that. Thanks.

Build for iPhone/iPad
Ti.SDK 2.0.2.v20120417133255
Ti.Studio 2.0.1
xCode 4.3.2


var w

in = Titanium.UI.createWindow({  
    backgroundColor:'#fff'
});

var viewA = Ti.UI.createView({
        backgroundColor: '#DDD',
});

var btn1 = Ti.UI.createButton({
        top: 50,
        title: 'Click 1',
        height: 50,
        width: 150,
        zIndex: 100,
});
btn1.addEventListener('click', function(){
        alert('click 1');
});
viewA.add(btn1);


var btn2 = Ti.UI.createButton({
        top: 150,
        title: 'Click 2',
        height: 50,
        width: 150,
        zIndex: 100,
});
btn2.addEventListener('click', function(){
        alert('click 2');
});
viewA.add(btn2);

var viewB = Ti.UI.createView({
        top: 120,
        zIndex: 20,
        borderWidth: 1,
        borderColor: '#0000FF',
        // backgroundColor: '#0000FF',
        // opacity: 0.5
});

win.add(viewA);
win.add(viewB);


win.open();
var win = Titanium.UI.createWindow({  
    backgroundColor:'#fff'
});

var viewA = Ti.UI.createView({
        backgroundColor: '#DDD',
});

var btn1 = Ti.UI.createButton({
        top: 50,
        title: 'Click 1',
        height: 50,
        width: 150,
        zIndex: 100,
});
btn1.addEventListener('click', function(){
        alert('click 1');
});
viewA.add(btn1);


var btn2 = Ti.UI.createButton({
        top: 150,
        title: 'Click 2',
        height: 50,
        width: 150,
        zIndex: 100,
});
btn2.addEventListener('click', function(){
        alert('click 2');
});
viewA.add(btn2);

var viewB = Ti.UI.createView({
        top: 120,
        zIndex: 20,
        borderWidth: 1,
        borderColor: '#0000FF',
        // backgroundColor: '#0000FF',
        // opacity: 0.5
});

win.add(viewA);
win.add(viewB);


win.open(
);

Answer 1

I’m sure after I answer this and have implemented the solution in my app someone will have come back with a better way!

I looked at a couple of ways to solve this, finding the exact position of btn2 and adding it to view2, auto heights would often cause problems and it would end up within +-20px. Not good enough.

The solution I went with was to punch a hole in the view2 layer by creating view2 from a number of other views (topView, leftView, rightView and bottomView), these would then be buffered up to each other with a hole being left where btn2 is located. This solution severely surfers from scalability. Add a btn3, btn4… the number of views needed to create view2 becomes increasingly more and increasingly more difficult to layout.

I’m aware of the shortcomings of this solution and only suggest it as an option until something better can be found.