Awesome

UniMob.UI

A declarative library for building reactive user interface. Built over UniMob.

Getting Started

1. Create view

View are regular MonoBehaviour that should be attached to gameObject.

using UniMob.UI;

public class CounterView : View<ICounterState>
{
    public UnityEngine.UI.Text counterText;
    public UnityEngine.UI.Button incrementButton;

    // initial setup
    protected override void Awake()
    {
        base.Awake();

        incrementButton.Click(() => State.Increment);
    }

    // update view with data provided by State
    // Render() is called automatically when data changes
    // so view always be synchronized with state
    protected override void Render()
    {
        counterText.text = "Conter: " + State.Counter;
    }
}

// describes the data required for the view 
// and the actions performed by the view 
public interface IConterState : IViewState {
  int Counter { get; }
  
  void Increment();
}

2. Create widget

A widget is an immutable description of an interface element. May contain additional data if necessary.

using UniMob.UI;

public class CounterWidget : StatefulWidget
{
    public int IncrementStep { get; set; }

    public override State CreateState() => new CounterState();
}

3. Create state

The State provides data for the View and optionally contains mutable state of this interface part.

using UniMob;
using UniMob.UI;

public class CounterState : ViewState<CounterWidget>, ICounterState
{
    // where to load the view from? 
    public override WidgetViewReference View {
        // supports direct prefab link, Resources and Addressables
        get => WidgetViewReference.Resource("Prefabs/Counter View");
    }
    
    [Atom] public int Counter { get; private set; }

    public void Increment()
    {
        // atom modification will automatically update UI
        Counter += Widget.IncrementStep;
    }
}

3. Run app

using UniMob;
using UniMob.UI;

public class CounterApp : UniMobUIApp
{
    protected override Widget Build(BuildContext context)
    {
        return new ConterWidget() {
            IncrementStep = 1
        };
    }
}

Widget Composition

Widgets are the building blocks of a app’s user interface. Widgets form a hierarchy based on composition.

Composition of widgets allows you to build complex custom interfaces that will automatically update when needed.

private Widget Build(BuildContext context) {
    return new ScrollGridFlow {
        CrossAxisAlignment = CrossAxisAlignment.Center,
        MaxCrossAxisExtent = 750.0f,
        Children = {
            this.BuildDailyOffers(),
            
            this.BuildGemsHeader(),
            this.BuildGemsSlots(),

            this.BuildGoldHeader(),
            this.BuildGoldSlots(),
        }
    };
}

private IEnumerable<StoreItem> BuildDailyOffers() {
    return this.DailyOffersModel
        .GetAllOffers()
        .Where(offer => offer.Visible) // subscribe to 'Visible' atom
        .Select(offer => this.BuildDailyOffer(offer.Id);
}

private Widget BuildDailyOffer(string offerId) {
    return new DailyOfferWidget(offerId) {
        // keys must be set for list elements
        Key = Key.Of($"store_item_{offerId}")
    };
}

// ...

More code samples are located in UniMob.UI Samples repository.

Built-in widgets

UniMob.UI comes with a suite of powerful basic widgets:

Row, Column<br/> These widgets let you create layouts in both the horizontal (Row) and vertical (Column) directions.

ZStack<br/> A Stack widget lets you place widgets on top of each other in paint order.

Container<br/> The Container widget lets you create a rectangular visual element that has background color and custom size.

Empty<br/> Widget that displays nothing.

Scroll Grid Flow<br/> The ScrollGridFlow widget lets you create a virtualized scrollable grid of elements.

Grid Flow<br/> A widget lets you create grid of elements.

Vertical Split Box<br/> Column with two elements. Unlike a column allows to specify a stretched size for elements.

Tabs<br/> Widget that displays horizontally scrollable and draggable list of tabs.

Navigator<br/> A widget that manages a set of child widgets.

Composite Transition<br/> Animates the opacity, position, rotation and scale of a widget.

Animated Cross Fade<br/> A widget that cross-fades between two given children and animates itself between their sizes.

Animated Switcher<br/> A widget that by default does a cross-fade between a new widget and the widget previously set on the AnimatedSwitcher as a child.

Dismissible Dialog<br/> A widget with swipe-down-to-dismiss and swipe-up-to-expand callbacks.

Padding Box<br/> Widget that add extra padding for inner element.

UniMob Button<br/> Widget that detects clicks.

UniMob Text<br/> Display and style text.

How to Install

Minimal Unity Version is 2019.3.

Library distributed as git package (How to install package from git URL) <br>Git URL (UniMob.UI): https://github.com/codewriter-packages/UniMob.UI.git <br>Git URL (UniMob): https://github.com/codewriter-packages/UniMob.git

License

UniMob.UI is MIT licensed.

Credits

UniMob.UI inspired by Flutter.