How to create a table with fixed length inside a scrollView in Appcelerator Titanium?

Question

I'm trying to add some imageViews and a tableView into scrollView in Titanium. I want the scrollView to be scrollable but not the tableView inside, so I set tableView.scrollable to false. However, even if the height of the scrollView exceeds the height of the screen, it is not scrollable. Since it's not encouraged to put a tableView inside a scrollView, I'm wondering if there is a better way to create a table with fixed length inside a scrollView in Titanium?

The following is my code:

var view = Ti.UI.createScrollView({
    contentWidth:'auto',
    contentHeight:'auto',
    top:0,
    showVerticalScrollIndicator:true,
    showHorizontalScrollIndicator:true,
});

var imageview1 = Ti.UI.createImageView({
    image: "../images/headers/gscs_logo.png",
    height: 80,
    left: 10,
    right: 10,
    top: 10,
});

var imageview2 = Ti.UI.createImageView({
    image: "../images/headers/wellness_logo.png",
    height: 80,
    left: 10,
    right: 10,
    top: 90,
});

view.add(imageview1);
view.add(imageview2);

var tableview = Ti.UI.createTableView({
    data: [{title:'a'}, {title:'b'}, {title:'c'}, {title:'d'}, {title:'e'}, {title:'f'}, {title:'g'}],
    top: 180,
    scrollable: false,
});

view.add(tableview);

Ti.UI.currentWindow.add(view);

This is the window I got (StackOverflow does not allow new users to post images, sorry).

This is the window I want. The table has fixed number of rows and its parent view can be scrolled.

I have also tried to set currentWindow.layout to "vertical", but that failed since neither the scrollView nor the tableView would show up.

Thank you for your patience and help!

You shouldn't add a UITableView to a UIScrollView, as the touch events will not be sent properly. — msgambel
@MSgambel I know this is not good, but I can't think of a better solution. — Mr.Teen
Try this one, its work for me: ------------------------------[enter link description here][1] [1]: stackoverflow.com/questions/23242298/… — Dinesh R Rajput
Try this one, its work for me:- stackoverflow.com/questions/23242298/… — Dinesh R Rajput
Try this one [Link][1] [1]: stackoverflow.com/questions/23242298/… Heading ## — Dinesh R Rajput

Mr.Teen Mr.Teen · Accepted Answer · 2011-11-18T03:51:48

After looking at Kitchen Sink, Titanium's demo app, I figured out how to do this: just set tableview.style to Titanium.UI.iPhone.TableViewStyle.GROUPED, and and set the imageView as tableview.headerView.

var imageview = Ti.UI.createImageView({
    image: "../images/headers/bakerinstitute_logo.png",
    height: 100,
    left: 40,
    right: 40,
    top: 10,
});

var tableview = Ti.UI.createTableView({
    data: [{title:'a', header:'first one'}, {title:'b'}, {title:'c'}, {title:'d'}, {title:'e'}, {title:'f'}, {title:'g'}, {title:'h'}, {title:'i'}, {title:'j'}, {title:'k', header:'last one'}],
    style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
    backgroundColor:'transparent',
    rowBackgroundColor:'white',
    headerView: imageview
});

Ti.UI.currentWindow.add(tableview);

How to create a table with fixed length inside a scrollView in Appcelerator Titanium?

2 Answers