Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewriter-packages/unimob.ui
MVU/Redux like library for building declarative UI in Unity (inspired by Flutter)
https://github.com/codewriter-packages/unimob.ui
declarative game game-development gamedev library model-view-intent model-view-update mvc mvi mvu mvvm reactive reactive-programming ui ui-framework ui-widgets unirx unity unity3d widgets
Last synced: 27 days ago
JSON representation
MVU/Redux like library for building declarative UI in Unity (inspired by Flutter)
- Host: GitHub
- URL: https://github.com/codewriter-packages/unimob.ui
- Owner: codewriter-packages
- License: mit
- Created: 2020-07-14T13:00:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T16:37:16.000Z (7 months ago)
- Last Synced: 2024-10-11T04:42:21.077Z (27 days ago)
- Topics: declarative, game, game-development, gamedev, library, model-view-intent, model-view-update, mvc, mvi, mvu, mvvm, reactive, reactive-programming, ui, ui-framework, ui-widgets, unirx, unity, unity3d, widgets
- Language: C#
- Homepage:
- Size: 295 KB
- Stars: 107
- Watchers: 9
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# UniMob.UI [](#) [](#)  [](https://openupm.com/packages/com.codewriter.unimob.ui/)
A declarative library for building reactive user interface. Built over [UniMob](https://github.com/codewriter-packages/UniMob).
## Getting Started
#### 1. Create view
View are regular MonoBehaviour that should be attached to gameObject.
```csharp
using UniMob.UI;
public class CounterView : View
{
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.
```csharp
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.
```csharp
using UniMob;
using UniMob.UI;
public class CounterState : ViewState, 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
```csharp
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.
```csharp
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 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](https://github.com/codewriter-packages/UniMob.UI-Samples) repository.
## Built-in widgets
UniMob.UI comes with a suite of powerful basic widgets:
> **[Row](./Runtime/Widgets/Row.cs), [Column](./Runtime/Widgets/Column.cs)**
> These widgets let you create layouts in both the horizontal (Row) and vertical (Column) directions.
>
>**[ZStack](./Runtime/Widgets/ZStack.cs)**
>A Stack widget lets you place widgets on top of each other in paint order.
>
>**[Container](./Runtime/Widgets/Container.cs)**
>The Container widget lets you create a rectangular visual element that has background color and custom size.
>
> **[Empty](./Runtime/Widgets/Empty.cs)**
> Widget that displays nothing.
>
>**[Scroll Grid Flow](./Runtime/Widgets/ScrollGridFlow.cs)**
>The ScrollGridFlow widget lets you create a virtualized scrollable grid of elements.
>
>**[Grid Flow](./Runtime/Widgets/GridFlow.cs)**
> A widget lets you create grid of elements.
>
>**[Vertical Split Box](./Runtime/Widgets/VerticalSplitBox.cs)**
> Column with two elements. Unlike a [column](./Runtime/Widgets/Column.cs) allows to specify a stretched size for elements.
>
> **[Tabs](./Runtime/Widgets/Tabs.cs)**
> Widget that displays horizontally scrollable and draggable list of tabs.
>
>**[Navigator](./Runtime/Widgets/Navigator.cs)**
> A widget that manages a set of child widgets.
>
>**[Composite Transition](./Runtime/Widgets/CompositeTransition.cs)**
> Animates the opacity, position, rotation and scale of a widget.
>
>**[Animated Cross Fade](./Runtime/Widgets/AnimatedCrossFade.cs)**
> A widget that cross-fades between two given children and animates itself between their sizes.
>
>**[Animated Switcher](./Runtime/Widgets/AnimatedSwitcher.cs)**
> 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](./Runtime/Widgets/DismissibleDialog.cs)**
> A widget with swipe-down-to-dismiss and swipe-up-to-expand callbacks.
>
>**[Padding Box](./Runtime/Widgets/PaddingBox.cs)**
> Widget that add extra padding for inner element.
>
>**[UniMob Button](./Runtime/Widgets/UniMobButton.cs)**
> Widget that detects clicks.
>
>**[UniMob Text](./Runtime/Widgets/UniMobText.cs)**
> 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](https://docs.unity3d.com/Manual/upm-ui-giturl.html))
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](./LICENSE.md).
## Credits
UniMob.UI inspired by [Flutter](https://github.com/flutter/flutter).