ScrollableView in ListView
On 28 September 2014 in TechUsing ListView is all about mapping collection data structure to UI structure. What if we have a UI structure that have nested collection in a single ListItem, such as a ScrollableView? We have to make sure our data structure can map to the ScrollableView.views property.
News (data) | Ti.UI |
---|---|
previews[] | ScrollableView.views |
title | Label.text |
timestamp | Label.text |
The solution: we have to create each child view when setting items to ListView. Here’s how:
var win = Ti.UI.createWindow({ exitOnClose: true, title: 'ScrollableView in ListView' }); var newsTemplate = { childTemplates: [ { type: 'Ti.UI.View', properties: { width: 300, backgroundColor: '#fff', borderColor: '#ccc', layout: 'vertical', top: 10 }, childTemplates: [ { type: 'Ti.UI.ScrollableView', bindId: 'previews', properties: { width: 300, height: 150 } }, { type: 'Ti.UI.Label', bindId: 'title', properties: { color: '#333', width: Ti.UI.FILL, textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, left: 5, right: 5, wordWrap: false, ellipsize: true, font: { fontSize: '14dp', fontWeight: 'bold' } } }, { type: 'Ti.UI.Label', bindId: 'published', properties: { color: '#aaa', width: Ti.UI.FILL, textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT, left: 5, right: 5, wordWrap: false, ellipsize: true, font: { fontSize: '12dp' } } } ] } ] }; var sect = Ti.UI.createListSection(); var listView = Ti.UI.createListView({ templates: { news: newsTemplate, foot: { properties: { height: 10 } } }, backgroundColor: '#eee', separatorColor: '#eee', sections: [sect] }); win.add(listView); var data = [ { title: 'News A', timestamp: 1411789472624, previews: [ 'http://placehold.it/300x150/0099cc/ffffff', 'http://placehold.it/300x150/9933cc/ffffff', 'http://placehold.it/300x150/669900/ffffff', 'http://placehold.it/300x150/ff8800/ffffff' ] }, { title: 'News B', timestamp: 1411443872624, previews: [ 'http://placehold.it/300x150/cc0000/ffffff', 'http://placehold.it/300x150/33b5e5/ffffff', 'http://placehold.it/300x150/aa66cc/ffffff' ] }, { title: 'News C', timestamp: 1411184672624, previews: [ 'http://placehold.it/300x150/99cc00/ffffff', 'http://placehold.it/300x150/ffbb33/ffffff', 'http://placehold.it/300x150/ff4444/ffffff', 'http://placehold.it/300x150/0099cc/ffffff', 'http://placehold.it/300x150/9933cc/ffffff', ] } ]; win.addEventListener('open', function() { var items = []; var getDate = function(timestamp) { var d = new Date(timestamp); var m = d.getMonth() + 1; if (m > 12) { m = 1; } return d.getDate() +'/'+ m +'/'+ d.getFullYear(); }; for (var i = 0; i < data.length; i++) { var d = data[i]; var views = []; for (var j = 0; j < d.previews.length; j++) { views.push(Ti.UI.createImageView({ image: d.previews[j], width: 300, height: 150 })); } items.push({ template: 'news', previews: { views: views }, title: { text: d.title }, published: { text: 'Published on '+ getDate(d.timestamp) } }); } items.push({ template: 'foot' }); sect.setItems(items); }); win.open();
Output:
Related posts:
-
Titanium app hex color value with alpha channel
-
Android Popup Menu module for Titanium
-
Add project as library – Titanium module (Android)
-
Titanium Android keystore
-
Update iOS Titanium module SDK version
-
Indirect code execution flow
-
Use view from custom module inside Titanium ListViewItem
-
Restart ADB
-
Titanium iOS builder script
-
Load nib file in Titanium module iOS
Filed under Tech with tags Android, ListView, Titanium Mobile
Hi, I tried that, it works, but when I scroll the listView the images in the scrollableView will disappear on iOS….
Any solution?
Hello, I need create a ScrollableView with 2 Views.
Can you see demo prototipe un this jpg.
https://www.dropbox.com/s/0lzpe1x4flq49st/Captura%20de%20pantalla%202015-12-04%20a%20las%2013.53.05.png?dl=0
Any idea ? Thank you.
look nothing wrong with it, what actually you try to accomplish?