Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Scrollable View not Smooth/usable

In doing a lot of searching for an answer, I've come across several people talking about this issue, but never found a solution. I have a ScrollableView with up to 50 contained views. When the window loads with the scrollableView, even the first time I swipe to go to the next view, it can take up to 8 seconds (on an iPhone4 device) and its very jerky, etc. Can take several seconds to even start changing from view to next view.

code:

var cardSlider = Titanium.UI.createScrollableView({
    contentWidth: 'auto',
    height: 175,
    top: 240,
    left: 0,
    backgroundColor: '#fff'
});


while (cardRows.isValidRow()) {
var show1 = Titanium.UI.createView({
    width: 230,
    height: 127,
    backgroundImage: 'card/'+cardRows.field(1)+'b.png'
});


cardSlider.addView(show1);
cardRows.next();
}

how can I get this to act normal and not have the performance issue?

Bryan

— asked November 27th 2010 by B J
  • bug
  • ios
  • scrollableview
  • view
0 Comments

7 Answers

  • Bryan

    Personally, I would use an imageView to hold each image. In order to scale images on android you have to use the backgroundImage property, but on ios you should be able to use the normal image property.

    This is a video of the following updated code in use:

    var window = Ti.UI.createWindow({});
    
    var parentView = Ti.UI.createView({
        backgroundColor:'blue'
    });
    
    window.add(parentView);
    
    var myViews = [];
    for(var i=0, ilen=5; i<ilen; i++){
        Ti.API.info('Adding: /card/'+i+'.png');
        var screenView = Ti.UI.createView({});
    
        var image = Ti.UI.createImageView({
            // backgroudImage used to allow image to be scaled on android
            backgroundImage: '/card/'+i+'.png',
            width: 222,
            height: 168
        });
        screenView.add(image);
        myViews.push(screenView);
    }
    
    var cardSlider = Ti.UI.createScrollableView({
        backgroundColor: '#aaa',
        views:myViews
    });
    
    parentView.add(cardSlider);
    
    window.open();
    

    Hence, using this approach together with the addView() method that only works on ios, gives the following code, which you could also try:

    var window = Ti.UI.createWindow({});
    
    var parentView = Ti.UI.createView({
        backgroundColor:'blue'
    });
    
    window.add(parentView);
    
    var cardSlider = Ti.UI.createScrollableView({
        backgroundColor: '#aaa'
    });
    
    for(var i=0, ilen=5; i<ilen; i++){
        Ti.API.info('Adding: /card/'+i+'.png');
        var screenView = Ti.UI.createView({});
    
        var image = Ti.UI.createImageView({
            // backgroudImage used to allow image to be scaled on android
            backgroundImage: '/card/'+i+'.png',
            width: 222,
            height: 168
        });
        screenView.add(image);
        cardSlider.addView(screenView);
    }
    
    parentView.add(cardSlider);
    
    window.open();
    
    — answered November 27th 2010 by Paul Dowsett
    permalink
    0 Comments
  • Bryan

    If each view contains an image, what resolution/dimensions is each one roughly?

    — answered November 27th 2010 by Paul Dowsett
    permalink
    0 Comments
  • I have one scrollableView with 5 views. each image is 84 x 111, 72DPI. not big at all.

    — answered November 27th 2010 by B J
    permalink
    0 Comments
  • Bryan

    I have created some coloured image files with your code. Unfortunately, scrollableView's addView() method causes an exception on android at the moment, so I had to workaround this issue. See the working code below, and this video that shows it in action.

    Obviously this doesn't prove the situation for ios, but you could try the code on your system to see whether the performance issues are evident using it. Here are the card assets.

    var window = Ti.UI.createWindow({});
    
    var parentView = Ti.UI.createView({
        backgroundColor:'blue'
    });
    
    window.add(parentView);
    
    var myViews = [];
    for(var i=0, ilen=5;i<ilen; i++){
        Ti.API.info('Adding: /card/'+i+'.png');
        var show1 = Titanium.UI.createView({
            backgroundImage: '/card/'+i+'.png',
            height: 127,
            width: 230
        });
        myViews.push(show1);
    //    cardSlider.addView(show1);
    }
    
    var cardSlider = Ti.UI.createScrollableView({
        backgroundColor: '#aaa',
        contentWidth: 'auto',
        views:myViews,
        top: 240,
        left: 0,
        height: 175
    });
    parentView.add(cardSlider);
    
    window.open();
    
    — answered November 27th 2010 by Paul Dowsett
    permalink
    0 Comments
  • Hal, really appreciate your time in giving me some code. THANKS

    I have changed my code to reflect yours, and I still get the following glitch:

    • the views, when swiped to the next, do not smoothly appear. sometimes they do, but its random when they do. I you see sometimes the views are stitched together smoothly, but other times when you go to the next view, it takes a second to load. all images are the same image, very small size.

    [video of what I'm talking about] http://bryanjowers.me/screen.mov

    — answered November 28th 2010 by B J
    permalink
    0 Comments
  • Bryan

    Would you mind creating a new project and replacing the Resources folder with these zipped files, and taking a video please? I'd really like to compare the difference with android. If the problem persists on ios, I could raise a ticket using the same code.

    Thanks for your help

    — answered November 28th 2010 by Paul Dowsett
    permalink
    0 Comments
  • I notice that you have a property 'contentWidth' set in Ti.UI.createScrollableView, but this does not appear to be valid.

    http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.ScrollableView-object

    — answered March 18th 2011 by William Macdonald
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.