Any tutorial on how to use Druid scroll grid?

Questions
#1

I am reading through the docs, and the live example, but can’t figure out really how it works. Similar to Short guide on how to use the druid scroll component does anyone have a short guide on how to create a scrolling grid, that the items get added to during runtime?

1 Like
#2

In basic flow, where amount of elements is not so huge to use Data List, you can use Scroll and Grid components to create a list of elements.

  • Create Scroll component with self.scroll = self.druid:new_scroll("view_node_id", "content_node_id")

    • View node is a zone, where user input is handled. Usually you want to apply a stencil to hide scroll content outside.
    • View node size should be adjusted
    • Content node is a child node of View node (in GUI scene). Content node size means the size of scrollable area. It will be managed by Grid component with bind_grid method.

  • Create Grid component with self.grid = self.druid:new_static_grid("content_node_id", self.prefab, 1)

    • The self.prefab is a node which size declare the grid cell size
    • The last args is a amount of elements in a row, in this case, 1 to create a vertical list.

Now you can use the scroll:bind_grid(grid) to automatically update the scroll content size, based on the grid content size.

So your initialization code will be like this:

local druid = require("druid.druid")

function init(self)
	self.druid = druid.new(self)
	self.prefab = gui.get_node("element/root") -- Root of the element prefab
	gui.set_enabled(self.prefab, false)

	self.scroll = self.druid:new_scroll("scroll_view", "scroll_content") -- The scroll_view and scroll_content are nodes in the gui
	self.grid = self.druid:new_static_grid("scroll_content", self.prefab, 1) -- The self.prefab is a node that will be cloned to create grid elements
	self.scroll:bind_grid(self.grid) -- Bind the grid to the scroll
end

And now you can add elements dinamically to the grid with grid:add(data) method:

local function add_element(self, data)
	local prefab_nodes = gui.clone_tree(self.prefab)
	local root = prefab_nodes["element/root"]
	gui.set_enabled(root, true)

	self.grid:add(root)
end


function init(self)
	--- ...
	for i = 1, 10 do
		-- Call at any moment
		-- Use grid:remove to delete element
		add_element(self, { text = "Element " .. i }) -- You can pass data to the GUI element
	end
end

Basic example with scroll and grid can be found here:
Live Example: druid 1.0
Example Code: druid/example/examples/basic/scroll_bind_grid/scroll_bind_grid.lua at develop · Insality/druid · GitHub

3 Likes
#3

Thanks, worked great.