Quick中的UIButton

超、凢脫俗 2022-07-15 11:53 176阅读 0赞

为便于看官实际操作和整体理解，直接放入整个类，其中包含各个按钮的创建方式及属性设置

---定义类
    local TestUIButtonScene = class("TestUIButtonScene", function (  )
    	return display.newScene("TestUIButtonScene")
    end)
    
    
    --声明图片资源，每一种按钮对应一种表
    TestUIButtonScene.CHECKBOX_BUTTON_IMAGES = {
        off = "CheckBoxButtonOff.png",
        off_pressed = "CheckBoxButtonOffPressed.png",
        off_disabled = "CheckBoxButtonOffDisabled.png",
        on = "CheckBoxButtonOn.png",
        on_pressed = "CheckBoxButtonOnPressed.png",
        on_disabled = "CheckBoxButtonOnDisabled.png",
    }
    
    TestUIButtonScene.CHECKBOX_BUTTON2_IMAGES = {
        off = "CheckBoxButton2Off.png",
        on = "CheckBoxButton2On.png",
    }
    
    TestUIButtonScene.PUSH_BUTTON_IMAGES = {
        normal = "Button01.png",
        pressed = "Button01Pressed.png",
        disabled = "Button01Disabled.png",
    }
    
    TestUIButtonScene.RADIO_BUTTON_IMAGES = {
        off = "RadioButtonOff.png",
        off_pressed = "RadioButtonOffPressed.png",
        off_disabled = "RadioButtonOffDisabled.png",
        on = "RadioButtonOn.png",
        on_pressed = "RadioButtonOnPressed.png",
        on_disabled = "RadioButtonOnDisabled.png",
    }
    
    --构造函数
    function TestUIButtonScene:ctor(  )
    
        self:createButtonGroup1()
        self:createButtonGroup2()
        self:createButtonGroup3()
    
    end

--复选按钮
    function TestUIButtonScene:createButtonGroup1(  )
        local checkBoxButton1,checkBoxButton2
    
        ---更新输出按钮的状态的Label
        local function updateCheckBoxButtonLabel( checkbox )
            local state = ""
            if checkbox:isButtonSelected()then
                state = "on"
            else
                state = "off"
            end
            if not checkbox:isButtonEnabled() then
                state = state .. "(disabled)"
            end
            checkbox:setButtonLabelString(string.format("state is %s", state))
        end
    
        --第一个按钮
        checkBoxButton1 = cc.ui.UICheckBoxButton.new(TestUIButtonScene.CHECKBOX_BUTTON_IMAGES)
            :setButtonLabel(cc.ui.UILabel.new({test = "", size = 22, color = cc.c3b(255,96,255)}))  --设置Label字体
            :setButtonLabelOffset(0, -40)--设置Label与按钮的位置
            :setButtonLabelAlignment(display.CENTER) --设置Label和按钮的对齐方式
            :onButtonStateChanged(function(event)   --每次状态更新调用此函数
                updateCheckBoxButtonLabel(event.target)
                end)
            :align(display.LEFT_CENTER, display.left + 40, display.top - 80)
            :addTo(self)
        updateCheckBoxButtonLabel(checkBoxButton1) -- 再更新一次
    
        --第二个按钮
        checkBoxButton2 = cc.ui.UICheckBoxButton.new(TestUIButtonScene.CHECKBOX_BUTTON_IMAGES)
            :setButtonSelected(true)
            :setButtonLabel(cc.ui.UILabel.new({text = "", size = 22, color = cc.c3b(96, 200, 96)}))
            :setButtonLabelOffset(0, -40)
            :setButtonLabelAlignment(display.CENTER)
            :onButtonStateChanged(function(event)
                updateCheckBoxButtonLabel(event.target)
            end)
            :align(display.LEFT_CENTER, display.left + 260, display.top - 80)
            :addTo(self)
        updateCheckBoxButtonLabel(checkBoxButton2)
    
        --PushButton
        cc.ui.UIPushButton.new(TestUIButtonScene.PUSH_BUTTON_IMAGES,{scale9 = true})
            --设置按钮大小
            :setButtonSize(240, 60)
            --设置正常状态下的label
            :setButtonLabel("normal", cc.ui.UILabel.new({
                UILabelType = 2,
                text = "This is a PushButton",
                size = 18,
            }))
            --设置按下状态的label
            :setButtonLabel("pressed", cc.ui.UILabel.new({
                UILabelType = 2,
                text = "Button Pressed",
                size = 18,
                color = cc.c3b(255, 64, 64)
            }))
            --设置禁用状态下的label
            :setButtonLabel("disabled", cc.ui.UILabel.new({
                UILabelType = 2,
                text = "Button Disabled",
                size = 18,
                color = cc.c3b(0, 0, 0)
            }))
            --设置点击事件
            :onButtonClicked(function(event)
                if math.random(0, 1) == 0 then
                    checkBoxButton1:setButtonEnabled(not checkBoxButton1:isButtonEnabled())
                else
                    checkBoxButton2:setButtonEnabled(not checkBoxButton2:isButtonEnabled())
                end
    
                local button = event.target
                button:setButtonEnabled(false)
                button:setButtonLabelString("disabled", "Button Enable after 1s")
                self:performWithDelay(function()
                    button:setButtonLabelString("disabled", "Button Disabled")
                    button:setButtonEnabled(true)
                end, 1.0)
            end)
            :align(display.LEFT_CENTER, display.left + 480, display.top - 80)
            :addTo(self)
    end

