Randomising Views in ScrollableView?

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

I'm developing a mobile application (iOS, iPad & iPhone) and I'd like to randomise the views within a ScrollableView so that they're presented in a different order each time the user uses the app.

I'm new to Titanium, and not a "coder" by any means, so I might be going about this the wrong way. I was hoping I could get some help with the following code...

// CREATE 3 VIEWS
var view1 = Ti.UI.createView({ backgroundImage:'1.png' });
var view2 = Ti.UI.createView({ backgroundImage:'2.png' });
var view3 = Ti.UI.createView({ backgroundImage:'3.png' });
 
// CREATE AN ARRAY USING THE ABOVE VIEWS
var viewArray = ['view1','view2','view3'];
 
// CREATE A "RANDOMISER" FUNCTION
function Randomiser(){return 0.5-Math.random();};
 
// RANDOMISE THE ARRAY USING ABOVE FUNCTION
viewArray.sort(Randomiser);
 
// USE RANDOMISED ARRAY TO ADD VIEWS TO SCROLLABLE VIEW
var scrollableView1 = Ti.UI.createScrollableView({
    views: viewArray,
});
The code works, in that it takes the views and randomises them. However, I can't get it to spit out the result in a format that the ScrollableView will accept.

If i output the result to a text field I get results that read...

( view2, view1, view3)

so I'm assuming that when the same results are fed into the scrollableView, it must read as...

var scrollableView1 = Ti.UI.createScrollableView({
    views: ( view2, view1, view3),
});
Any ideas on how to make this work?

— asked 2 years ago by Michael Smart
1 Comment
  • Shouldnt that read;

    var viewArray = [view1,view2,view3];

    — commented 2 years ago by Nick Milner

7 Answers

Accepted Answer

Try this:

// CREATE 3 VIEWS
var view1 = Ti.UI.createView({ backgroundImage:'1.png' });
var view2 = Ti.UI.createView({ backgroundImage:'2.png' });
var view3 = Ti.UI.createView({ backgroundImage:'3.png' });
 
// CREATE AN ARRAY USING THE ABOVE VIEWS
var viewArray = [], 
    tmpArray = [view1, view2, view3],//--- 
    rand = Math.floor(Math.random() * 3);
 
// RANDOMISE THE ARRAY
viewArray.push(tmpArray[rand]);
for(var i = 0; i < 3; i++) {
    if ( i != rand ) {
        viewArray.push(tmpArray[i]);
    }
}
 
// USE RANDOMISED ARRAY TO ADD VIEWS TO SCROLLABLE VIEW
var scrollableView1 = Ti.UI.createScrollableView({
    views: viewArray,
});

— answered 2 years ago by Minh Nguyen
answer permalink
11 Comments
  • This does appear to work. Although, the randomness of the views being displayed doesn't appear to change much. This may be to do with the limited views available to randomise. I'll try it with more views and see what happens.

    — commented 2 years ago by Michael Smart

  • Adding more views doesn't seem to help with randomising the views. It seems to take one view out of sequence and leave the rest as before.

    — commented 2 years ago by Michael Smart

  • How about this one?

    viewArray.push(tmpArray[rand]);
     
    if(rand % 2 == 0) {
        for(var i = 0; i < 3; i++) {
            if(i != rand) {
                viewArray.push(tmpArray[i]);
            }
        }
    } else {
        for(var i = 3; i > 0; i--) {
            if(i != rand) {
                viewArray.push(tmpArray[i]);
            }
        }
    }

    — commented 2 years ago by Minh Nguyen

  • Show 8 more comments

If I write the code as you've suggested then the results come back as...

("[object TiUIView]", "[object TiUIView]", "[object TiUIView]")

— answered 2 years ago by Michael Smart
answer permalink
1 Comment
  • Which is what the documentation states you should be doing;-

    "views Array<Titanium.UI.View> Sets the views within this Scrollable View."

    — commented 2 years ago by Nick Milner

views property of the scrollableview accepts only the array of the views so you should set as array like Nick said...

var scrollableView1 = Ti.UI.createScrollableView({
    views: [view2, view1, view3],
});
you can get more information of scrollableview from here

I'm not disputing the way the scrollableView accepts it's views property. I'm just trying to achieve the end result of randomising those views. Obviously my method isn't working, which is why I'm asking for advice on how to achieve the desired effect.

then try this one....only for testing purpose and when you successfully run this code replace backgroundColor with backgroundImage

