Uploaded image for project: 'Alloy'
  1. Alloy
  2. ALOY-739

ScollableView performance lagging on Android in Alloy

    Details

      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

        1. 1.jpg
          1.jpg
          45 kB
        2. 2.jpg
          2.jpg
          35 kB
        3. 3.jpg
          3.jpg
          25 kB
        4. 4.jpg
          4.jpg
          116 kB
        5. 5.jpg
          5.jpg
          52 kB
        6. 6.jpg
          6.jpg
          41 kB

          Activity

            People

            • Assignee:
              tlukasavage Tony Lukasavage
              Reporter:
              tlukasavage Tony Lukasavage
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                  Git Integration