Download

UMG - Dynamic grid layout?

I’ve been looking around for a solution that lets me have a widget that dynamically changes rows and layouts based on its size without user input or change of code.

I thought ‘tileView’ would help but can’t quite see how… right now I have a grid panel but I have to place my e.g 20 icons in specific rows and columns, I’d like this to be dynamic depending on the panel size.

Imagine a level select UI with 20 levels, where all level icons are the same size, but this UI will display differently depending on screen real estate - in turn changing the number or rows and columns.

I’m pretty lost here, would really appreciate help.

Thanks.

It does sound like you need Tile View or a Wrap Box - they both do what you expect.

Not sure what’s your beef with the tile view but mine spits this out as soon as I specify Entry Widget Class:

[SPOILER]LogOutputDevice: Error: === Handled ensure: ===
LogOutputDevice: Error: Ensure condition failed: InWidgetObject.Implements<UUserListEntry>() [File:D:\Build++UE4\Sync\Engine\Source\Runtime\UMG\Public\Slate/SObjectTableRow.h] [Line: 59]
LogOutputDevice: Error: Any UserWidget generated as a table row must implement the IUserListEntry interface
LogOutputDevice: Error: Stack:
LogOutputDevice: Error: [Callstack] 0x00007ffcf16c7136 UE4Editor-Core.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf1400c82 UE4Editor-Core.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf141b346 UE4Editor-Core.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf0423e5e UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf03f693f UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf0418628 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf04e1c04 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf038a550 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf047b89d UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf0460612 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf044071a UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf044852d UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf0449783 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf0499cc1 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f0bfa4a UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3add1d UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f07f8ad UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffcf0488df2 UE4Editor-UMG.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f07f266 UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac884 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f07f266 UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f07efcd UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f0802c4 UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffce7900050 UE4Editor-UMGEditor.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f07efcd UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac884 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f08438e UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f08438e UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac884 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f07efcd UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac884 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd0f08438e UE4Editor-Slate.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac884 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3aeab1 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac884 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac726 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3adee3 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac109 UE4Editor-SlateCore.dll!UnknownFunction ]
LogOutputDevice: Error: [Callstack] 0x00007ffd1a3ac92a UE4Editor-SlateCore.dll!UnknownFunction ][/SPOILER]

And that’s a clear 4.20.1 project with the child being just a border. Did you actually make it work? Do I need to know a secret handshake or something?

You could make it work with the grid - this would require checking the desired parent size and then dividing the grid panel into rows and columns, clearing the widget and repopulating.

You can definitely try wrap box, it does the above automatically.

Hey, thanks for the tip, I got that to work from your input but decided in the end to hardcode the rows and columns for now. Once I get things onto a different hardware with different screen size I might just change that though so thanks.

Glad to hear you made it work.

I’ll just clarify the errors I run into above. It’s been some time now so what I believed to be a mess what just my lack of experience with those new widgets.

Tile View and List View use an Interface that needs to be implemented in the child. They both create their own data objects rather than rely on the widgets you feed them. The interface is then used to operate on those data children.