Создаю прокрутку для меню в Lua CORONA SDK.
Исходник файла menu.lua
local composer = require( "composer" )
local widget = require( "widget" )
local scene = composer.newScene()
local function onButtonRelease( event )
composer.gotoScene( event.target.id:lower(), { effect="fade", time=300 } )
--composer.recycleOnSceneChange = true
end
function scene:create( event )
local sceneGroup = self.view
local sceneTitle = display.newText( sceneGroup, "Выберете уровень", display.contentCenterX,
10, composer.getVariable( "appFont" ), 20 )
-- Создание массива из кнопок меню
local menuButtons = { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
"13", "14", "15", "16", "17", "18" }
-- Создание цикла для кнопок меню
local rowNum = 0
for i = 1,#menuButtons do
rowNum = rowNum+1
local button = widget.newButton(
{
label = menuButtons[i],
id = menuButtons[i],
shape = "circle",
radius = 20,
font = composer.getVariable( "appFont" ),
fontSize = 16,
fillColor = { default={ 0.12,0.32,0.52,1 } ,over={ 0.132,0.352,0.572,1
} }, -- цвет кнопки и нажатия на кнопку
labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,1 } }, -- цвет шрифта
на кнопках
onRelease = onButtonRelease
})
mod = math.fmod(i, 2) -- определение кратности
if (i*mod >= 1 ) then -- если кратно 1
button.x = display.contentCenterX -50
elseif (i*mod == 0) then -- если кратно 0
button.x = display.contentCenterX + 50
end
button.y = 65 + ((rowNum-1)*35) -- растояние по y между кнопками
sceneGroup:insert( button ) -- обновление сцены после нажатия на кнопку
end
end
scene:addEventListener( "create", scene ) -- слушатель на создание сцены
--обработка касаний
function scene:touch(e)
-- body
if(e.phase == "began") then
print("начало a");
elseif (e.phase == "moved") then
scene.x = e.x;
scene.y = e.y;
print("двигаю a");
elseif(e.phase == "ended") then
print("отпустил a");
end
end
scene:addEventListener("touch", scene);
return scene
Для наглядности прикрепляю изображение
По обработке касаний, пробовал как со сценой, так и с меню, и с массивом кнопок.
Подскажите, пожалуйста, решение моей проблемы.
Ответы
Ответ 1
Для выполнения поставленной цели, нужно создать scrollView и переместить в функцию
код на создания кнопок в цикле из function scene:create в function showSlidingMenu
и слушать события каждый раз в Runtime. Для реализации прокрутки меню сразу при переходе
в меню, функция вызывается в scene:create
local composer = require( "composer" )
local widget = require( "widget" )
local scrollView
local scene = composer.newScene()
local function onButtonRelease( event )
composer.gotoScene( event.target.id:lower(), { effect="fade", time=300 } )
end
function scene:create( event )
sceneGroup = self.view
composer.recycleOnSceneChange = true;
local sceneTitle = display.newText( sceneGroup, "Выберете уровень",
display.contentCenterX, 10, composer.getVariable( "appFont" ), 20 )
end
local function ButtonListener( event )
if ( event.phase == "moved" ) then
local dx = math.abs( event.x - event.xStart )
if ( dx > 5 ) then
scrollView:takeFocus( event )
end
elseif ( event.phase == "ended" ) then
print( "клик по объекту" )
timer.performWithDelay( 10,
function()
scrollView:removeSelf();
scrollView = nil;
Runtime:removeEventListener("touch",showSlidingMenu)
end )
end
return true
end
function showSlidingMenu( event )
if ( "ended" == event.phase ) then
scrollView = widget.newScrollView
{
width = _W,
height = _H,
scrollWidth = width,
scrollHeight = height,
horizontalScrollDisabled = true
}
scrollView.x = display.contentCenterX
scrollView.y = display.contentCenterY
local menuButtons = { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
"13", "14", "15", "16", "17", "18" }
rowNum = 0
for i = 1,#menuButtons do
rowNum = rowNum+1
local button = widget.newButton(
{
label = menuButtons[i],
id = menuButtons[i],
shape = "circle",
radius = 20,
font = composer.getVariable( "appFont" ),
fontSize = 16,
fillColor = { default={ 0.12,0.32,0.52,1 } ,over={ 0.132,0.352,0.572,1
} }, -- цвет кнопки и нажатия на кнопку
labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,1 } }, -- цвет шрифта
на кнопках
onRelease = onButtonRelease
})
mod = math.fmod(i, 2) -- определение кратности
if (i*mod >= 1 ) then -- если кратно 1
button.x = display.contentCenterX -50 -- смещение относительно центра влево
elseif (i*mod == 0) then -- если кратно 0
button.x = display.contentCenterX + 50 -- смещение относительно центра впрово
end
button.y = 30 + ((rowNum-1)*35) -- координаты первой кнопки и растояние по y
между кнопками
scrollView:insert( button )
sceneGroup:insert( scrollView )
scene:addEventListener( "touch", ButtonListener )
end
return true
end
end
-- hide()
function scene:hide( event )
local sceneGroup = self.view
local phase = event.phase
if ( phase == "will" ) then
-- Код здесь работает, когда сцена находится на экране (но собирается уйти с экрана)
print ("ухожу с экрана");
elseif ( phase == "did" ) then
-- Код здесь запускается сразу после того, как сцена полностью выходит за пределы
экрана
print ("ушел за пределы экрана");
end
end
-- destroy()
function scene:destroy( event )
local sceneGroup = self.view
showSlidingMenu = nil;
end
scene:addEventListener( "create", scene ) -- слушатель на создание сцены
scene:addEventListener( "destroy", scene )
scene:addEventListener( "hide", scene )
Runtime:addEventListener("touch",showSlidingMenu)
return scene
Если тема создания меню с помощью Corona SDK интересна, то буду ее развивать
Пример 2: - позиционирование
http://jsfiddle.net/0braeda5/
*{
padding: 0;
margin: 0;
}
nav{
font-family: 'segoe ui', sans-serif;
font-size: 16px;
position: relative;
}
nav .arc,
nav ul{
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
.arc{
width: 300px;
height: 300px;
background: #f00;
text-align: center;
line-height: 300px;
color: #fff;
font-size: 20px;
border-radius: 50%;
}
nav > ul{
list-style: none;
}
nav > ul > li{
margin: 15px 0;
}
nav > ul > li.menu-item-1{position: relative; left: -35px;}
nav > ul > li.menu-item-2{position: relative; left: -10px;}
nav > ul > li.menu-item-4{position: relative; left: -20px;}
nav > ul > li.menu-item-5{position: relative; left: -40px;}
nav > ul > li a{
display: inline-block;
*display: inline;
zoom: 1;
padding: 5px 15px;
background: #ccc;
color: #000;
text-decoration: none;
}
nav > ul > li a:hover{
color: #fff;
background: #555;
}
nav > ul > li a:active{
color: #fff;
background: #000;
}