Fixing a TableView to The Bottom on iOS -- The Appcelerator Way

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

Hey guys,

So I asked something over on stackoverflow to see if what I wanted to do was even possible, as I can't find a way to do it in Appcelerator. What I'm trying to do is make a tableView similar to the Messages app on iOS that I can do a couple things with.

Note, these are fake methods and won't actually work currently...

var data = [];
 
var tableView = Ti.UI.createTableView({
    height:200,
    width:Ti.UI.FILL,
    data:data,
    fixTo:'bottom' // The purpose here is to set it so that the tableView is fixed to the bottom vs the top. Content is then added upwards (if that makes sense) OR, if it's easier. Content is added the same, but the tableView just remains fixed to the bottom.
});
 
var row = Ti.UI.createTableViewRow({
    backgroundColor:'#ff0000',
    height:44,
    width:Ti.UI.FILL
});
 
tableView.appendRow(row); // This would just add the new message or whatever to the bottom of the tableview
tableView.scrollToBottom(); // This would scroll the tableView back to the bottom

I'd love to impliment something like this in Appcelerator, but honestly I know nothing about creating custom modules. Even if I did, is it possible to extend the Appcelerator TableView without copying the entire TiUiTableView files into the new custom module? Sorry if that's a stupid question, like I said, I know almost, if not exactly, nothing about creating appcelerator modules (although I wouldn't hate to learn).

As I mentioned, I asked over on stack overflow if it was possible to do what I wanted to do, and here's what I got as a response:

stackoverflow question

It seems like it should be pretty simple... but what do I know.

Thanks!

1 Answer

Accepted Answer

HI Michael

The tableView is just a special type of scrollView, the scrollView is a better fit for your needs as you do not have to try and 'fit' into the specifics of the tableView.

The code below shows how easy it is to achieve your request without any custom modules. You should be able to adapt it to your needs.

This is a proof of concept fully working code sample for you.

var win = Titanium.UI.createWindow({
    title : 'Win 1',
    backgroundColor : '#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window: win
});
 
var intContentCount = 0;
 
var scrollView = Ti.UI.createScrollView({
    backgroundColor: 'orange',
    contentHeight: 'auto',
    contentWidth: 'auto',
    height: Ti.UI.FILL,
    showHorizontalScrollIndicator: true,
    showVerticalScrollIndicator: true,
    width: Ti.UI.FILL
});
win.add(scrollView);
 
var view = Ti.UI.createView({
    backgroundColor: 'yellow',
    bottom: 0,
    height: Ti.UI.SIZE,
    layout: 'vertical',
    width: Ti.UI.FILL
});
scrollView.add(view);
 
var btnTest = Ti.UI.createButton({
    title: 'add another'
});
btnTest.addEventListener('click', function (e) {
    intContentCount = intContentCount + 1;
    // just adding a label here but your could add
    // a view and put a label and button inside if you wish
    var lbl = Ti.UI.createLabel({
        height: Ti.UI.SIZE,
        text: 'Example Content: ' + intContentCount,
        width: Ti.UI.FILL
    });
    view.add(lbl);
    scrollView.scrollToBottom();
});
win.setRightNavButton(btnTest);
var tabGroup = Titanium.UI.createTabGroup();
tabGroup.addTab(tab1);
tabGroup.open();

Your Answer

Think you can help? Login to answer this question!