-
Notifications
You must be signed in to change notification settings - Fork 0
Views
A View is the root class for all views and defines their common behavior such as background color, whether it is visible, position and size.
- Import the cylibs-ui in your add-on file.
require('cylibs/ui/cylibs-ui-includes')
- Create a new view, optionally specifying the
Frame(x, y, width, height).
local myView = UIView.new(Frame.new(0, 0, 100, 10))
- Hide the view when you are done.
myView:setVisible(false)
- If you want to get rid of the view permanently, destroy it.
myView:destroy() -- you will no longer be able to show the view
A subview is a View that is child of another View. By adding a view as a subview, you can control a group of views all at once. For example, let's say you have a parentView with two views, childView1 and childView2. By calling parentView:setVisible(false) you can hide all 3 views.
A child view's position is relative to its parent's coordinate system. This can make it easier to set the position of a group of views on the screen.
local parentView = View.new()
local childView1 = View.new(Frame.new(0, 0, 100, 100))
local childView2 = View.new(Frame.new(0, 0, 50, 50))
parentView:addSubview(childView1)
parentView:addSubview(childView2)
parentView:setPosition(500, 500)
In the example above, all 3 views are moved to the (x, y) coordinate (500, 500) on the screen.
Similarly, you can show or hide a group of views all at once by using subviews.
local parentView = View.new()
local childView1 = View.new(Frame.new(0, 0, 100, 100))
local childView2 = View.new(Frame.new(0, 0, 50, 50))
parentView:setVisible(false)
In the example above, all 3 views are hidden at once.
- Create a
Viewwith a semi-transparent black background, width and height of 500 px, and center it on the screen.
local view = View.new(Frame.new(0, 0, 500, 500)) -- create a new view with a width and height of 500 px
local info = windower.get_windower_settings()
view:setBackgroundColor(Color.new(175, 0, 0, 0)) -- set the background color
view:setPosition((info.ui_x_res - 500) / 2, (info.ui_y_res - 500) / 2) -- center the view on the screen
view:layoutIfNeeded() -- re-layout the view to show the new background color and position