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
These widgets let you create layouts in both the horizontal (Row) and vertical (Column) directions.

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

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

Empty
Widget that displays nothing.

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

Grid Flow
A widget lets you create grid of elements.

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

Tabs
Widget that displays horizontally scrollable and draggable list of tabs.

Navigator
A widget that manages a set of child widgets.

Composite Transition
Animates the opacity, position, rotation and scale of a widget.

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

Animated Switcher
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
A widget with swipe-down-to-dismiss and swipe-up-to-expand callbacks.

Padding Box
Widget that add extra padding for inner element.

UniMob Button
Widget that detects clicks.

UniMob Text
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)
Git URL (UniMob.UI): https://github.com/codewriter-packages/UniMob.UI.git
Git URL (UniMob): https://github.com/codewriter-packages/UniMob.git

License

UniMob.UI is MIT licensed.

Credits

UniMob.UI inspired by Flutter.