Flexbox in Unity UI

Hi everybody!

This weekend I created this really nice open source package Flex UI, that adds support for flexbox-style layout in Unity UI (more accurately, RectTransform-based hierarchies): https://github.com/gilzoide/unity-flex-ui
Flexible layouts are awesome when developing applications with responsive UI, and with the help of the Yoga layout engine (which is the same used by Unity's UI Toolkit, actually), it was simple to implement and works really really well.
Maybe you already have a website using flexbox layout and want to use the same layout in your Unity app.
Maybe you team's UI designer is already using flexible layouts, why implement with a different layout system?

Either way, with Flex UI, it is super easy to use flexbox:
1. Install the package
2. Add a FlexLayout component to the UI object that will layout its descendants (children, grandchildren, etc...)
3. Add FlexLayout components to the descendants that will be layed out by the root FlexLayout
4. Configure the layout properties as necessary and see all changes live in edit mode.
5. Enjoy

Here is a little demo GIF:
9494188--1336750--demo.gif

That's it, I hope you find this package useful, maybe even delightful to use!
As always, I would really appreciate some feedback, so feel free to comment here, open Issues and Discussions in GitHub, star the repository, and stuff.
Cheers \o/

4 Likes

That looks like an improvement of roughly over the default, bizarre, component-based layout group and element stuff.

Hi folks!

Just came here to let you know that I've added support for WebGL builds =D
Now Flex UI supports Windows, Linux, macOS, iOS, tvOS, Android AND WebGL, so all major desktop and mobile platforms, I guess.

Please send me any feedback you may have, and I hope you enjoy working with it!

Congratulations, fantastic work, thank you for sharing.

1 Like

That's great @gilzoide , very useful!! I like all these improvements to Unity UI bringing it kicking and screaming into the 21st century :)

1 Like

awesome component. But there are some bugs.
1. When you change the parent, Unity crashes. the case can be checked in the editor by dragging elements from one flex to another.
2. Periodically, child elements have a NaN position

1 Like

I decide, Nan. I added a disabled flexlayout to the child element

Hey @mikitakuzmichkin , thanks for the report. Can you please open a new Issue in the GitHub repository, so we can keep track of this issue there?

okay

1 Like

I've tested the asset, and it seems to function fine in the editor. However, when I run it at runtime, there are issues with certain properties for children being set to NaN, causing objects to disappear. I've documented the problem on GitHub along with a video demonstrating the issue: https://github.com/gilzoide/unity-flex-ui/issues/11

1 Like

Thanks for the report @pojitonov ! I'll try to take some time and review all these issues in the next few weeks.
I'll keep you folks posted.

hey @gilzoide , great asset! btw I am having issue with iOS build, it cannot find the native function defined in libflex-ui.dylib. Do you have the example repo that work with iOS for reference?

1 Like

Hi @baokhanhit ! Sorry about that, it seems the iOS build is broken =(
There should be no steps needed other than importing the package and adding some FlexLayout components to your UI.

Thanks for the report, I opened a new Issue in the repo for this (https://github.com/gilzoide/unity-flex-ui/issues/13). I'll keep you folks posted here also when iOS starts working again!

Hi @gilzoide , thank you for response. I am managed to buid the ios lib as a static library and I suggest you to provide the static library as well, because I need to do some postprocessing script or iOS in order to get xcode recognize the library. Native function call to Yoga now works. However, I am facing another issue, all layout size seem becoming zero. Any suggestions to for me to digging the issue? Windows Editor and Android work well btw.

1 Like

Hey @baokhanhit . I actually tried building the library statically, but I was getting insta crashes in calls to Yoga (EXC_BAD_ACCESS). I think it may be related to the fact that Unity also has an older version of Yoga embedded into it that UI Elements uses. Mixing 2 static libraries with the same symbols doesn't seem like a good idea (in iOS builds, the "libiPhone-lib.a" file has the Yoga symbols used by Unity). I'm testing in Unity 2022.3.16, btw.

But I've managed to fix the iOS builds (and most likely macOS+IL2CPP, tvOS and visionOS as well) by fixing the dynamic library id and embedding it into the main target in XCode using a build post processor C# script directly in the package.
Version 1.0.5 fixes iOS builds, please let me know if it works for you. Cheers \o/

Hey everyone, I'm happy to tell you that Flex UI 1.1.0 is released, and along with very important bug fixes (like the NaN problem reported by @mikitakuzmichkin ), it now adds support for the gap property, making the implementation of grids much easier =D
There are no breaking changes, so I recommend everyone to update!

hey @gilzoide , sorry for late reply. Confirm ios build work with version 1.1.0. Much appreciated your active support!

1 Like

Hi @gilzoide , is it possible to set a preferred width and height for FlexLayout gameobjects automatically?
I'm trying to create scrolling. I want to use the content size fitter to fit the height of the layout rect transform to the size of the children, because I want to limit scrolling to only the size of the children.
Or is there another way I can try right now?
Thanks.

1 Like

I think I said something that doesn't make a bit of sense. What I just want is the ability to have the size of the scrollable flex layout limited to the size of the children, is that possible with the current functionality?

1 Like

I'm embarrassed to post in this thread after hours of trying and failing, but it was implemented in minutes.

1 Like