nathanjosiah
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-09-2017
03:07 PM
Infinite scroll on RowList with only a few items
I am using a RowList in a centered, single row configuration carousel as was previously available by default:
And if I have plenty of items in the list, it displays fine and loops the content. However, with only a few items in it, the list isn't centered, nor doe it loop so its right aligned, fixed on the screen, and the reticle actually moves when selecting items. How can I keep the behavior consistent regardless of how many items are in it?
<RowList
id="CategoryRow"
itemComponentName="Item"
itemSize="[1920,250]"
rowHeights="[250]"
rowItemSize="[[444,250]]"
rowItemSpacing="[[50,20]]"
numRows="1"
rowLabelOffset="[[0,15]]"
rowLabelFont="font:LargeBoldSystemFont"
rowLabelColor="0x333333"
rowFocusAnimationStyle="fixedFocusWrap"
showRowLabel="[false]"
focusXOffset="[515]"
focusBitmapUri="pkg:/images/reticle1.png"
translation="[0,400]"/>
And if I have plenty of items in the list, it displays fine and loops the content. However, with only a few items in it, the list isn't centered, nor doe it loop so its right aligned, fixed on the screen, and the reticle actually moves when selecting items. How can I keep the behavior consistent regardless of how many items are in it?
8 REPLIES 8
destruk
Streaming Star
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-09-2017
03:19 PM
Re: Infinite scroll on RowList with only a few items
You could pad the list.
nathanjosiah
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-09-2017
04:03 PM
Re: Infinite scroll on RowList with only a few items
"destruk" wrote:
You could pad the list.
What do you mean by pad? If you mean to add in extra duplicate items, I would except that affects the row counter and would show more items than are actually available.
joetesta
Roku Guru
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-09-2017
09:39 PM
Re: Infinite scroll on RowList with only a few items
try altering the rowlist's itemSize's first value (ie the width) In your brs once the content is set, to something based on a function of either a boundingRect().width if possible or more likely, a computation of the number of items X the width of each item + padding between items X (number of items -1).
aspiring
destruk
Streaming Star
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-10-2017
04:07 AM
Re: Infinite scroll on RowList with only a few items
"nathanjosiah" wrote:"destruk" wrote:
You could pad the list.
What do you mean by pad? If you mean to add in extra duplicate items, I would except that affects the row counter and would show more items than are actually available.
What I mean is - duplicate the existing items in the set of content nodes to make the set of content nodes bigger - if you have a row of 7 items required to scroll, and you have those seven items on the screen at one time, the highlight box will move and they won't scroll. But if you double the existing 7 in order, then you have 14 items in the list and it will scroll like the other rows.
Joe's suggestion to change the item width for each one in the row would just look weird to me if you have one row with 2 items in it and other rows nearby with 8+, but it should work as well to do that.
nathanjosiah
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-10-2017
09:01 AM
Re: Infinite scroll on RowList with only a few items
"destruk" wrote:"nathanjosiah" wrote:"destruk" wrote:
You could pad the list.
What do you mean by pad? If you mean to add in extra duplicate items, I would except that affects the row counter and would show more items than are actually available.
What I mean is - duplicate the existing items in the set of content nodes to make the set of content nodes bigger - if you have a row of 7 items required to scroll, and you have those seven items on the screen at one time, the highlight box will move and they won't scroll. But if you double the existing 7 in order, then you have 14 items in the list and it will scroll like the other rows.
Joe's suggestion to change the item width for each one in the row would just look weird to me if you have one row with 2 items in it and other rows nearby with 8+, but it should work as well to do that.
Ok, I understand what you are saying now. The problem I have with that approach is the row counter will be wrong. If there are 7 unique to display and I inject a duplicate 7, the row counter will show 14 total items (e.g. 10/14) when there aren't really that many. Also, this seems very hacky. Seems like there should be an option to enable the behavior that already exists with more items.
nathanjosiah
Visitor
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-10-2017
09:04 AM
Re: Infinite scroll on RowList with only a few items
"joetesta" wrote:
try altering the rowlist's itemSize's first value (ie the width) In your brs once the content is set, to something based on a function of either a boundingRect().width if possible or more likely, a computation of the number of items X the width of each item + padding between items X (number of items -1).
I think I may end up with a version of this. I think I will need to center the list using positioning. I still feel like that approach is hacky though because even if the list is centered, the reticle would still start on the first, left-aligned, item. I don't understand why this platform is so incredibly unintuitive and hard to work with.
destruk
Streaming Star
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-10-2017
11:26 AM
Re: Infinite scroll on RowList with only a few items
Some roku developers create their own gridscreen components from the ground up - but it's not an easy process (can take months to develop an entirely new component from scratch).
joetesta
Roku Guru
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-10-2017
11:50 AM
Re: Infinite scroll on RowList with only a few items
itemSize is the size of the row, not the items in the row. I agree it will look weird if it's centered on screen adjacent other rows that contain a full screen width of items.
As far as Roku being hard to work with, yeah. I've known more than one developer to flee the platform completely! Some of us like a challenge and / or we are masochists?
As far as Roku being hard to work with, yeah. I've known more than one developer to flee the platform completely! Some of us like a challenge and / or we are masochists?
aspiring