Hide a view in Titanium so that it does not take physical space - titanium

Question

In titanium it is possible to hide a view like so:
$.foo.hide()
or
$.foo.visible = false
However, in both cases the object still seems to take physical space. It is just invisible. In other words it is similar to the CSS property visibility: hidden.
I want it so that it disappears and take no physical space in terms of width or height, so it's similar to the CSS property display: none
How can I do this?
The best hacky solution I have is the following:
$.foo.width = 0;
$.foo.height = 0;
$.foo.left = 0;
$.foo.right = 0;
But that means when I want to make it visible again, I have to set all those properties back to their original values which is a pain and hard to maintain.

Answer 1

First of all, don't afraid of doing some hard coding ;)
Coming to your query, yes, this is true that hiding a view just hide it from UI, but physical-space is still there.
To do what you want, you will need to either remove view on hide & create it on show, or you can use absolute layout in some tricky way.
Other way could be to animate this view using transform property like this:
// on hide
$.foo.animate({
duration : 100,
transform : Ti.UI.create2DMatrix({scale:0})
}, function () {
$.foo.visible = false;
});
// on show
$.foo.visible = true; // we need to make it visible again before resetting its UI state since we hid it after completion of animation in above code
$.foo.animate({
duration : 100,
transform : Ti.UI.create2DMatrix() // passing empty matrix will reset the initial state of this view
});
OR
this could also work but never tried this:
// on hide
$.foo.transform = Ti.UI.create2DMatrix({scale:0});
$.foo.visible = false;
// on show
$.foo.visible = true;
$.foo.transform = Ti.UI.create2DMatrix();