如何制作一个带有加速度的可以上下左右滚动的滚动视图？

2016-12-31 22:0:17
收藏：0
阅读：146
评论：1

Corona SDK 提供的原始滚动视图只支持垂直和水平滚动，但不能同时进行。

如您所见，下面的视频可以做到。但这并不免费。那么我该怎么做呢？ https://www.youtube.com/watch?feature=player_embedded&v=ecAcUxex46c#t=74

非常感谢。

点赞
用户3041972
用户3041972

这是一个示例，你可以使用图片代替我放的矩形：

local widget = require("widget")

local sceneGroup = display.newGroup();

-- 创建场景
local ox, oy = math.abs(display.screenOriginX), math.abs(display.screenOriginY)
local tabBarHeight = 25

-- 调整某些主题的背景颜色
local backgroundColor = {240/255}

-- 滚动视图的监听器
local function scrollListener(event)
    local phase = event.phase
    local direction = event.direction

    if "began" == phase then
        -- print("开始")
    elseif "moved" == phase then
        -- print("移动")
    elseif "ended" == phase then
        -- print("结束")
    end

    -- 如果滚动视图已经达到了滚动限制
    if event.limitReached then
        if "up" == direction then
            -- print("已达到顶部限制")
        elseif "down" == direction then
            -- print("已达到底部限制")
        elseif "left" == direction then
            -- print("已到达左边界")
        elseif "right" == direction then
            -- print("已到达右边界")
        end
    end

    return true
end

-- 创建一个滚动视图
local scrollView = widget.newScrollView {
    left = 20 - ox,
    top = 62,
    width = display.contentWidth + ox + ox - 60,
    height = display.contentHeight - 32 - tabBarHeight - 120,
    hideBackground = false,
    backgroundColor = backgroundColor,
    -- isBounceEnabled = false,
    horizontalScrollingDisabled = false,
    verticalScrollingDisabled = false,
    listener = scrollListener
}
sceneGroup:insert(scrollView)

-- 将一个图片插入滚动视图
local background = display.newRect(100, 100, 1200, 1200)
background.x = background.contentWidth * 0.5
background.y = background.contentHeight * 0.5
scrollView:insert(background)

--------------------------------------------------------------------------
-- 将各种其他小部件插入滚动视图以展示功能
--------------------------------------------------------------------------

-- 单选按钮组
local radioGroup = display.newGroup()
local radioButton = widget.newSwitch {
    left = 20,
    style = "radio",
    initialSwitchState = true
}
radioGroup:insert(radioButton)
radioButton.y = 50

local radioButton2 = widget.newSwitch {
    style = "radio"
}
radioGroup:insert(radioButton2)
radioButton2.x = radioButton.x + radioButton.width
radioButton2.y = 50
scrollView:insert(radioGroup)

-- 多选框
local checkboxButton = widget.newSwitch {
    style = "checkbox"
}
checkboxButton.x = radioButton2.x + radioButton2.width + 20
checkboxButton.y = 50
scrollView:insert(checkboxButton)

-- 开/关切换
local onOffSwitch = widget.newSwitch {
    style = "onOff",
    initialSwitchState = false
}
onOffSwitch.y = 50
scrollView:insert(onOffSwitch)

-- 步进器
local stepper = widget.newStepper {
    left = 20,
    top = 80,
    initialValue = 4,
    minimumValue = 0,
    maximumValue = 25
}
scrollView:insert(stepper)

-- 进度条
local progressView = widget.newProgressView {
    left = 130,
    width = 125,
    isAnimated = true,
}
scrollView:insert(progressView)
progressView.y = stepper.y
local currentProgress = 0.0
testTimer = timer.performWithDelay(100, function(event)
    currentProgress = currentProgress + 0.01
    progressView:setProgress(currentProgress)
end, 50)

onOffSwitch.x = progressView.x + 12
2016-03-03 09:55:43

作者:

用户1305842

用户1305842
推荐文章