[UI] Grid Layout Group Custom Sort Order

Question

I am working on a Grid based button UI that uses the Grid Layout Group to position the elements. When one of the buttons is selected it extends, covering up the button to the right of it, to display more information.

The problem is because Unity uses the hierarchy to sort UI elements and because the Grid Layout Group overrides the hierarchy order of its children resulting in my button always appearing behind the button to the right of it.

If I try to reorder the elements myself at runtime the Grid Layout Group will move the position of the buttons to reflect the same ordering convention as before.

 Grid Layout Group
 - Element (1) [x: 1, y: 1]
 - Element (2) [x: 1, y: 2]
 - Element (3) [x: 2, y: 1]
     
 [After runtime ordering]
 Grid Layout Group 
 - Element (3) [x: 1, y: 1]
 - Element (2) [x: 1, y: 2]
 - Element (1) [x: 2, y: 1]
 
 [Desired Result]
 Grid Layout Group 
 - Element (3) [x: 2, y: 1]
 - Element (2) [x: 1, y: 2]
 - Element (1) [x: 1, y: 1]

Any advice would be much appreciated.

Answer 1

Answer by Tourist · Feb 22, 2017 at 10:01 AM

Use canvas component to modify the order of the selected button.

keywords : sortOrder, sortingLayers.

Add comment · Show 2 · Share

Ben_dc · Feb 22, 2017 at 04:19 PM 0

Share

Do you mean add a canvas component to the selected button?

Tourist Ben_dc · Feb 22, 2017 at 06:29 PM 0

Share

Either you add it via your script or you add it via the editor. But yes, if your buttons have canvas component, you can use sortOrder to modify the rendering order.

[UI] Grid Layout Group Custom Sort Order

1 Reply

Your answer

Follow this Question

Related Questions