var view1 = Ti.UI.createView({ backgroundColor:'red' });
var view2 = Ti.UI.createView({ backgroundColor:'green' });
var view3 = Ti.UI.createView({ backgroundColor:'blue' });
 
// CREATE AN ARRAY USING THE ABOVE VIEWS
var viewArray = [view1,view2,view3];
 
// CREATE A "RANDOMISER" FUNCTION
function Randomiser(){return 0.5-Math.random();};
 
// RANDOMISE THE ARRAY USING ABOVE FUNCTION
viewArray.sort(Randomiser);
 
// USE RANDOMISED ARRAY TO ADD VIEWS TO SCROLLABLE VIEW
var scrollableView1 = Ti.UI.createScrollableView({
    views: viewArray
});

— answered 2 years ago by Mitul Bhalia
answer permalink
2 Comments
  • I've tried that. As I mentioned earlier, that code returns a result of ("[object TiUIView]", "[object TiUIView]", "[object TiUIView]") which is of even less use to me.

    — commented 2 years ago by Michael Smart

  • if you add an alert you can see the content of viewArray using your suggestion.

    var view1 = Ti.UI.createView({ backgroundColor:'red' });
    var view2 = Ti.UI.createView({ backgroundColor:'green' });
    var view3 = Ti.UI.createView({ backgroundColor:'blue' });
     
    // CREATE AN ARRAY USING THE ABOVE VIEWS
    var viewArray = [view1,view2,view3];
     
    // CREATE A "RANDOMISER" FUNCTION
    function Randomiser(){return 0.5-Math.random();};
     
    // RANDOMISE THE ARRAY USING ABOVE FUNCTION
    viewArray.sort(Randomiser);
     
    // USE RANDOMISED ARRAY TO ADD VIEWS TO SCROLLABLE VIEW
    var scrollableView1 = Ti.UI.createScrollableView({
        views: viewArray
    });
     
    // DISPLAY CONTENT OF viewArray
    alert(viewArray);
    You'll find it outputs ("[object TiUIView]", "[object TiUIView]", "[object TiUIView]")

    — commented 2 years ago by Michael Smart

Just to be clear, I'mm 100% aware that the code needs to be written as [view2, view1, view3], but unfortunately the randomising code I've written outputs ( view2, view1, view3). So either I need a new method of randomising the array to get the correct results (any suggestions?) or I need to find some way of rewriting the existing result to change it to the correct format (but there isn't an obvious way to rewrite a string in titanium studio, is there?)

I've tried that. As I mentioned earlier, that code returns a result of ("[object TiUIView]", "[object TiUIView]", "[object TiUIView]") which is of even less use to me.

— answered 2 years ago by Michael Smart
answer permalink
3 Comments
  • Alternative way? I did not try but conceptually it should definetely work. You could do the following with manipulating the content randomly instead.

    a)Define createViewRandomContent function which will generate the views CONTENT on RANDOMLY as you need;

    b)Define viewsContentArray[{view:createViewRandomConent(random)}, {view:createViewRandomConent(random)},view:createViewRandomConent(random)}]

    c)In scrollable view definition views = (function() {var views = []; for (var j = 0; j < viewsContentArray.length; j++) { views.push(viewsContentArray[j].view); }
    return views; })()

    Hope this helps any way.

    — commented 2 years ago by jaishankar nadipalli

  • I'm not really a "coder", so I'd really appreciate it if you could expand on your suggested alternative solution. I'm struggling to understand your alternative method.

    — commented 2 years ago by Michael Smart

  • var images = [1,2,3]; images = images.sort(function() Math.random() - 0.5); var createViewContent = function(random) { return Ti.UI.createView({ backgroundImage:random+ '.png' }); };

    var viewsContentArray[ {view:createViewConent(images[0])}, {view:createViewConent(images[1])}, {view:createViewConent(images[2])} ];

    var scrollableView1 = Ti.UI.createScrollableView({ views: (function(){ var views = []; for (var j = 0; j < viewsContentArray.length; j++) { views.push(viewsContentArray[j].view); } return views; })() });

    ----Please note I typed this code in the text editor, i do not have access to titanium right now. So, when you copy this code to editor, please ensure no syntax issues', also some how my codeblock notation does not work for me. --

    — commented 2 years ago by jaishankar nadipalli

Your Answer

Think you can help? Login to answer this question!