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

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();

Bryan

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

I have one scrollableView with 5 views. each image is 84 x 111, 72DPI. not big at all.

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();

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

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

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