5.Quick-cocos2dx中TabBar的实现

1.效果展示

2.调用方式

self.tabLayout = CCTabBar.new({
        itemTxts = {"HELP", "SOUND", "SETTING"},
        onTabChangeFunc = function(self, curTabIndex) print("curTabIndex = " .. curTabIndex) end
}):center():addTo(self)

3.参数说明

    --TabBar背景
    local bg = args.bg or "pop_common_tab_bg.png"
    local bgWidth = args.bgWidth or 458
    local bgHeight = args.bgHeight or 50

    --TabBar边缘项背景
    local itemEdgeSelBg = args.itemEdgeSelBg or "pop_common_tab_item_selected.png"
    local itemEdgeUnSelBg = args.itemEdgeUnSelBg or "pop_common_tab_item_pressed.png"

    --TabBar中间项背景
    local itemMiddleSelBg = args.itemMiddleSelBg or "pop_common_tab_item_middle_selected.png"
    local itemMiddleUnSelBg = args.itemMiddleUnSelBg or "pop_common_tab_item_middle_pressed.png"

    --TabBar选项上的文本内容、大小、选择以及未选中颜色
    local itemTxts = args.itemTxts or {"TAB1", "TAB2"}
    local itemTxtSize = args.itemTxtSize or 30
    self.itemTxtSelectedColor = args.itemTxtSelectedColor_ or cc.c3b(0xff, 0xff, 0xff)
    self.itemTxtUnselectedColor = args.itemTxtUnselectedColor_ or cc.c3b(0xaa, 0xaa, 0xaa)

4.代码实现

--
-- Author: VincentZeng
-- Date: 2016-06-25 16:45:00
--

local CCTabBar = class("CCTabBar", function ()
    return display.newNode()
end)

function CCTabBar:ctor(args)    

    --参数获取
    args = args or {}

    --TabBar背景
    local bg = args.bg or "pop_common_tab_bg.png"
    local bgWidth = args.bgWidth or 458
    local bgHeight = args.bgHeight or 50

    --TabBar边缘项背景
    local itemEdgeSelBg = args.itemEdgeSelBg or "pop_common_tab_item_selected.png"
    local itemEdgeUnSelBg = args.itemEdgeUnSelBg or "pop_common_tab_item_pressed.png"

    --TabBar中间项背景
    local itemMiddleSelBg = args.itemMiddleSelBg or "pop_common_tab_item_middle_selected.png"
    local itemMiddleUnSelBg = args.itemMiddleUnSelBg or "pop_common_tab_item_middle_pressed.png"

    --TabBar选项上的文本
    local itemTxts = args.itemTxts or {"TAB1", "TAB2"}
    local itemTxtSize = args.itemTxtSize or 30
    self.itemTxtSelectedColor = args.itemTxtSelectedColor_ or cc.c3b(0xff, 0xff, 0xff)
    self.itemTxtUnselectedColor = args.itemTxtUnselectedColor_ or cc.c3b(0xaa, 0xaa, 0xaa)

    --TabBar选项切换时的回调函数
    self.onTabChangeFunc = args.onTabChangeFunc or (function (self, curTabIndex) print("curTabIndex = " .. curTabIndex) end)

    --TabBar选项相关信息
    local itemWidth = bgWidth / #itemTxts
    local itemHeight = bgHeight - 2
    self.itemNum = #itemTxts

    --容器创建
    local container = display.newNode():addTo(self)
    --TabBar背景创建
    display.newScale9Sprite(bg, 0, 0, cc.size(bgWidth, bgHeight + 20)):addTo(container)
    --TabBar选项创建
    self.tabBarItems = { curTabIndex = 1 }  --当前选项为第一个
    for i = 1, self.itemNum do
        self.tabBarItems[i] = {}

        --计算选项的x坐标
        local itemPosX = itemWidth * i - itemWidth * (self.itemNum / 2 - 0.5) - itemWidth
        if i == 1 then    --左边缘项创建
            self.tabBarItems[i].unselBg = display.newScale9Sprite(itemEdgeUnSelBg, itemPosX, 0, cc.size(itemWidth, itemHeight)):addTo(container, 2)
            self.tabBarItems[i].selBg = display.newScale9Sprite(itemEdgeSelBg, itemPosX, 0, cc.size(itemWidth, itemHeight)):addTo(container, 2)
            self.tabBarItems[i].txt = display.newTTFLabel({text = itemTxts[i], color = self.itemTxtSelectedColor, size = 30, align = display.TEXT_ALIGN_CENTER}):pos(itemPosX, 0):addTo(container, 2)
        elseif i == self.itemNum then    --右边缘项创建
            self.tabBarItems[i].unselBg = display.newScale9Sprite(itemEdgeUnSelBg, itemPosX, 0, cc.size(itemWidth, itemHeight)):addTo(container, 2):setScaleX(-1)
            self.tabBarItems[i].selBg = display.newScale9Sprite(itemEdgeSelBg, itemPosX, 0, cc.size(itemWidth, itemHeight)):addTo(container, 2):setScaleX(-1):hide()
            self.tabBarItems[i].txt = display.newTTFLabel({text = itemTxts[i], color = self.itemTxtUnselectedColor, size = 30, align = display.TEXT_ALIGN_CENTER}):pos(itemPosX, 0):addTo(container, 2)
        else    --中间项创建
            self.tabBarItems[i].unselBg = display.newScale9Sprite(itemMiddleUnSelBg, itemPosX, 0, cc.size(itemWidth, itemHeight)):addTo(container, 2)
            self.tabBarItems[i].selBg = display.newScale9Sprite(itemMiddleSelBg, itemPosX, 0, cc.size(itemWidth, itemHeight)):addTo(container, 2):hide()
            self.tabBarItems[i].txt = display.newTTFLabel({text = itemTxts[i], color = self.itemTxtUnselectedColor, size = 30, align = display.TEXT_ALIGN_CENTER}):pos(itemPosX, 0):addTo(container, 2)
        end        
    end

    --触摸添加
    self:setTouchEnabled(true)
    self:addNodeEventListener(cc.NODE_TOUCH_EVENT, handler(self, self.onTouch))
