Created
January 24, 2013 12:37
-
-
Save raulriera/4621047 to your computer and use it in GitHub Desktop.
Horizontal TableView for Titanium Appcelerator. This still needs some android love, trying to use an inverted tableview made the table impossible to scroll (on android)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function HorizontalTableView(options) { | |
// defaults params | |
var options = options || {}; | |
options.width = options.width || Titanium.Platform.displayCaps.platformWidth; | |
options.height = options.height || Titanium.Platform.displayCaps.platformHeight; | |
var isAndroid = Ti.Platform.osname === 'android'; | |
// On iOS we can do this, on Android there is some weird scrolling problems | |
if (!isAndroid) { | |
var self = Titanium.UI.createTableView({ | |
height : options.width, // inverted because we are rotating the tableview | |
width : options.height, // inverted because we are rotating the tableview | |
backgroundColor: 'transparent', | |
selectionStyle: "none", | |
separatorStyle: "none", | |
isAtBottom: true // init this custom property | |
}); | |
// Rotate the whole thing | |
self.transform = Titanium.UI.create2DMatrix().rotate(-90); // why we swapped the height and width values | |
} else { | |
var self = Titanium.UI.createScrollableView({ | |
width : options.width, | |
height : options.height, | |
backgroundColor: 'transparent', | |
selectionStyle: "none", | |
separatorStyle: "none", | |
isAtBottom: true // init this custom property | |
}); | |
} | |
// Append functions to this "new view" | |
self.addRow = function(view) { | |
if (!isAndroid) { | |
var row = Titanium.UI.createTableViewRow({ | |
width: view.height, // inverted again (see tableview definition) | |
height: view.width, // inverted again (see tableview definition) | |
selectedBackgroundColor: "transparent", | |
className: "horizontalTableViewRow" | |
}); | |
// Rotate the view | |
view.transform = Titanium.UI.create2DMatrix().rotate(90); | |
row.add(view); | |
self.appendRow(row); | |
} else { | |
// On Android is easier of course | |
self.addView(view); | |
} | |
}; | |
// Scroll to bottom function | |
self.scrollToBottom = function(){ | |
if (!isAndroid) { | |
self.scrollToIndex((self.data[0].rows.length-1)); | |
} else { | |
self.scrollToView(self.getViews().length-1); | |
} | |
self.isAtBottom = true; | |
}; | |
// Flag it as soon as the table starts scrolling | |
if (!isAndroid) { | |
self.addEventListener('scroll', function(evt) { | |
self.isAtBottom = false; | |
}); | |
} | |
// Listen for everytime the table is scrolled | |
self.addEventListener('scrollEnd', function(evt) { | |
// Check if the tableview is currently at the bottom | |
if (!isAndroid) { | |
if (evt.contentOffset.y + evt.size.height + 100 > evt.contentSize.height) { | |
self.isAtBottom = true; | |
} else { | |
self.isAtBottom = false; | |
} | |
} else { | |
if (self.currentPage == (self.views.length-1)) { | |
self.isBottom = true; | |
} else { | |
self.isAtBottom = false; | |
} | |
} | |
}); | |
return self; | |
}; | |
module.exports = HorizontalTableView; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi Raul.... can you include an example of how to use it?