2017-08-26 28 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 

这样,我可以检查滑动和水龙头。我之前没有看到这些阶段,所以我不知道它们存在。我仍然希望获得一些帮助让菜单跟随用户的手指。谢谢!