Dynamic Scrollable View with 3 views at a time

You must Login before you can answer or comment on any questions.

I'm not understanding this part: "e.source.name2 is a unique int for each page". I'm not sure what I'm missing here. There's something with the "pages" that I'm not getting right. I've tried loaded multiple views on the "pages" array and giving them a name, but that didn't work either. Each image is named as follows: 001.jpg, 002.jpg, 003.jpg, etc. The images reside in a folder called "images"

Can someone please explain it to me? 

var pages = [
1,2,3,4,5
];
 
var scrollView = Titanium.UI.createScrollableView({
    views:pages,
    showPagingControl:false,
    pagingControlHeight:30,
    enableZoomControls:false,
    currentPage:1
});
 
win.add(scrollView);
 
scrollView.addEventListener('scroll', function(e){
 
    var pagenumber = e.source.pages;
    Titanium.API.info(pagenumber);
 
//pass in the unique identifier for each view
 
var onepageback = Math.round(pagenumber) - 1;  
//grab identifiers for the preceding and following view so that its seamless when the user scrolls
 
var onepagefwd = Math.round(pagenumber) + 1;
 
    for (var q=0; q<pages.length; q++){ 
//erase all backgrounds except for the current one by assigning them an invalid image
 
if (q == pagenumber){
 
            //do nothing to currentpage 
 
            }
 
else{ //erase all others
 
pages[q].setbackgroundImage('');
            }
    }
 
    //create views for 2 adjacent pages
        pages[onepageback].setbackgroundImage('images/00' + onepageback + '.jpg');
 
            pages[onepagefwd].setbackgroundImage('images/00' + onepagefwd + '.jpg');
});

4 Answers

Accepted Answer

I would suggest you do something like this.. Change your loadViews function to this... and put the addImageToView function below it. 

// LOAD VIEWS
function loadViews(index)
{
    loadedViews = [];
    var selectedPage = 0;
    var i = 0;
 
    if(index > 0)
    {
        i = index - 1;
        var v1 = Titanium.UI.createView({index:i});
        addImageToView(v1, viewCollection[i]);
        loadedViews.push(v1);
        selectedPage = 1;
    }
 
        i = index;
        var v2 = Titanium.UI.createView({index:i});
        addImageToView(v2, viewCollection[i]);
        loadedViews.push(v2);
 
    if(index < viewCollection.length - 1)
    {
        i = index + 1;
        var v3 = Titanium.UI.createView({index:i});
        addImageToView(v3, viewCollection[i]);
        loadedViews.push(v3);
    }
    else
    {
        selectedPage = 1;
    }
 
    scroller.views = loadedViews;
    scroller.currentPage = selectedPage;
    lastView = loadedViews[scroller.currentPage];
}
 
function addImageToView(view, imageUrl)
{
   var imageView = Titanium.UI.createImageView({image:imageUrl});
   view.add(imageView);
}

Wow, I needed this same feature today.. I got it working about an hour ago. Here's my code.

http://pastie.org/1352978

I hope that helps.

— answered 2 years ago by Michael Huntington
answer permalink
2 Comments

  • Haha! Much thanks.

    — commented 2 years ago by Arlton Lowry

  • I can't seem to get the Titanium.UI.createImageView to load the images. Here's what I've got:

    var viewCollection = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    viewCollection[0] = "001.jpg";
    viewCollection[1] = "002.jpg";
    viewCollection[2] = "003.jpg";
    viewCollection[3] = "004.jpg";
    viewCollection[4] = "005.jpg";
    viewCollection[5] = "006.jpg";
    viewCollection[6] = "007.jpg";
    viewCollection[7] = "008.jpg";
    viewCollection[8] = "009.jpg";
    viewCollection[9] = "010.jpg";
 
Ti.API.info('array '+ viewCollection);
 
var loadedViews = [];
 
 
// SCROLLER
var scroller = Titanium.UI.createScrollableView({
    showPagingControl:false,
    pagingControlHeight:30,
    enableZoomControls:false
});
scroller.addEventListener('scroll', function(e){
 
    if (e.currentView != lastView.index) {
 
        loadViews(e.view.index)
    }
 
    Titanium.API.info(loadViews);
 
});
 
win.add(scroller);
 
// LOAD VIEWS
function loadViews(index)
{
    loadedViews = [];
    var selectedPage = 0;
 
    if(index > 0)
    {
        var v1 = Titanium.UI.createImageView({index:index - 1});
        loadedViews.push(v1);
        selectedPage = 1;
    }
 
        var v2 = Titanium.UI.createImageView({index:index});
        loadedViews.push(v2);
 
    if(index < viewCollection.length - 1)
    {
        var v3 = Titanium.UI.createImageView({index:index + 1, image: viewCollection});
        loadedViews.push(v3);
    }
    else
    {
        selectedPage = 1;
    }
 
    scroller.views = loadedViews;
    scroller.currentPage = selectedPage;
    lastView = loadedViews[scroller.currentPage];
}
 
// Load the initial view you want by passing the index of the view from your viewCollection
loadViews(3);
    Do you know what I'm missing?

    — commented 2 years ago by Arlton Lowry

Ooops.. I forgot to mention.. in my code I'm using the shorthand redux code to create my views.. so "new View()" is really Titanium.UI.createView();

Just change all those... but you get the idea.

— answered 2 years ago by Michael Huntington
answer permalink
2 Comments

  • I really do appreciate your help. This has been driving me crazy.

    — commented 2 years ago by Arlton Lowry

  • On this line of code, did you mean "viewCollection", instead of "collection"? 

    if(index < collection.length - 1)
    {
        var v3 = Titanium.UI.createView({index:index + 1,backgroundColor: '#cc0000'});
        loadedViews.push(v3);
    }
    else
    {
        selectedPage = 1;
    }

    — commented 2 years ago by Arlton Lowry

Your Answer

Think you can help? Login to answer this question!