end

function CCTabBar:onTouch(event)
    if event.name == "began" then        
        for i = 1, #self.tabBarItems do
            local rect = self.tabBarItems[i].unselBg:getBoundingBox()
            local pos = {x = event.x - self:getPositionX(), y = event.y - self:getPositionY()}

            --如果当前选中项与之前选中项不同
            if cc.rectContainsPoint(rect, pos) and self.tabBarItems.curTabIndex ~= i then
                --调整之前选中项
                self.tabBarItems[self.tabBarItems.curTabIndex].selBg:hide()
                self.tabBarItems[self.tabBarItems.curTabIndex].txt:setTextColor(self.itemTxtUnselectedColor)

                --更新当前选中项
                self.tabBarItems[i].selBg:show()
                self.tabBarItems[i].txt:setTextColor(self.itemTxtSelectedColor)
                self:onTabChange(i)                                   
            end                      
        end
        return true  
    end
end

function CCTabBar:getCurTabIndex()
    return self.tabBarItems.curTabIndex
end

function CCTabBar:setCurTabIndex(curTabIndex)
    if curTabIndex > 0 and curTabIndex < self.itemNum and self.tabBarItems.curTabIndex ~= curTabIndex then

        self.tabBarItems[self.tabBarItems.curTabIndex].selBg:hide()
        self.tabBarItems[self.tabBarItems.curTabIndex].txt:setTextColor(self.itemTxtUnselectedColor)

        self.tabBarItems[curTabIndex].selBg:show()
        self.tabBarItems[curTabIndex].txt:setTextColor(self.itemTxtSelectedColor)
        self:onTabChange(curTabIndex) 

        self.tabBarItems.curTabIndex = curTabIndex
    end
end

function CCTabBar:onTabChange(curTabIndex)
    self.tabBarItems.curTabIndex = curTabIndex
    self:onTabChangeFunc(curTabIndex)
    return curTabIndex
end

return CCTabBar