Skip to content

Instantly share code, notes, and snippets.

@raulriera
Created January 24, 2013 12:37
Show Gist options
  • Save raulriera/4621047 to your computer and use it in GitHub Desktop.
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)
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;
@Digibix
Copy link

Digibix commented Jan 25, 2013

Hi Raul.... can you include an example of how to use it?

@MoinPansare01
Copy link

really nice post

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment