[ALOY-739] ScollableView performance lagging on Android in Alloy
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Cannot Reproduce |
Resolution Date | 2013-07-12T16:24:37.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Alloy 1.2.0, 2013 Sprint 14 |
Components | Titanium SDK, XML |
Labels | n/a |
Reporter | Tony Lukasavage |
Assignee | Tony Lukasavage |
Created | 2013-07-11T13:46:18.000+0000 |
Updated | 2013-07-15T18:25:40.000+0000 |
Description
Details in Q&A: http://developer.appcelerator.com/question/154749/performance-issue-with-scrollableview-on-android-when-using-alloy-framework
test case images have been attached
test case (traditional)
app.js
var win = Ti.UI.createWindow();
win.add(require('scroll')());
win.open();
scroll.js
function randomColor() {
return '#'+Math.floor(Math.random()*10777215).toString(16);
}
//FirstView Component Constructor
function FirstView() {
//create object instance, a parasitic subclass of Observable
var self = Ti.UI.createView();
var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel magna dolor. In id laoreet diam. Aliquam elementum tincidunt fringilla. Fusce est felis, tempor et orci nec, rhoncus aliquet diam. In commodo, sem id ultrices commodo, diam risus ultrices nibh, ac pellentesque leo magna in massa. Proin posuere dignissim molestie. Nullam eleifend orci id nulla vestibulum, eu tristique justo cursus. In elementum vehicula venenatis. Proin rhoncus ligula vitae dolor mattis tempus. Maecenas viverra ligula eu est tempor semper. Sed ullamcorper sagittis risus at volutpat. Fusce dapibus libero et dignissim rutrum.";
var views = [];
for (var i = 0; i < 4; i++) {
var view = Ti.UI.createView({
backgroundColor: randomColor(),
layout: 'vertical'
});
view.add(Ti.UI.createLabel({
text: lorem,
color:'#fff',
width:'auto',
height:'auto',
top: '10dp'
}));
for (var j = 1; j <= 6; j++) {
view.add(Ti.UI.createImageView({
image: '/' + j + '.jpg',
width: '95%',
top: '10dp'
}));
}
views.push(view);
}
var scrollView = Titanium.UI.createScrollableView({
views:views,
showPagingControl:false,
pagingControlHeight:30,
maxZoomScale:2.0,
currentPage:1
});
self.add(scrollView);
return self;
}
module.exports = FirstView;
test case (alloy)
index.xml
<Alloy>
<Window>
<ScrollableView id="scroller">
<View backgroundColor="red" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
<View backgroundColor="blue" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
<View backgroundColor="green" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
<View backgroundColor="black" layout="vertical">
<Label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique ut lorem ut commodo. Nam et dolor commodo, posuere nunc eget, tempor lorem. Nam porta nisi risus, ac iaculis odio lacinia in. Maecenas varius vel purus id rutrum. Fusce vehicula porttitor tortor sed vehicula. Cras mi urna, pretium id enim sed, pulvinar ultrices urna. Nullam sapien dolor, vestibulum at mauris vel, tempor consequat dolor. Nam cursus tempus cursus. Mauris hendrerit, libero at pharetra faucibus, justo turpis rhoncus justo, et placerat ipsum sem elementum erat.</Label>
<ImageView image="/1.jpg"/>
<ImageView image="/2.jpg"/>
<ImageView image="/3.jpg"/>
<ImageView image="/4.jpg"/>
<ImageView image="/5.jpg"/>
<ImageView image="/6.jpg"/>
</View>
</ScrollableView>
</Window>
</Alloy>
index.js
$.index.open();
index.tss
'Label': {
color: "white",
top: "10dp",
height: "auto",
width: "auto"
}
'ImageView': {
width: "95%",
top: "10dp"
}
'#scroller': {
showPagingControl:false,
pagingControlHeight:30,
maxZoomScale:2.0,
currentPage:1
}
Attachments
File | Date | Size |
---|---|---|
1.jpg | 2013-07-12T16:25:10.000+0000 | 46132 |
2.jpg | 2013-07-12T16:25:10.000+0000 | 35809 |
3.jpg | 2013-07-12T16:25:10.000+0000 | 25200 |
4.jpg | 2013-07-12T16:25:10.000+0000 | 118456 |
5.jpg | 2013-07-12T16:25:10.000+0000 | 53715 |
6.jpg | 2013-07-12T16:25:10.000+0000 | 41621 |
I developed the above test cases and tested with the following tools and was unable to reproduce any difference in performance between the alloy and traditional approach. * TiSDK 3.1.1 * Alloy 1.2.0 * Galaxy Nexus, Android 4.2.2