Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Showcase Flexbox in Unity UI

Discussion in 'UGUI & TextMesh Pro' started by gilzoide, Nov 26, 2023.

  1. gilzoide

    gilzoide

    Joined:
    Oct 7, 2015
    Posts:
    25
    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:
    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/
     
  2. jamesf42

    jamesf42

    Joined:
    Mar 10, 2023
    Posts:
    10
    That looks like an improvement of roughly over the default, bizarre, component-based layout group and element stuff.
     
  3. gilzoide

    gilzoide

    Joined:
    Oct 7, 2015
    Posts:
    25
    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!