Layout With Groups

Hosanna UI provides a powerful grouping system for building complex, flexible layouts. Groups allow you to organize UI elements (such as Labels, Images, Buttons, etc.) into logical containers, supporting both vertical and horizontal arrangements, nesting, and advanced focus management.

What is a Group?

A Group is a container for other UI components. You can use different group types:

• Group: Generic container, often used for absolute or custom layouts.
• VGroup: Arranges children vertically.
• HGroup: Arranges children horizontally.

Groups compose nested layout containers; VGroup, HGroup, and GridGroup add predictable spacing, alignment, and focus order on top of the shared child tree.

tip

For most layouts, prefer using VGroup and HGroup for vertical and horizontal stacking, respectively.

Why Use Groups?

• Organization: Structure your UI into logical sections.
• Nesting: Build complex layouts by nesting groups.
• Focus Management: Control navigation and focus, especially for TV/remote interfaces.
• Shared Styling: Apply common styles, padding, or backgrounds to all children.

---

Basic Example

VGroup([
  Label({ text: 'Title' }),
  HGroup([
    Button({ text: 'Left' }),
    Button({ text: 'Right' })
  ])
])

Example

---

Ui And Interaction Layout With Groups

@view('UiAndInteractionLayoutWithGroups')
export class UiAndInteractionLayoutWithGroupsView extends BaseExampleScreenView<UiAndInteractionLayoutWithGroupsState> {

  protected getViews(): ViewStruct<ViewState>[] {

    // --- edit below ---

    return [
      Group([
        Group([
          ScrollView([
            Repeater({
              items: Array(10).fill(0).map((_, index) => ({
                title: `Row ${index + 1}`,
                items: Array(10).fill(0).map((_, index) => ({
                  data: index
                }))
              })),
              getView: (row) => VGroup([
                Label({ text: row.title }),
                VGroup([
                  ScrollView([
                    Repeater({
                      items: row.items,
                      getView: (item, index) => Rectangle({
                        width: 100 + item.data * 10,
                        height: 100,
                        color: index % 2 === 0 ? '#50E3C2' : '#FF6B6B',
                      }).canReceiveFocus(true).isInitialFocus(index === 0)
                    })
                  ]).viewportHeight(300)
                    .viewportWidth(300)
                ])
              ])
            })
          ])
        ])
      ])
    ]

    // --- edit above ---
  }
}

---

Layout Properties

Groups support various layout and style properties:

• padding, margin, backgroundColor
• flexDirection (for custom Group)
• gap (space between children)
• alignItems, justifyContent (for alignment)
• translation (for positioning)

---

Focus Management

Set canReceiveFocus: true on child elements or groups to control focus navigation. This is essential for TV and remote navigation.

---

Best Practices

• Use VGroup and HGroup for most layouts.
• Nest groups for complex UIs.
• Apply shared styles at the group level.
• Test focus navigation for a smooth user experience.

---

For more on UI structure and layout, see UI and Interaction Layout.