mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
Add example of infinity scroll
This commit is contained in:
Insality
parent
f0a9d5818f
commit
7a6e8bbef3
@ -10453,6 +10453,352 @@ nodes {
|
|||||||
text_leading: 1.0
|
text_leading: 1.0
|
||||||
text_tracking: 0.0
|
text_tracking: 0.0
|
||||||
}
|
}
|
||||||
|
nodes {
|
||||||
|
position {
|
||||||
|
x: 4200.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
rotation {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
scale {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
size {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
color {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
type: TYPE_BOX
|
||||||
|
blend_mode: BLEND_MODE_ALPHA
|
||||||
|
texture: "kenney/empty"
|
||||||
|
id: "infinity_page"
|
||||||
|
xanchor: XANCHOR_NONE
|
||||||
|
yanchor: YANCHOR_NONE
|
||||||
|
pivot: PIVOT_CENTER
|
||||||
|
adjust_mode: ADJUST_MODE_STRETCH
|
||||||
|
parent: "C_Anchor"
|
||||||
|
layer: "image"
|
||||||
|
inherit_alpha: true
|
||||||
|
slice9 {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 0.0
|
||||||
|
}
|
||||||
|
clipping_mode: CLIPPING_MODE_NONE
|
||||||
|
clipping_visible: true
|
||||||
|
clipping_inverted: false
|
||||||
|
alpha: 1.0
|
||||||
|
template_node_child: false
|
||||||
|
size_mode: SIZE_MODE_AUTO
|
||||||
|
}
|
||||||
|
nodes {
|
||||||
|
position {
|
||||||
|
x: 0.0
|
||||||
|
y: 200.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
rotation {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
scale {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
size {
|
||||||
|
x: 300.0
|
||||||
|
y: 400.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
color {
|
||||||
|
x: 0.8
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
type: TYPE_BOX
|
||||||
|
blend_mode: BLEND_MODE_ALPHA
|
||||||
|
texture: ""
|
||||||
|
id: "infinity_scroll_stencil"
|
||||||
|
xanchor: XANCHOR_NONE
|
||||||
|
yanchor: YANCHOR_NONE
|
||||||
|
pivot: PIVOT_N
|
||||||
|
adjust_mode: ADJUST_MODE_FIT
|
||||||
|
parent: "infinity_page"
|
||||||
|
layer: ""
|
||||||
|
inherit_alpha: true
|
||||||
|
slice9 {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 0.0
|
||||||
|
}
|
||||||
|
clipping_mode: CLIPPING_MODE_STENCIL
|
||||||
|
clipping_visible: true
|
||||||
|
clipping_inverted: false
|
||||||
|
alpha: 1.0
|
||||||
|
template_node_child: false
|
||||||
|
size_mode: SIZE_MODE_MANUAL
|
||||||
|
}
|
||||||
|
nodes {
|
||||||
|
position {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
rotation {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
scale {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
size {
|
||||||
|
x: 400.0
|
||||||
|
y: 400.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
color {
|
||||||
|
x: 0.8
|
||||||
|
y: 1.0
|
||||||
|
z: 0.8
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
type: TYPE_BOX
|
||||||
|
blend_mode: BLEND_MODE_ALPHA
|
||||||
|
texture: "kenney/empty"
|
||||||
|
id: "infinity_scroll_content"
|
||||||
|
xanchor: XANCHOR_NONE
|
||||||
|
yanchor: YANCHOR_NONE
|
||||||
|
pivot: PIVOT_N
|
||||||
|
adjust_mode: ADJUST_MODE_FIT
|
||||||
|
parent: "infinity_scroll_stencil"
|
||||||
|
layer: ""
|
||||||
|
inherit_alpha: true
|
||||||
|
slice9 {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 0.0
|
||||||
|
}
|
||||||
|
clipping_mode: CLIPPING_MODE_NONE
|
||||||
|
clipping_visible: true
|
||||||
|
clipping_inverted: false
|
||||||
|
alpha: 1.0
|
||||||
|
template_node_child: false
|
||||||
|
size_mode: SIZE_MODE_MANUAL
|
||||||
|
}
|
||||||
|
nodes {
|
||||||
|
position {
|
||||||
|
x: 0.0
|
||||||
|
y: 160.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
rotation {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
scale {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
size {
|
||||||
|
x: 300.0
|
||||||
|
y: 60.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
color {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
type: TYPE_BOX
|
||||||
|
blend_mode: BLEND_MODE_ALPHA
|
||||||
|
texture: "kenney/button_blue"
|
||||||
|
id: "infinity_prefab"
|
||||||
|
xanchor: XANCHOR_NONE
|
||||||
|
yanchor: YANCHOR_NONE
|
||||||
|
pivot: PIVOT_CENTER
|
||||||
|
adjust_mode: ADJUST_MODE_FIT
|
||||||
|
parent: "infinity_page"
|
||||||
|
layer: ""
|
||||||
|
inherit_alpha: true
|
||||||
|
slice9 {
|
||||||
|
x: 20.0
|
||||||
|
y: 0.0
|
||||||
|
z: 20.0
|
||||||
|
w: 0.0
|
||||||
|
}
|
||||||
|
clipping_mode: CLIPPING_MODE_NONE
|
||||||
|
clipping_visible: true
|
||||||
|
clipping_inverted: false
|
||||||
|
alpha: 1.0
|
||||||
|
template_node_child: false
|
||||||
|
size_mode: SIZE_MODE_MANUAL
|
||||||
|
}
|
||||||
|
nodes {
|
||||||
|
position {
|
||||||
|
x: 0.0
|
||||||
|
y: 3.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
rotation {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
scale {
|
||||||
|
x: 0.75
|
||||||
|
y: 0.75
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
size {
|
||||||
|
x: 380.0
|
||||||
|
y: 50.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
color {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
type: TYPE_TEXT
|
||||||
|
blend_mode: BLEND_MODE_ALPHA
|
||||||
|
text: "Infinity element 1"
|
||||||
|
font: "game"
|
||||||
|
id: "infinity_text"
|
||||||
|
xanchor: XANCHOR_NONE
|
||||||
|
yanchor: YANCHOR_NONE
|
||||||
|
pivot: PIVOT_CENTER
|
||||||
|
outline {
|
||||||
|
x: 0.3019608
|
||||||
|
y: 0.4
|
||||||
|
z: 0.8
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
shadow {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
adjust_mode: ADJUST_MODE_FIT
|
||||||
|
line_break: false
|
||||||
|
parent: "infinity_prefab"
|
||||||
|
layer: ""
|
||||||
|
inherit_alpha: true
|
||||||
|
alpha: 1.0
|
||||||
|
outline_alpha: 1.0
|
||||||
|
shadow_alpha: 0.0
|
||||||
|
template_node_child: false
|
||||||
|
text_leading: 1.0
|
||||||
|
text_tracking: 0.0
|
||||||
|
}
|
||||||
|
nodes {
|
||||||
|
position {
|
||||||
|
x: 0.0
|
||||||
|
y: 240.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
rotation {
|
||||||
|
x: 0.0
|
||||||
|
y: 0.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
scale {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
size {
|
||||||
|
x: 400.0
|
||||||
|
y: 50.0
|
||||||
|
z: 0.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
color {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
type: TYPE_TEXT
|
||||||
|
blend_mode: BLEND_MODE_ALPHA
|
||||||
|
text: "Infinity scroll:"
|
||||||
|
font: "game"
|
||||||
|
id: "infinity_header"
|
||||||
|
xanchor: XANCHOR_NONE
|
||||||
|
yanchor: YANCHOR_NONE
|
||||||
|
pivot: PIVOT_CENTER
|
||||||
|
outline {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
shadow {
|
||||||
|
x: 1.0
|
||||||
|
y: 1.0
|
||||||
|
z: 1.0
|
||||||
|
w: 1.0
|
||||||
|
}
|
||||||
|
adjust_mode: ADJUST_MODE_FIT
|
||||||
|
line_break: false
|
||||||
|
parent: "infinity_page"
|
||||||
|
layer: ""
|
||||||
|
inherit_alpha: true
|
||||||
|
alpha: 1.0
|
||||||
|
outline_alpha: 0.0
|
||||||
|
shadow_alpha: 0.0
|
||||||
|
template_node_child: false
|
||||||
|
text_leading: 1.0
|
||||||
|
text_tracking: 0.0
|
||||||
|
}
|
||||||
nodes {
|
nodes {
|
||||||
position {
|
position {
|
||||||
x: 0.0
|
x: 0.0
|
||||||
@ -10961,11 +11307,5 @@ layers {
|
|||||||
name: "text_top"
|
name: "text_top"
|
||||||
}
|
}
|
||||||
material: "/builtins/materials/gui.material"
|
material: "/builtins/materials/gui.material"
|
||||||
layouts {
|
|
||||||
name: "Landscape"
|
|
||||||
}
|
|
||||||
layouts {
|
|
||||||
name: "Portrait"
|
|
||||||
}
|
|
||||||
adjust_reference: ADJUST_REFERENCE_PARENT
|
adjust_reference: ADJUST_REFERENCE_PARENT
|
||||||
max_nodes: 512
|
max_nodes: 1024
|
||||||
|
|||||||
@ -10,6 +10,7 @@ local scroll_page = require("example.page.scroll_page")
|
|||||||
local slider_page = require("example.page.slider_page")
|
local slider_page = require("example.page.slider_page")
|
||||||
local input_page = require("example.page.input_page")
|
local input_page = require("example.page.input_page")
|
||||||
local grid_page = require("example.page.grid_page")
|
local grid_page = require("example.page.grid_page")
|
||||||
|
local infinity_page = require("example.page.infinity_page")
|
||||||
|
|
||||||
local pages = {
|
local pages = {
|
||||||
"main_page",
|
"main_page",
|
||||||
@ -19,6 +20,7 @@ local pages = {
|
|||||||
"slider_page",
|
"slider_page",
|
||||||
"input_page",
|
"input_page",
|
||||||
"grid_page",
|
"grid_page",
|
||||||
|
"infinity_page",
|
||||||
}
|
}
|
||||||
|
|
||||||
local function on_control_button(self, delta)
|
local function on_control_button(self, delta)
|
||||||
@ -65,7 +67,7 @@ function init(self)
|
|||||||
|
|
||||||
init_swipe_control(self)
|
init_swipe_control(self)
|
||||||
|
|
||||||
self.page = 1
|
self.page = 8
|
||||||
main_page.setup_page(self)
|
main_page.setup_page(self)
|
||||||
text_page.setup_page(self)
|
text_page.setup_page(self)
|
||||||
button_page.setup_page(self)
|
button_page.setup_page(self)
|
||||||
@ -73,6 +75,7 @@ function init(self)
|
|||||||
slider_page.setup_page(self)
|
slider_page.setup_page(self)
|
||||||
input_page.setup_page(self)
|
input_page.setup_page(self)
|
||||||
grid_page.setup_page(self)
|
grid_page.setup_page(self)
|
||||||
|
infinity_page.setup_page(self)
|
||||||
|
|
||||||
init_top_panel(self)
|
init_top_panel(self)
|
||||||
|
|
||||||
|
|||||||
@ -10,6 +10,7 @@ local en = {
|
|||||||
slider_page = "Slider page",
|
slider_page = "Slider page",
|
||||||
input_page = "Input page",
|
input_page = "Input page",
|
||||||
grid_page = "Grid page",
|
grid_page = "Grid page",
|
||||||
|
infinity_page = "Infinity scroll",
|
||||||
ui_section_button = "Button",
|
ui_section_button = "Button",
|
||||||
ui_section_text = "Text",
|
ui_section_text = "Text",
|
||||||
ui_section_timer = "Timer",
|
ui_section_timer = "Timer",
|
||||||
@ -29,6 +30,7 @@ local ru = {
|
|||||||
slider_page = "Слайдеры",
|
slider_page = "Слайдеры",
|
||||||
input_page = "Текст. ввод",
|
input_page = "Текст. ввод",
|
||||||
grid_page = "Сетка",
|
grid_page = "Сетка",
|
||||||
|
infinity_page = "Беск. скролл",
|
||||||
ui_section_button = "Кнопка",
|
ui_section_button = "Кнопка",
|
||||||
ui_section_text = "Текст",
|
ui_section_text = "Текст",
|
||||||
ui_section_timer = "Таймер",
|
ui_section_timer = "Таймер",
|
||||||
|
|||||||
47
example/page/infinity_page.lua
Normal file
47
example/page/infinity_page.lua
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
local M = {}
|
||||||
|
|
||||||
|
|
||||||
|
local function create_infinity_instance(self, record, index)
|
||||||
|
local instance = gui.clone_tree(self.infinity_prefab)
|
||||||
|
gui.set_enabled(instance["infinity_prefab"], true)
|
||||||
|
gui.set_text(instance["infinity_text"], "Infinity record " .. index)
|
||||||
|
|
||||||
|
local button = self.druid:new_button(instance["infinity_prefab"], function()
|
||||||
|
print("Infinity click on", index)
|
||||||
|
end)
|
||||||
|
|
||||||
|
return instance["infinity_prefab"], button
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
local function setup_infinity_list(self)
|
||||||
|
local data = {}
|
||||||
|
for i = 1, 2500 do
|
||||||
|
table.insert(data, i)
|
||||||
|
end
|
||||||
|
|
||||||
|
self.infinity_list = self.druid:new_infinity_list(data, self.infinity_scroll, self.infinity_grid, function(record, index)
|
||||||
|
-- function should return gui_node, [druid_component]
|
||||||
|
return create_infinity_instance(self, record, index)
|
||||||
|
end)
|
||||||
|
|
||||||
|
-- scroll to some index
|
||||||
|
local pos = self.infinity_grid:get_pos(950)
|
||||||
|
self.infinity_scroll:scroll_to(pos, true)
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
|
function M.setup_page(self)
|
||||||
|
self.infinity_scroll = self.druid:new_scroll("infinity_scroll_stencil", "infinity_scroll_content")
|
||||||
|
self.infinity_grid = self.druid:new_grid("infinity_scroll_content", "infinity_prefab", 1)
|
||||||
|
self.infinity_grid:set_offset(vmath.vector3(0, 8, 0))
|
||||||
|
|
||||||
|
self.infinity_prefab = gui.get_node("infinity_prefab")
|
||||||
|
gui.set_enabled(self.infinity_prefab, false)
|
||||||
|
|
||||||
|
setup_infinity_list(self)
|
||||||
|
end
|
||||||
|
|
||||||
|
|
||||||
|
return M
|
||||||
Loading…
x
Reference in New Issue
Block a user