How to add inner padding in a gridview?

,

I'm working on a new version of my video player in Lua. And I'm struggling with something, I feel, should be simpler.

I'm using a vertical gridview (1 column, multiple rows) for the menu. This gridview is drawn on top of a rounded rectangle. What I want to do is have the gridview drawn with a 10px margin on all sides. But vertically, I only want this margin to be there before the first item and after the last item of the list. This way, when scrolling, the content of the list should appear cut off right where the rounded rectangle is.

gridview-1-goal

gridview-2-goal

I'm aware of gridview:setContentInset. But the problem is that this adds a permanent margin within the list. So when scrolling, the content of the list is cut off at 10px from the rounded rectangle.

gridview-3-inset

I've tried using setSectionHeaderHeight to create an invisible empty header section. And it does work for the top margin. But I haven't found a way to do the same for the bottom margin at the end of the list. (Adding a section empty section also creates an empty first row making the margin way too big.)

Is there a way to achieve this with the default SDK gridview? You can grab my code and try it for yourself on GitHub.

I couldn't find a way to do this.

So, it's a bit of a hack, but as long as you're not using dividers for anything else, I think this should do what you want (added to your function ListView:initGridView()):

self.gridview:setHorizontalDividerHeight(10)
self.gridview:addHorizontalDividerAbove(1, 1)
self.gridview:addHorizontalDividerAbove(1, #self.items+1)		
function self.gridview:drawHorizontalDivider(x, y, width, height)
end

padding

It would be nice to do this in a more straightforward way though, I'll give it some more thought!

1 Like

Another approach if I understand your goal... could you solve this by making the grid view exceed the height of the screen, and having an empty final cell? (And adding the corners manually.)

Thank you! This is exactly what I was looking for. Simple and clean.

(I had another solution in the meantime where I'd offset the gridview of -10px vertically if the last row was selected. But this is so much cleaner.) Thanks!

1 Like

Yeah that would probably work too! You'd also need an additional empty cell for the first cell, and a little extra work would be needed to prevent the empty empty rows from being selected.

2 Likes