Custom rowlist with tiles zoomed on focus
Hi,
I am trying to build custom rowlist. Where on focus, the focused item size should be greater than the other unfocused tiles in the row list. I was able increase the size of the row tiles by using focus percentage change. But on focus change the row items are getting cropped on top. I need help on this. I stuck with this issue. Any help would be appreciated.
Thanks.
Archana, so what I was trying to indicate was that each tile needs to be translated down, which I just discovered is what is done in the rowlist example that roku has on their github https://github.com/rokudev/samples/tree/master/ux%20components/lists%20and%20grids/RowListExample.
<component name = "RowListItem" extends = "Group" > <interface > <field id = "itemContent" type = "node" onChange = "showcontent"/> <field id = "focusPercent" type = "float" onChange = "showfocus"/> <field id = "rowFocusPercent" type = "float" onChange = "showrowfocus"/> </interface> <script type = "text/brightscript" > <![CDATA[ sub init() m.itemposter = m.top.findNode("itemPoster") m.itemmask = m.top.findNode("itemMask") m.itemlabel = m.top.findNode("itemLabel") end sub sub showcontent() itemcontent = m.top.itemContent m.itemposter.uri = itemcontent.HDPosterUrl m.itemlabel.text = itemcontent.title end sub sub showfocus() 'This increases the size of the tile as it gains more focus 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 ]]> </script> <children > <Poster id = "itemPoster"
'this is where all the tiles are moved so that they don't get cropped translation = "[ 10, 10 ]"
width = "512" height = "288"
'This sets where the center is for the scale that is done on the the tile scaleRotateCenter = "[ 256.0, 144.0 ]" > <Rectangle id = "itemMask" color = "0x000000FF" opacity = "0.75" width = "512" height = "288" scaleRotateCenter = "[ 256.0, 144.0 ]"/> </Poster> <Label id = "itemLabel" translation = "[ 20, 264 ]" horizAlign = "right" width = "492" opacity = "0.0"/> </children>This describes how each tile acts. So when the poster (id= itemposter) is translated [10,10] it moves the poster down and right 10 away from the border of the rowlist, which is what is cropping your tiles. So the more you increase the size of the tile the more the tile will have to be translate.
This also shows how to increase the tile size while keeping it centered. This is done by changing the scaleRotateCenter to the center of your tile then when the item has focus you increase the scale of the tile as done in the showFocus()