1
我有一個左滑動菜單的應用程序,就像任何典型的谷歌應用程序中的應用程序。當用戶向左滑動菜單時,我有一個觸摸處理程序來關閉菜單,但菜單也使用一個表來顯示菜單的元素,並且此表有一個onRowTouch
句柄來處理單擊行按鈕時的處理。電暈處理非常特定的觸摸事件
我現在的問題是,當用戶想要滑動左側菜單關閉它時,如果用戶的手指與任何按鈕接觸,它會拋出onRowTouch
而不是關閉菜單。如果用戶試圖通過向左滑動按鈕來關閉菜單,它將再次拋出onRowTouch
而不是關閉菜單。
有沒有辦法讓應用程序知道打算關閉菜單的觸摸和打算點擊的打算之間的區別?
我的代碼:
local sideMargin= 16
local function panelTransDone(target)
--native.showAlert("Panel", "Complete", { "Okay" })
if (target.completeState) then
print("PANEL STATE IS: "..target.completeState)
end
end
--Panel being the menu
panel = widget.newPanel{
location = "left",
onComplete = panelTransDone,
width = display.contentWidth * 0.8,
height = display.contentHeight,
speed = 150,
}
panel.background = display.newRect(0, 0, panel.width, panel.height)
panel.background:setFillColor(1)
panel:insert(panel.background)
--Decorator elements omitted for readability
local menuRows= {
{title = "Calendar", page = "calendar", image = "images/event/Icon.png"},
{title = "Volunteer", page = "volunteer", image = "images/volunteer/Icon.png"},
{title = "Contact Us", page = "contact", image = "images/chat/Icon.png"},
{title = "About Us", page = "about", image = "images/info/Icon.png"},
{title = "Sign Out", page = "signOut", image = "images/account/Icon.png"}
}
local function onRowRender(event)
-- Get reference to the row group
local row = event.row
local params=event.row.params
-- Cache the row "contentWidth" and "contentHeight" because the row bounds can change as children objects are added
local rowHeight = row.contentHeight
local rowWidth = row.contentWidth
local textMargin= 72
row.Image = display.newImageRect(row, params.image, 25, 25)
row.Image.anchorX = 0
row.Image.x = sideMargin
row.Image.y = rowHeight/2
row.rowTitle = display.newText(row, params.title, 0, 0, nil, 14, "left")
row.rowTitle:setFillColor(0)
row.rowTitle.anchorX = 0
row.rowTitle.x = textMargin
row.rowTitle.y = rowHeight/2
row:insert(row.Image)
row:insert(row.rowTitle)
end
local function onRowTouch(event)
local row = event.target
local params=event.target.params
--when a row is clicked, it goes to the appropriate page
panel:hide()
composer.removeScene(composer.getSceneName("current"))
composer.gotoScene(params.page)
end
local scrollBarOptions = {
sheet = scrollBarSheet, -- Reference to the image sheet
topFrame = 1, -- Number of the "top" frame
middleFrame = 2, -- Number of the "middle" frame
bottomFrame = 3 -- Number of the "bottom" frame
}
-- Table
local tableView = widget.newTableView(
{
left = -((panel.width)/2),
top = -(((panel.height)/2) - menuIdBg.height - 8),
height = panel.height-menuIdBg.height,
width = panel.width,
onRowRender = onRowRender,
onRowTouch = onRowTouch,
listener = scrollListener
}
)
-- Insert rows
for i = 1, #menuRows do
-- Insert a row into the tableView
tableView:insertRow{
rowHeight = 48,
rowColor = { 1, 1, 1},
lineColor = { 1, 1, 1},
params=menuRows[i]
}
end
panel:insert(tableView)
--everything below is to handle the left swipe touch to close the panel
--modified from https://forums.coronalabs.com/topic/57554-detecting-separate-swipe-without-lifting-finger/
local lastX
local lastY
local lastTime
local swipeDirection = false
local lastDeltaX = 0
local lastDeltaY = 0
function panel:touch (event)
if event.phase == "began" then
lastX = event.x
lastY = event.y
lastTime = event.time
elseif event.phase == "moved" then
deltaX = event.x - lastX
deltaY = event.y - lastY
deltaTime = event.time - lastTime
local xSpeed = deltaX/deltaTime
local ySpeed = deltaY/deltaTime
print(ySpeed)
if swipeDirection == false then
local xSpeedAbs = math.abs(xSpeed)
local ySpeedAbs = math.abs(ySpeed)
if xSpeedAbs > ySpeedAbs then
if xSpeed > 0.8 then
swipeDirection = "right"
print ("right")
elseif xSpeed < -0.8 then
swipeDirection = "left"
print ("left")
panel:hide()
end
end
end
lastX = event.x
lastY = event.y
lastTime = event.time
lastDeltaX = deltaX
lastDeltaY = deltaY
elseif event.phase == "ended" or event.phase == "cancelled" then
swipeDirection = false
lastDeltaX = 0
lastDeltaY = 0
end
end -- screenTouched
panel:addEventListener("touch", panel)
我會很感激的幫助下,也就是有辦法讓跟隨用戶手指的方向菜單嗎?謝謝!