Titanium JIRA Archive
Alloy (ALOY)

[ALOY-739] ScollableView performance lagging on Android in Alloy

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionCannot Reproduce
Resolution Date2013-07-12T16:24:37.000+0000
Affected Version/sn/a
Fix Version/sAlloy 1.2.0, 2013 Sprint 14
ComponentsTitanium SDK, XML
Labelsn/a
ReporterTony Lukasavage
AssigneeTony Lukasavage
Created2013-07-11T13:46:18.000+0000
Updated2013-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

FileDateSize
1.jpg2013-07-12T16:25:10.000+000046132
2.jpg2013-07-12T16:25:10.000+000035809
3.jpg2013-07-12T16:25:10.000+000025200
4.jpg2013-07-12T16:25:10.000+0000118456
5.jpg2013-07-12T16:25:10.000+000053715
6.jpg2013-07-12T16:25:10.000+000041621

Comments

  1. Tony Lukasavage 2013-07-12

    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

JSON Source