[TIMOB-16494] TiAPI: Allow multiple markers in ListView
| GitHub Issue | n/a |
| Type | New Feature |
| Priority | High |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2015-04-23T20:11:05.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 4.1.0 |
| Components | TiAPI |
| Labels | module_listview, qe-manualtest, qe-testadded, supportTeam |
| Reporter | Mostafizur Rahman |
| Assignee | Hieu Pham |
| Created | 2014-02-24T05:24:05.000+0000 |
| Updated | 2015-06-16T16:56:30.000+0000 |
Description
The current setMarker implementation works fine for a use case when you want to lazy-load data in a list or otherwise only care about scrolling in one direction. However, I have a use case in which I want to know if the user scrolls in either direction in a ListView. It appears that I can only set one marker on the list at a time.
In the attached project, I populate the list with 100 items, scroll to item 50, and set markers at 30 and 70. I would like the marker event to fire if the user scrolls to either item 30 or item 70. Right now, I have to choose one or the other, which means I can't implement my desired interface with a ListView.
If you allow setting multiple markers, perhaps it will be helpful to also add a clearMarkers method on ListView to remove them all at once.
Although I selected iOS as the platform in the ticket, I assume this impacts all platforms.
Attachments
master PR for Android: https://github.com/appcelerator/titanium_mobile/pull/6787 Testing code:
1. Run code and scroll down, check logs to confirm the events are fired correctly.function getData(section){ var data = []; for (i=0;i<150;i++){ data.push({ template:Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT, properties: { title:'SECTION '+section+' ITEM '+i, searchableText: 'SECTION '+section+' ITEM '+i }, }); } return data; } function getSections(){ //BOTH var section1 = Ti.UI.createListSection({ headerTitle:'Section 0 Header', footerTitle:'Section 0 Footer' }); //HEADER ONLY var section2 = Ti.UI.createListSection({ headerTitle:'Section 1 Header' }); //FOOTER ONLY var section3 = Ti.UI.createListSection({ footerTitle:'Section 2 Footer' }); //Neither var section4 = Ti.UI.createListSection(); section1.setItems(getData(0)); section2.setItems(getData(1)); section3.setItems(getData(2)); section4.setItems(getData(3)); return [section1,section2,section3,section4]; } var win = Ti.UI.createWindow({ title:'Headers & Footers' }); var platformName = Titanium.Platform.osname; var isIOS = (platformName == 'iphone' || platformName == 'ipad'); var listView = Ti.UI.createListView({ top: 20, caseInsensitiveSearch: true, sections:getSections(), headerTitle:'THIS IS LIST VIEW HEADER', footerTitle:'THIS IS LIST VIEW FOOTER. SHOULD BE AT BOTTOM' }); listView.addEventListener('marker', function(e) { Ti.API.info("Marker fired: Section " + e.sectionIndex + ", Item:" + e.itemIndex); }); win.add(listView); listView.addMarker({sectionIndex: 1, itemIndex: 4}); listView.addMarker({sectionIndex: 0, itemIndex: 80}); win.open();PR for iOS master - https://github.com/appcelerator/titanium_mobile/pull/6800
Verified the fix for both IOS and Android. Multiple markers are fired as expected in the console. Closing the feature. Environment: Appc Studio : 4.1.0.201505071004 Ti SDK : 4.1.0.v20150614181235 Ti CLI : 4.0.1 Alloy : 1.6.2 MAC Yosemite : 10.10.3 Appc npm : 4.0.1 Appc CLI : 4.0.2 Node: v0.10.37 Nexus 6 - Android 5.0.1 Iphone Simulator : Iphone 5 IOS 8.3