cocos creator tab标签按钮组件 tabButtonGroup

cocos creator tab标签按钮组件 tabButtonGroup

有些UI界面有切换tab标签的需求，为了减少重复工作，提取了tabButtomGroup组件，主要功能是挂载组件时自动创建tabButton节点，并注册点击事件设置label 内容样式等，记录一下。

git地址

https://github.com/h87545645/tabButtonGroup.

关键代码

在编辑器模式下创建layout,运行时挂上button

	protected onLoad() {
		if (CC_EDITOR) {
			//添加layout
			if (!this.node.getComponent(cc.Layout)) {
				this.node.anchorY = 1;
				cc.log("TabButtonGroup add cc.Layout");
				this.node.addComponent(cc.Layout);
				this.node.getComponent(cc.Layout).type = cc.Layout.Type.VERTICAL;
				this.node.anchorY = 1;
				this._updateLayout();
			}
			if (!this.defaultTab || this.TabsNode.length < 1) {
				this.TabsNode = this.TabsNode;
			}
			return;
		}
		this._addTabButtonComp();
	}
/**
	 * 添加button组件
	 */
	private _addTabButtonComp() {
		if (this._isAddBtn) {
			return;
		}
		this._isAddBtn = true;
		this.node.children.forEach((node, nodeIndex) => {
			let btnComp =  node.getComponent(cc.Button)

			if (btnComp == null) {
				node.addComponent(cc.Button)
				btnComp = node.getComponent(cc.Button);
			}
			// 判断button，将ccButton替换为自定义的UICustomButton
			let btnCompName = cc.js.getClassName(btnComp)
			if ( btnCompName === 'cc.Button') {
				let newBtnComp = node.addComponent("cc.Button")

				newBtnComp.transition = btnComp.transition;
				newBtnComp.zoomScale = btnComp.zoomScale;

				newBtnComp.disabledSprite = btnComp.disabledSprite;
				newBtnComp.hoverSprite = btnComp.hoverSprite;
				newBtnComp.normalSprite = btnComp.normalSprite;
				newBtnComp.pressedSprite = btnComp.pressedSprite;

				newBtnComp.hoverColor = btnComp.hoverColor;
				newBtnComp.normalColor = btnComp.normalColor;
				newBtnComp.pressedColor = btnComp.pressedColor;
				newBtnComp.disabledColor = btnComp.disabledColor;

				newBtnComp.target = btnComp.target

				btnComp = newBtnComp
				node.removeComponent(cc.Button) // 移除老button
			}

			//绑定回调事件
			this.touchEvents.forEach((event: cc.Component.EventHandler) => {
				//克隆数据，每个节点获取的都是不同的回调
				let hd = new cc.Component.EventHandler() //copy对象
				hd.component = event['_componentName']
				hd.handler = event.handler
				hd.target = event.target
				if (this.customData === PARAM_TYPE.NODE_INDEX) {
					hd.customEventData = nodeIndex.toString()
				} else {
					hd.customEventData = node.name
				}
				btnComp.clickEvents.push(hd)
			})

		})
	}

在编辑器挂载组件时自动创建tabNode。

	@property({ type: [cc.Node] })
	_tabsNode: Array<cc.Node> = new Array<cc.Node>(1);
	@property({
		tooltip: 'tab节点',
		type: [cc.Node],
	})
	public set TabsNode(tabArr: Array<cc.Node>) {
		// cc.log("gen init")
		if (tabArr.length < 1) {
			this.TabsNode = new Array<cc.Node>(1);
			return;
		}
		this._tabsNode = tabArr;
		this._genTabs(tabArr);
		this._updateLayout();
	}
	public get TabsNode(): Array<cc.Node> {
		return this._tabsNode
	}
/**
	 * 生成初始化tab
	 * @param tabArr tab数量
	 */
	private _genTabs(tabArr) {
		if (CC_EDITOR) {
			//删除已有
			let children = this.node.children.concat()
			for (let i = 0; i < children.length; i++) {
				if (i == 0) {
					continue;
				}
				if (children[i] != null) {
					children[i].removeFromParent(true)
					children[i].destroy()
				}
			}
			//generate 
			for (let i = 0; i < tabArr.length; i++) {
				if (i == 0 && this.node.children.length == 1) {
					this.TabsNode[i] = this.node.children[i];
					continue;
				}
				let tab = null;
				if (this.defaultTab && this.node.children.length > 0) {
					tab = cc.instantiate(this.defaultTab);
				} else {
					tab = this._genNewTab(i);
					this.defaultTab = tab;
				}
				tab.parent = this.node;
				this.TabsNode[i] = tab;
			}
		}
	}

在编辑器上挂上事件

在点击时调用

	/**
	 * tab状态切换
	 * @param index tab下标
	 */
	public changeTab(index) {
		if (!this._isAddBtn) {
			this._addTabButtonComp();
		}
		for (let i = 0; i < this.TabsNode.length; i++) {
			this.TabsNode[i].getComponent(cc.Button).interactable = true;
			this.TabsNode[i].getChildByName("on").active = false;
			this.TabsNode[i].getChildByName("off").active = true;
		}
		this.TabsNode[index].getComponent(cc.Button).interactable = false;
		this.TabsNode[index].getChildByName("on").active = true;
		this.TabsNode[index].getChildByName("off").active = false;

	}