0

I am trying to create a top horizontal menu. Example below. It could be just highlighted text with specific color, nothing fancy. Roku has verical lists but haven't seen any horizontal. How would I accomplish this, what template best fits. Thank You!

enter image description here

In addition, I would like to hide and show that menu (layered), when navigation from menu content.

Rahul Rathod
  • 17
  • 4

1 Answers1

1

You can use a LayoutGroup with layoutDirection="horizontal" to accomplish this. Here's a very rough example:

<LayoutGroup id="navbar" layoutDirection="horizontal" vertAlignment="center" itemSpacings="20" translation="[500,34]">
    <Label text="Featured" />
    <Label text="Live TV" />
    <Label text="Shows" />
</LayoutGroup>

If you need to update these dynamically, you can do something like this:

sub init()
  'get these from the server somehow, and then call this function
  navbarEntries = ["Featured", "Live TV", "Shows"];
  setNavbarItems(navbarEntries)
end sub

sub setNavbarItems(items)
  children = []
  for each item in items
    label = createObject("roSGNode", "label")
    label.text = item
    children.push(label)
  end for
  navbar = m.top.findNode("navbar")
  'remove all existing nodes
  navbar.removeChildrenIndex(navbar.getChildCount(), 0)
  'add all the new navbar entries
  navbar.appendChildren(children)
end sub

enter image description here

TwitchBronBron
  • 2,783
  • 3
  • 21
  • 45
  • I want to set dynamically menu bar by getting data from api – Rahul Rathod Feb 20 '23 at 11:42
  • Sure, I updated my answer to show how to also update the list dynamically from in code – TwitchBronBron Feb 21 '23 at 12:54
  • Thank you TwitchBronBron, i have one more question How to handle focus position wise on navbar. – Rahul Rathod Feb 22 '23 at 06:13
  • You're welcome! Take a look at this answer for some basic focus management https://stackoverflow.com/a/44290136/1633757 . You should post a separate question if you have more specific issues with your focus logic. Also, make sure to mark my answer as accepted if I've answered your original question. – TwitchBronBron Feb 23 '23 at 12:14