Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: adding titles to Code Block headers

...

You can see this combination of list and grid in the <children> element of the rowlistscene.xml component file, where the example RowList node is defined:

 

Code Block
titleExample RowList node defined
<children >
  <RowList 
    id = "exampleRowList" 
    translation = "[ 130, 160 ]" 
    itemComponentName = "RowListItem" 
    numRows = "4" 
    itemSize = "[ 1608, 308 ]" 
    rowItemSize = "[ [536, 308] ]" 
    itemSpacing = "[ 0, 40 ]" 
    showRowLabel = "[ true ]" 
    drawFocusFeedback = "false" 
    vertFocusAnimationStyle = "fixedFocusWrap" 
    rowFocusAnimationStyle = "fixedFocusWrap" />
</children>

...

Compared to the other two examples with custom item component definitions, we've added a new <interface> field, rowFocusPercent, that triggers the showrowfocus() callback function when the field value changes. We 're are using the same basic "animations" as before based on that field and the focusPercent field value, but this time to only dim the unfocused rows, and only enlarge the focused item:

 

Code Block
titleDimming unfocused rows and enlarging focused item
sub showfocus()
  scale = 1 + (m.top.focusPercent * 0.08)
  m.itemposter.scale = [scale, scale]
end sub
sub showrowfocus()
  m.itemmask.opacity = 0.75 - (m.top.rowFocusPercent * 0.75)
  m.itemlabel.opacity = m.top.rowFocusPercent
end sub