--按钮组
    function TestUIButtonScene:createButtonGroup2(  )
        --新建按钮组，排序规则为从上至下
        local group = cc.ui.UICheckBoxButtonGroup.new(display.TOP_TO_BOTTOM)
            --给按钮组添加按钮
            :addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
                :setButtonLabel(cc.ui.UILabel.new({text = "option 1", color = display.COLOR_RED}))
                :setButtonLabelOffset(20, 0)
                :align(display.LEFT_CENTER))
            :addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
                :setButtonLabel(cc.ui.UILabel.new({text = "option 2", color = display.COLOR_RED}))
                :setButtonLabelOffset(20, 0)
                :align(display.LEFT_CENTER))
            :addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
                :setButtonLabel(cc.ui.UILabel.new({text = "option 3", color = display.COLOR_RED}))
                :setButtonLabelOffset(20, 0)
                :align(display.LEFT_CENTER))
            :addButton(cc.ui.UICheckBoxButton.new(TestUIButtonScene.RADIO_BUTTON_IMAGES)
                :setButtonLabel(cc.ui.UILabel.new({text = "option 4 disabled", color = display.COLOR_RED}))
                :setButtonEnabled(false)
                :setButtonLabelOffset(20, 0)
                :align(display.LEFT_CENTER))
            --设置布局  每个按钮的边缘位置
            :setButtonsLayoutMargin(10, 10, 10, 10)
            --设置回调函数
            :onButtonSelectChanged(function(event)
                printf("Option %d selected, Option %d unselected", event.selected, event.last)
            end)
            --设置排列  按钮组的位置
            :align(display.LEFT_TOP, display.left + 40, display.top - 240)
            :addTo(self)
        group:getButtonAtIndex(4):setButtonSelected(true)
    
        --新建按钮对按钮组进行操作
        cc.ui.UIPushButton.new("GreenButton.png",{scale9 = true})
            --设置按钮大小
            :setButtonSize(160, 40)
            --设置按钮上的label
            :setButtonLabel(cc.ui.UILabel.new({text = "Remove option 2", size = 16, color = display.COLOR_BLUE}))
            --设置按钮在按下状态下的回调函数
            :onButtonPressed(function(event)
                event.target:getButtonLabel():setColor(display.COLOR_RED)--按钮上的字体变红
            end)
            --设置按钮在释放状态下的回调函数
            :onButtonRelease(function(event)
                event.target:getButtonLabel():setColor(display.COLOR_BLUE)---按钮上的字体变蓝
            end)
            --设置按钮的点击函数
            :onButtonClicked(function(event)
                if group:getButtonsCount() == 4 then
                    group:removeButtonAtIndex(2)  --移除第二个按钮
                    event.target:removeSelf()   ---移除自己
                end
            end)
            --设置位置
            :align(display.LEFT_CENTER, display.left + 200, display.top - 210)
            :addTo(self)
    end
    
    function TestUIButtonScene:createButtonGroup3(  )
        --创建勾选框
        cc.ui.UICheckBoxButton.new(TestUIButtonScene.CHECKBOX_BUTTON2_IMAGES)
            :setButtonLabel(cc.ui.UILabel.new({text = "checkbox 1", size = 16,  color = display.COLOR_BLUE}))
            :setButtonLabelOffset(40, 0)
            :setButtonLabelAlignment(display.LEFT_CENTER)
            :align(display.LEFT_CENTER, display.left + 80 ,display.top - 400)
            :addTo(self)
    
    end
    
    return TestUIButtonScene;