2017-08-26 44 views
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) 

我會很感激的幫助下,也就是有辦法讓跟隨用戶手指的方向菜單嗎?謝謝!

回答

0

我做了一些深入研究onRowTouch,結果發現有辦法從裏面測試某些類型的觸摸事件。長話短說,我解決了我的問題,像這樣:

local function onRowTouch(event) 
    local row = event.target 
    local params=event.target.params 

    print(event.phase) 
    if event.phase == "tap" then 
     panel:hide() 
     composer.removeScene(composer.getSceneName("current")) 
     composer.gotoScene(params.page) 

    elseif event.phase == "swipeLeft" then 
     panel:hide() 
    end 
end 

這樣,我可以檢查滑動和水龍頭。我之前沒有看到這些階段,所以我不知道它們存在。我仍然希望獲得一些幫助讓菜單跟隨用戶的手指。謝謝!