1

I have a tablet app with a Master / Detail layout, with a TableView in the Master panel that changes the content of the Detail pane. I'd like to have the master's row stay highlighted when clicked like it does in the android OS settings.

Right now the best I'm able to do is set the backgroundColor to a new color in response to a 'click' event. However, when I do a quick tap, the row highlights, then blinks back to normal before highlighting again. I'm guessing this is the delay between when I lift my finger off and when the backgroundColor gets changed.

tableview.addEventListener('click', function(e) {
    ...
    else if (e.rowData.id == 3) { // scan history
        e.row.backgroundColor = 'blue';

This appears to be the way others have done it: http://developer.appcelerator.com/question/124359/android---tableviews-deselectrow

And if I was just using android and not Titanium: How can I highlight the table row on click ?

Community
  • 1
  • 1
Scott Driscoll
  • 2,869
  • 2
  • 23
  • 22

2 Answers2

1

Try this instead. The touch start is called immediately, while the click usually is not. Note that according to the docs a scroll event and a touch event cant happen concurrently for iOS and Android, so you probably want to handle the touchcancel event also if you have a `touchstart`` listener.

tableview.addEventListener('touchstart', function(e) {
    ...
    // Get the source row, and then get its id
    else if (e.source.id == 3) { // scan history
        e.row.backgroundColor = 'blue'; 
});

EDIT: Maybe a better way to do this would be to handle the touchend event. This would handle bothe the quick taps, the user sliding to a different row, and the scrolling edge cases.

Josiah Hester
  • 6,065
  • 1
  • 24
  • 37
  • While I think this would create a faster background color change, it has additional complications. No row data is transfered with the touchstart events, so I'd have to figure out the row with the x and y coordinates of the touch. I'd also have to handle the case where a user touches down on one row but then slides to another before releasing. thanks for the suggestion! – Scott Driscoll Jan 28 '13 at 18:41
  • Actually you can get the row data through the `source` attribute of the event `e`. And maybe what you want instead is the `touchend` event to handle the sliding, but, note that a `scroll` event on a table can not happen concurrently with a `touch` event on a row. – Josiah Hester Jan 28 '13 at 19:00
  • the source object returned is the tableview, not the row. I tried adding a touchend listener to each individual row, but that was never called. A 'click' listener on each individual row did work, interestingly. I could always use the x, y to figure out the row from the tableview touchend event. Thanks again for the followup. – Scott Driscoll Jan 30 '13 at 20:15
1

When creating your row, use:

selectionStyle : "NONE"

This prevents it from changing color on click/touch

And roll your own event listeners to govern exactly when your row is highlighted.

The iOS blue row selection color is something like: "#006EF1"

jsplaine
  • 612
  • 5
  • 16