SDK 2.0 and fluid height on views

Question

SDK 2.0 and fluid height on views

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

I have a TabGroup with a headerView set to it. I'm trying to make this headerView expandable, depending in the content. In other words, I need a fluid layout on the height of the view.

If we use this 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();
 
// win1
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
 
var label1 = Titanium.UI.createLabel({
    text:'test'
});
 
var header = Titanium.UI.createView({
    height:Ti.UI.SIZE,
    width:Ti.UI.FILL
});
header.add(label1);
 
var tableView = Titanium.UI.createTableView({
    data:[Ti.UI.createTableViewRow({title:'a',height:30}), Ti.UI.createTableViewRow({title:'b',height:30})],
    headerView:header
});
win1.add(tableView);
 
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    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();

It will look like this: http://d.pr/i/565J

If you notice, this is after I scroll. One thing noticeable is that the view is occupying the whole space from the window, so the Ti.UI.SIZE won't work at all.

How can we actually mimic the old 'auto' from 1.8.2 in our view? Is this actually possible? I thought that using Ti.UI.SIZE (in this case) would mimic the 'auto' as 1.8.2.

Thanks in advance.

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Demostenes, I've got good news and bad news. The bad news is that you are absolutely right, the Ti.UI.SIZE attribute is not behaving as it should in this case. You are correct in your understanding of it, it's just not working right. I replicated your problem on my end.

The good news is that this problem has been resolved in the latest continuous integration builds of Titanium. I tested this code myself against the latest and the headerView resizes appropriately. Check out the master branch at the following link to get the latest CI build: http://builds.appcelerator.com.s3.amazonaws.com/index.html

Answer 2

Try adding height:Ti.UI.SIZE and width:Ti.UI.SIZE on your label.