[TIMOB-14290] iOS: ListView: scrollToItem lags with large lists
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2014-01-02T21:30:49.000+0000 |
Affected Version/s | Release 3.1.1, Release 3.1.3, Release 3.2.0 |
Fix Version/s | 2013 Sprint 26, 2013 Sprint 26 API, Release 3.2.1, Release 3.3.0 |
Components | iOS |
Labels | ios, listview, module_listview, parity, qe-testadded, scrollToItem, supportTeam |
Reporter | Joe Caff |
Assignee | Vishal Duggal |
Created | 2013-06-19T11:39:02.000+0000 |
Updated | 2014-02-18T10:33:15.000+0000 |
Description
*Problem*
When using scrollToItem with larger lists, where the rows consist of more then 5 labels or views, scrolling starts only after a delay of approximately two seconds. This delay increases with the number of rows that have to be scrolled.
*Steps to reproduce*
1. Create a new Default Alloy Project and drop in the code below
2. Run on iPhone 4 or equivalent device
3. Tap Up/Down (anim)
4. Observe that there is a delay before scrolling begins
*listView.js*
var myTemplate = {
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'one',
properties: {
color: 'black',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '10dp'
}
},
{
type: 'Ti.UI.Label',
bindId: 'two',
properties: {
color: 'black',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '50dp'
}
},
{
type: 'Ti.UI.Label',
bindId: 'three',
properties: {
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '90dp'
}
},
{
type: 'Ti.UI.Label',
bindId: 'four',
properties: {
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '130dp'
}
},
{
type: 'Ti.UI.Label',
bindId: 'five',
properties: {
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '170dp'
}
},
{
type: 'Ti.UI.Label',
bindId: 'six',
properties: {
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '210dp'
}
},
{
type: 'Ti.UI.Label',
bindId: 'seven',
properties: {
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '240dp'
}
}
]
};
var upa = function() {
$.list.scrollToItem(0, 0, {position: Titanium.UI.iPhone.TableViewScrollPosition.TOP});
}
var downa = function() {
$.list.scrollToItem(3, 0, {position: Titanium.UI.iPhone.TableViewScrollPosition.TOP});
}
var up = function() {
$.list.scrollToItem(0, 0, {animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.TOP});
}
var down = function() {
$.list.scrollToItem(3, 0, {animated: false, position: Titanium.UI.iPhone.TableViewScrollPosition.TOP});
}
var genData = function(section) {
var data = [];
for(i=0;i<20;i++) {
data.push({one:{text:section + ' one'}, two:{text: 'two'}, three:{text: 'three'}, four:{text: 'four'}, five:{text: 'five'}, six:{text: 'six'}, seven:{text: 'seven'}, template: 'template'})
}
return data;
}
var genSections = function() {
var sections = [];
for(j=0;j<5;j++) {
var section = Ti.UI.createListSection({headerTitle:'Section '+j});
section.setItems(genData(j));
sections.push(section);
}
return sections;
}
var listView = $.list;
listView.templates = { 'template': myTemplate };
listView.setSections(genSections());
$.index.open();
*index.xml*
<Alloy>
<Window>
<View id="listView">
<ListView id="list"/>
<View id="buttons">
<Button onClick="upa">Up (anim)</Button>
<Button onClick="downa">Down (anim)</Button>
<Button onClick="up">Up</Button>
<Button onClick="down">Down</Button>
</View>
</View>
</Window>
</Alloy>
*index.tss*
"#listView": {
backgroundColor: "white"
}
"#list" : {
height: 420,
top: 0
}
"#buttons": {
backgroundColor: "gray",
bottom:0,
height:40,
layout: 'horizontal'
}
Tested and confirmed on iPhone 4 device, iOS 6 with Ti SDK 3.1.1 GA.
Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5156
Backport to 3_2_X https://github.com/appcelerator/titanium_mobile/pull/5181
I too observed a time lag with 3.1.3.GA on iOS but using Test Environment: Appc-Studio: 3.2.1.201401061716 acs:1.0.11 alloy:1.3.1-beta npm:1.3.2 titanium:3.2.0 titanium-code-processor:1.1.0 Osx: Maverick 10.9 Xcode: xCode 5.0.2 using both sdk build:3.2.1.v20140106195644 and 3.3.0.v20140106195650 App is working fine with above mentioned testCase No more time lag. App runs smoothly
Closing ticket as fixed. Verified the following: 1. After pressing the Up/Down (anim) buttons, there is no initial delay before scrolling 2. After pressing the Up/Down buttons (animated set to false), listview scrolls as expected i.e. no animation when scrolling 3. Changed the genData function to generate 50 rows and was able to verify the above 2 test cases 4. Used both the Alloy sample code and Titanium classic sample code to verify the above 3 test cases Tested on: Appcelerator Studio, build: 3.2.1.201401061716 SDK build: 3.2.1.v20140106195644, 3.3.0.v20140106195650 CLI: 3.2.0 Alloy: 1.3.1-beta Xcode: 5.0.2 Devices: iphone 4s (6.0.1), iphone 5s (7.0.2) *Note:* Was able to reproduce the original bug with SDK 3.2.0.GA as well.