README.md

UniMob.UI

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

Core concepts

Widgets are the building blocks of a app’s user interface, and each widget is an immutable declaration of part of the user interface. Widgets form a hierarchy based on composition.

UniMob.UI comes with a suite of powerful basic widgets, of which the following are commonly used:

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.

So what does code that uses UniMob.UI look like?

using UniMob;
using UniMob.UI;
using UniMob.UI.Widgets;
using UnityEngine;

public class CounterApp : UniMobUIApp
{
    [Atom] private int Counter { get; set; }

    protected override Widget Build(BuildContext context)
    {
        return new Container {
            BackgroundColor = Color.cyan,
            Child = new Column {
                Children = {
                    new UniMobText(WidgetSize.Fixed(400, 50)) {
                        Value = "Tap count: " + Counter,
                        FontSize = 40,
                    },
                    new UniMobButton {
                        OnClick = () => Counter += 1,
                        Child = new UniMobText(WidgetSize.Fixed(400, 50)) {
                            Value = "Increment",
                            FontSize = 40,
                        }
                    }
                }
            }
        };
    }
}

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

Custom widgets

Built-in widgets provide basic functionality, but modern games requires more complex and unique interfaces. You can create your own widgets to implement it.

1. Create widget

The widget contains the immutable data that is required for a user interface part.

using UniMob.UI;

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

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

2. 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 RealCounterState : ViewState<RealCounterWidget>
{
    public override WidgetViewReference View => WidgetViewReference.Resource("Prefabs/Real Counter View");

    [Atom] public int Counter { get; private set; }

    public void Increment()
    {
        Counter += Widget.IncrementStep;
    }
}

3. Create view

View describes how data provided by State should be rendered on the screen.

using UniMob.UI;

public class RealCounterView : View<RealCounterState>
{
    public UnityEngine.UI.Text counterText;
    public UnityEngine.UI.Button incrementButton;

    protected override void Awake()
    {
        base.Awake();

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

    protected override void Render()
    {
        counterText.text = State.Counter.ToString();
    }
}

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.