Getting Started

A layout and view system that draws stuff on canvas, has no external dependencies besides TypeScript typings (for now :wink: ). The idea is similar to what we can do with RelativeLayout (or ConstraintLayout) and Views on Android. Base classes are:


It's like component in React. It has it's own lifecycle and is able to accept properties. To access properties from React wrapper, properties need to have Java-style setters and getters (i.e. for property myProperty, you have setMyProperty() and getMyProperty()). Usually we want to see the change after setting a value, this is why view needs to call require() method inside property setters.
The lifecycle looks like this:
Could not load image
View Lifecycle


This is what lets us position the view inside another view. One can set the LayoutParams' values by chaining available methods. The dimensions of View can be set as a number (in pixels), MATCH_PARENT or WRAP_CONTENT. The calculated size is then wrapped to minWidth/maxWidth and minHeight/maxHeight.
  • MATCH_PARENT - the view is as big as it's parent
  • WRAP_CONTENT - view takes the smallest amount of space possible
Views can be positioned absolutely or relatively. Absolute positioning is the simplest one: just set the desired x and y coordinates and view will appear there. Relative positioning is a bit more complex concept, illustrated below.
Could not load image
Relative Layout

Next Steps

This section is unfortunately still work in progress...
Last modified 2yr ago