ScrollView with GridLayout

[pandafinity]

Hello,

Can I just confirm that the new ScrollView using a GridLayout will not scroll? I want a [5,4] grid but I want to be able to scroll within that (or have a grid within a scoll). So if the screen can hold 20 grid cells based on the [5,4] dimensions and I have 120 cells, I want to be able to scroll to the other grid cells but keep the grid format.

Can ScrollView do this, or can you only scroll with the Collection and List Layouts?

Thanks again for all your help :)

Regards,
Mark

[IjzerenHein]

You can create such a scrollable layout using a CollectionLayout, like this:

var FlexScrollView = require('famous-flex/FlexScrollView');
var CollectionLayout = require('famous-flex/layouts/CollectionLayout');

var scrollView = new FlexScrollView({
  layout: CollectionLayout,
  layoutOptions: {
    itemSize: function(renderNode, size) {
      return [
        size[0] / 5, // width = 1/5th of parent-width
        size[1] / 4 // height = 1/4th of parent-height
      ]
    }
  }
});

[gadicc]

How much overhead is in there in the CollectionLayout vs GridLayout? I wonder if it could be a good idea to combine them into a single layout that behaves differently (e.g. caps the number of items) depending on whether or not it's parent is a FlexScrollView or LayoutController. Since CollectionLayout is still essentially laid out in a grid anyways, either way maybe it could also accept a cells option (instead of itemSize) to avoid the need for the dev to write such a function on their own. Just a thought for discussion.

[IjzerenHein]

Actually, that is a very good idea. I've been wanting to merge those for some time now, but just haven't gotten around to it. Like you said, just adding the 'cells' option to CollectionLayout would make GridLayout obsolete. I will try to find some time to get this done, shouldn't be that much work.

[IjzerenHein]

I've added the cells option to CollectionLayout and GridLayout has been deprecated.
Cheers

[gadicc]

Haha, too fast! 👏

Thanks :)