Skip to content

Instantly share code, notes, and snippets.

@egomez99
Created June 10, 2013 23:18
Show Gist options
  • Save egomez99/5753307 to your computer and use it in GitHub Desktop.
Save egomez99/5753307 to your computer and use it in GitHub Desktop.
Scroll View as a Table View Create a scroll view that contains a set of views in a layout to resemble a table view with rows. NOTE: This approach may mitigate the native behavior of nesting 2 scrollable items but performance issues might come into play!
var win = Ti.UI.createWindow({
backgroundColor : 'white',
layout : "vertical"
});
function createRow(i) {
var row = Ti.UI.createView({
height: 45,
width: Ti.UI.SIZE,
top: 0, left: 0,
backgroundColor: 'red'
});
var section = require('scroll_views_tabs')();
row.add(section);
return row;
}
var scrollView = Ti.UI.createScrollView({
contentWidth : 'auto',
contentHeight : 'auto',
layout : 'vertical',
width : Ti.UI.FILL,
height : Ti.UI.FILL,
//scrollType: 'vertical'
});
for (var i = 0; i <= 20; i++) {
var row = createRow(i);
scrollView.add(row);
}
win.add(scrollView);
win.open();
function scroll_view_tabs() {
//
// HORIZONTAL SCROLLING TABS
//
var scrollView = Titanium.UI.createScrollView({
contentWidth:500,
contentHeight:50,
top:10,
height:50,
width:230,
borderRadius:10,
backgroundColor:'#13386c'
});
var view1 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:10
});
scrollView.add(view1);
var l1 = Ti.UI.createLabel({
text:'1',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view1.add(l1);
var view2 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:60
});
scrollView.add(view2);
var l2 = Ti.UI.createLabel({
text:'2',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view2.add(l2);
var view3 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:110
});
scrollView.add(view3);
var l3 = Ti.UI.createLabel({
text:'3',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view3.add(l3);
var view4 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:160
});
scrollView.add(view4);
var l4 = Ti.UI.createLabel({
text:'4',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view4.add(l4);
var view5 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:210
});
scrollView.add(view5);
var l5 = Ti.UI.createLabel({
text:'5',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view5.add(l5);
var view6 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:260
});
scrollView.add(view6);
var l6 = Ti.UI.createLabel({
text:'6',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view6.add(l6);
var view7 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:310
});
scrollView.add(view7);
var l7 = Ti.UI.createLabel({
text:'7',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view7.add(l7);
var view8 = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:20,borderWidth:1,borderColor:'#336699',
width:40,
height:40,
left:360
});
scrollView.add(view8);
var l8 = Ti.UI.createLabel({
text:'8',
font:{fontSize:13},
color:'#fff',
width:'auto',
textAlign:'center',
height:'auto'
});
view8.add(l8);
return scrollView;
};
module.exports = scroll_view_tabs;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment