Forum Discussion

nathanjosiah's avatar
nathanjosiah
Visitor
8 years ago

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:


<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?
Roku Developer Program

8 Replies

  • nathanjosiah's avatar
    nathanjosiah
    Visitor
    8 years ago
    "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's avatar
    joetesta
    Roku Guru
    8 years ago
    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).
  • destruk's avatar
    destruk
    Streaming Star
    8 years ago
    "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's avatar
    nathanjosiah
    Visitor
    8 years ago
    "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's avatar
    nathanjosiah
    Visitor
    8 years ago
    "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's avatar
    destruk
    Streaming Star
    8 years ago
    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's avatar
    joetesta
    Roku Guru
    8 years ago
    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?