Question

I’m new to titanium and I,m trying to build some prototypes based on wireframes. Below is the wireframe that I’m trying to build as prototype.

What you see is a list of restaurants fetched from google places api. The main functionality here is the black strip which will be at a fixed position and holds the details of rating and reviews on a particular restaurant which is underneath it.

So if I scroll through the restaurants the black strip should get the rating details of that particular restaurant which is underneath it.

So far I was able to crawl the restaurants data from google places api into row of the table view.

I’m not sure what to call this functionality or how to achieve this.

Can you guys please give me direction to proceed ahead…

Answer 1

Wouldn’t it be much easier to just include it as a part of the row? Otherwise the user can only see one rows information at a time, which I would consider bad design.

More importantly, this will not work on iOS unless you add a lot of dummy table rows at the end of the TableView, since the user wont be able to scroll the bottom-most row to the top of the screen!

This tutorial shows you how to have custom table rows. Use it as a starting point to add your comment and like button images. I really see no other alternative, since your fixed position method requires hacking the TableView component or using transforms to move the bottom row to the top.

EDIT:

If you must do it this way, the best way forward would be to add a number of blank table rows to past the end of your real table rows so that the user can scroll all the way down to the last row with content (this way the fixed position can detect its over it).

Next create your view holding the three buttons, making sure its absolutely position in the window (so it stays fixed) and has a zIndex greater than the TableView:

var likeAndCommentHolderView = Ti.UI.createView({
    top : 45,
    left : 0,
    //.... etc
    zIndex : 101
});
window.add(likeCommentHolderView);

Now you have to figure out which row the user is over. This can be done using the scrollEnd event of a TableView and getting the contentOffset attribute of the event. The ‘scrollEnd’ event is triggered when the user has finished scrolling the rows in a tableView, it returns an event that has the contentOffset, which is just a measure of how much you have scrolled from the top of the tableView. Using simple math, calculate the offset divided by the rowHeight and that is the row index the user is looking at.

// Assume table view is at coordinates : top=45, left=0 and you have defined rowHeight
tableView.addEventListener('scrollEnd', function(e) {
    // Use this to determine which row your over
    var contentOffset = e.contentOffset;
    // Figure out the index
    var rowIndex = contentOffset / rowHeight;
    // Get the row, assume first section
    var section = tableView.data[0];
    var rowObject = section.rows[rowIndex];
    // Now update your UI with data from the row
    var name = rowObject.restaurantName;
});

Now you have the actual row object in the table, you can extract

This is only a general outline, this does not take into account some of the differences between platforms, I leave that to you to figure out, but this is a good general approach.