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.

• 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.

• Hi ,

  Please the bellow it may be help you,

  Link :- Dynamic View