Cocos2dx-lua ScrollView[一]基础篇

一.ScrollView概述

cocos游戏中ScrollView控件大量使用，95%以上的项目都会使用ScrollView，个别游戏可能全部使用翻页的滑动效果。如果想要精通Cocos的UI开发，精通ScrollView控件非常关键，因此对ScrollView的使用进行总结很有必要。

下文缩写说明：sv = ScrollView, item代表ScrollView的一个子节点

二.ScrollView的创建

2.1 在Cocos Studio中创建

将滚动容器组件拖动至布局视图中，默认的显示如下

有必要把sv涉及到的两部分区域的概念进行说明，在实际应用时经常会调用setContentSize和setInnerContainerSize来设置可视区域和滚动区域，在cocos studio中把裁切内容选项取消勾选(默认)时会显示出滚动区域

接下来修改sv的属性，有必要说明的部分见下图

2.2 代码创建sv

		self.sv = ccui.ScrollView:create()
		self.sv:setContentSize(cc.size(670, 595))
		self.sv:setInnerContainerSize(cc.size(670, 595))
		self.sv:setPosition(270,27)
		self.midPanel:addChild(self.sv)
		self.sv:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)	--默认为垂直，只在水平时设置即可
		self.sv:setBounceEnabled(true)							--默认为false,设置后item总高没超过sv的高度时可滚动
		self.sv:setScrollBarEnabled(false)						--隐藏滚动条
		self.sv:setClippingType(1)								--设置裁剪类型避免出现划出显示区域仍然显示的bug
		--下面2个API实战用不到这里只做演示
		self.sv:setBackGroundColorType(1)						--设置背景填充类型(无/纯色背景/渐变背景)
		self.sv:setBackGroundColor(cc.c3b(0x90, 0xee, 0x90))	--设置背景颜色

三.sv的API介绍

https://docs.cocos2d-x.org/api-ref/cplusplus/v3x/d8/d29/classcocos2d_1_1ui_1_1_scroll_view.html#details

enum {
    LAYOUT_CLIPPING_STENCIL,//模板
    LAYOUT_CLIPPING_SCISSOR//镂空
}LayoutClippingType;//容器裁切类型

setClippingType(1)设置裁剪类型，避免出现划出显示区域仍然显示的bug；

默认为setClippingType(0)，setClippingType后的代码执行逻辑可在C++中查看

四.什么是正确的滚动效果

4.1 所有item的高度之和 <= sv自身的高度

滚动超过sv的顶部和底部后放开，sv会回弹到第一个item顶部和sv顶部对齐的位置

4.2 sv自身的高度 < 所有item的高度之和

滚动超过sv的底部后放开，sv会回弹到第一个item顶部和sv顶部对齐的位置

滚动超过sv的顶部后放开，sv会回弹到最下面item底部和sv底部对齐的位置

五.ScrollView应用举例

这里介绍一种通过clone创建item的方式，sv通过代码创建了没用cocosstudio中的，示例代码运行的效果如上图所示

    if not self.sv then
		self.sv = ccui.ScrollView:create()
		self.sv:setContentSize(cc.size(670, 595))
		self.sv:setPosition(270,27)
		self.midPanel:addChild(self.sv)
		self.sv:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)	--默认为垂直，只在水平时设置即可
		self.sv:setBounceEnabled(true)							--默认为false,设置后item总高没超过sv的高度时可滚动
		self.sv:setScrollBarEnabled(false)						--隐藏滚动条
		self.sv:setClippingType(1)								--设置裁剪类型避免出现划出显示区域仍然显示的bug
		--下面2个API实战用不到这里只做演示
		self.sv:setBackGroundColorType(1)						--设置背景填充类型(无/纯色背景/渐变背景)
		self.sv:setBackGroundColor(cc.c3b(0x90, 0xee, 0x90))	--设置背景颜色
	end
 
	local svSize = self.sv:getContentSize()
	local itemHeight = 136	--一个item本身的高度+相邻item之间的间距
	local totalItemHeight = self.selIndex * itemHeight
	local topY = 0
    if totalItemHeight < svSize.height then
		self.sv:setInnerContainerSize(cc.size(svSize.width, svSize.height))
        topY = svSize.height
    else
        self.sv:setInnerContainerSize(cc.size(svSize.width, totalItemHeight))
		topY = totalItemHeight
	end
	local clonedItem = self.midPanel:getChildByName("cell")
	clonedItem:setVisible(false)
	self.sv:removeAllChildren()
	for i = 1, self.selIndex do
		local oneItem = clonedItem:clone()
		self.sv:addChild(oneItem)
		oneItem:setPosition(cc.p(svSize.width / 2, topY - itemHeight / 2 - itemHeight * (i - 1)))
		oneItem:setVisible(true)
		--设置item内容
		oneItem:getChildByName("label_index"):setString(i)
	end