[AC-5696] ListView does not scroll smooth on Android and iOS
| GitHub Issue | n/a |
|---|
| Type | Improvement |
|---|
| Priority | n/a |
|---|
| Status | Resolved |
|---|
| Resolution | Not Our Bug |
|---|
| Resolution Date | 2018-04-08T14:00:52.000+0000 |
|---|
| Affected Version/s | n/a |
|---|
| Fix Version/s | n/a |
|---|
| Components | n/a |
|---|
| Labels | ListItem, ListView |
|---|
| Reporter | Kerberos |
|---|
| Assignee | Shak Hossain |
|---|
| Created | 2018-04-08T01:32:11.000+0000 |
|---|
| Updated | 2018-04-08T14:00:53.000+0000 |
|---|
Description
I have ListView which it has got different item templates. I am changing size of child views of item templates according to remote json when I fill data from controller js.
My ListView is not scrolling smooth over 10 ListItem. It is freezes (sticks around) when I scroll fast on device. I have tested different devices but result is same.
Can I stop ListItem UI refresh after fill data to ListView or is it normal. I have attached sample codes.
Thank you in advance.
Attachments
[~Kerbooo], Thanks for sharing with us. Can you please share simple test case so that we can run on our end to reproduce the issue? We got error during project run.
Unfortunately this is nothing Titanium influences. Your view template is highly complex (50 sub-views, percentage-based calculations, dynamic size (Ti.UI.SIZE) which simply is too much for the dynamic layout engine used in the native UITableView. The same would occur in a native implementation, even with storyboards and Auto Layout. The reason for this is (without going too deep into how table views render cells) that the table view only keeps the visible table view cells on screen and removes / adds them dynamically on scroll. While this is highly performant for long but simple lists like a classic title / subtitle template, it gets more critical on advanced layouts which require more calculation before moving into the visible area. As a workaround (I was in that situation before, both in native and Titanium), use a vertically based Ti.UI.ScrollView instead, which renders all subviews beforehand. Note that creating it might take longer than for a ListView, but you will *less* issues with scrolling performance when using complex views. Some tips for general optimization: - Try to avoid Ti.UI.SIZE and percentage based calculations - Avoid remote images -> Cache them, display the placeholder before and update the cell once finished - Use as less sub views as possible -> try to avoid container views, although it might be cleaner to oversee - think about the user: sometimes, designs are not made for large scrollable lists. The user can only consume a limited number of information at the same time, so laying out certain components into other views might be welcome I hope this helps a bit, please give it a try!