ccs的lua库api
CCS的lua库api
tags: ccs
framework.ccs
ccs基础库,将ccs的gui类封装到了lua.
-
ccs.layer
创建一个
UILayer层用法示例:
local layer = ccs.Layer() -
ccs.widget
ccs的基础控件
对应消息类型:
ccs.TouchEventType格式: widget = ccs.widget(参数表格对象)
参数表格对象:
enabled:"设置控件的可用状态,如果为true,widget响应touch并且可见,若为false,则控件不可见并且不响应touch(可选)", visable:"设置控件的可见状态(可选)", touch:"设置控件是否响应touch,不设置则默认为true(可选)", bright:"设置控件是否为高亮状态(可选)", foucs:"设置控件是否为焦点(可选)", z:"设置控件的层级(可选)", tag:"设置控件的标签(可选)", color:"设置控件的颜色(可选)", size:"设置控件的大小,CCSize类型(可选)", sType:"设置控件的尺寸类型(可选)", pType:"设置控件的布局(可选)", x,y:"坐标", name:"名字", listener:"回调函数表,是一个table,key值是ccs的消息类型,value为回调函数"用法示例:
local widget = ccs.widget({ size = CCSizeMake(200,200), x = 100, y = 200, listener = { [ccs.TouchEventType.began] = function(uiwidget) cclog(“widget touch down”) end, [ccs.TouchEventType.ended] = function(uiwidget) cclog(“widget touch ended”) end}, --"这里的回调函数是带参的,[uiwidget]是返回调用回调函数的widget." }) -
ccs.button
ccs的按键控件,可以设置三态图片
格式: button = ccs.button(参数表格对象)
参数表格对象
normal:"普通状态的图片", pressed:"按下状态的图片(可选)", disabled:"禁用状态的图片(可选)", scale9:"是否开启9宫格模式(可选) 默认为不开启", capInsets:"切片规格,只在开启9宫格模式下有用(可选)", text:"按键内显示的文本信息(可选)", "[widget]的所有参数",用法示例:
local button = ccs.button({ normal = "button_n.png", pressed = "button_p.png",--ccs的button如果不设置pressed图片,那么在按下之后会没有图片显示 disabled = "button_d.png", text = "这是一个按键", scale9 = true, listener = { [ccs.TouchEventType.began] = function(uiwidget) uiwidget:setText("widget touch down") end, [ccs.TouchEventType.ended] = function(uiwidget) uiwidget:setText("widget touch ended") end } }) -
ccs.label
创建一个文本控件
格式: label = ccs.label(参数表格对象)
参数表格对象
text:"label文本(可选)", font:"字体(可选)", fontSize:"字号(可选)", "[widget]的所有参数"用法示例:
local lable = ccs.label({ text = "this is a label" }) -
ccs.TextArea
创建一个文本区,等价于label,只是参数多了些
格式: textArea = ccs.TextArea(参数表格对象)
参数表格对象
H_alignment:"水平对齐方式", V_alignment:"竖直对齐方式", "[label]的所有参数" -
ccs.labelAtlas
创建一个数字标签
格式: labelAtlas = ccs.labelAtlas(参数表格对象)
参数表格对象
text:"文本", start:"开始的第一个char", image:"图片路径", w,h:"每个char的宽高", "[widget]的所有参数"用法示例:
local labelAtlas = ccs.labelAtlas( {text = "9527", image = "labelatlas.png", start = "0", w = 17, h = 22, x = s.width/2, y = s.height/2 + 35, }) -
ccs.labelBMFont
创建一个BMFont(图片字)文本
格式: labelBMFont = ccs.labelBMFont(参数表格对象)
参数表格对象
font:"*.fnt文件路径", text:"文本", "[widget]的所有参数"用法示例:
local labelBMF = ccs.labelBMFont({ font = "bitmapFontTest2.fnt", text = "TestBMFont" }) -
ccs.image
创建一个图片控件
格式: image = ccs.image(参数表格对象)
参数表格对象
image:"图片路径", "[widget]的所有参数",用法示例
local imageView = ccs.image({ image = "ccicon.png", x = 100, y = 200, }) -
ccs.checkBox
创建一个复选框
对应的消息类型:
ccs.CheckBoxEventType格式: checkbox = ccs.checkBox(参数表格对象)
参数表格对象
normal:"未选中时显示的图片" pressed:"按下时显示的图片", active:"选中时显示的图片", n_disable:"未选中时的禁用图片", a_disable:"选中时的禁用图片", "[widget]的所有参数"用法示例:
function selected(uiwidget) print("selected") end function unSelected(uiwidget) print("unselected") end local checkBox1 = ccs.checkBox({ normal = "check_box_normal.png", pressed = "check_box_normal_press.png", active = "check_box_active.png", n_disable = "check_box_normal_disable.png", a_disable = "check_box_active_disable.png", x = 200, y = 200, listener = {[ccs.CheckBoxEventType.selected] = selected, [ccs.CheckBoxEventType.unselected] = unSelected,} }) -
ccs.slider
创建一个滑动条控件
对应的消息响应:
ccs.SliderEventType格式: slider = ccs.slider(参数表格对象)
参数表格对象
bar:"滑动槽图片", progress:"滑动条图片", ball_n:"滑块普通状态图片", ball_p:"滑块按下状态图片", ball_d:"滑块禁用状态图片", size:"widget的参数,一旦设置了这个参数,自动开启9宫格模式"(可选), capInsets:"切片规格,9宫格模式开启时生效"(可选), "[widget]的所有参数"用法示例:
function sliderCallBack(slider) print(string.fomrat("percent %d",slider:getPercent())) end local slider = ccs.slider({ bar = "sliderTrack.png", ball_n = "sliderThumb.png", ball_p = "sliderThumb.png", progress = "sliderProgress.png", listener = {[ccs.SliderEventType.changed] = sliderCallBack}, }) --9宫格slider local slider2 = ccs.slider({ bar = "sliderTrack2.png", ball_n = "sliderThumb.png", ball_p = "sliderThumb.png", progress = "slider_bar_active_9patch.png", size = CCSizeMake(250,10), listener = {[ccs.SliderEventType.changed] = sliderCallBack}, }) -
cccs.loadingbar
创建一个进度条
格式: loadingBar = ccs.loadingbar(参数表格对象)
参数表格对象
image:"进度条图片", percent:"显示百分比,整数0~100,默认为100"(可选), dir:"进度条起始方向"(可选), "[widget]的所有参数"用法示例:
local loadingbar2 = ccs.loadingbar({ image = "sliderProgress.png", dir = LoadingBarTypeRight, }) -
ccs.textField
创建一个输入框
对应的消息类型:
ccs.TextFiledEventType格式: textField = ccs.textField(参数表格对象)
参数表格对象
font:"字体"(可选,默认为宋体), fontSize:"字体大小"(可选), holder:"空白时显示的文本"(可选), max:"长度限制"(可选), password:"密码模式"(可选), passwordText:"密码文本,仅在密码模式开启下有效"(可选,默认为*), "[widget]的所有参数"用法示例:
local textField = ccs.textField({ font = "雅黑", fontSize = 20, holder = "input here", max = 5, listener = { [ccs.TextFiledEventType.attach_with_ime] = function(uiwidget) print("Text Filed attach") end, [ccs.TextFiledEventType.detach_with_ime] = function(uiwidget) print("Text Filed detach") end, [ccs.TextFiledEventType.insert_text] = function(uiwidget) print("Text Filed insert") end, [ccs.TextFiledEventType.delete_backward] = function(uiwidget) print("Text Filed backward") end,} }) -
ccs.panel
创建一个层容器.基础布局容器类.
格式: panel = ccs.panel(参数表格对象)
参数表格对象
color:"颜色,在开启渐变模式时是开始颜色"(可选), endColor:"结束颜色,渐变模式下起作用", colorType:"层填充颜色模式"(可选), image:"背景图片"(可选), scale9:"开启9宫格模式"(可选), capInsets:"切片规格,仅在9宫格模式开启时生效"(可选), type:"布局方式", clip:"是否根据size裁剪", "[widget]的所有参数",用法示例:
local panel = ccs.panel({ size = CCSizeMake(100,100), colorType = LAYOUT_COLOR_SOLID, color = ccc3(128, 128, 128), x = 0, y = s.height - 100, }) local panel2 = ccs.panel({ size = CCSizeMake(100,100), colorType = LAYOUT_COLOR_GRADIENT, color = ccc3(64, 64, 64), endColor = ccc3(192, 192, 192), x = panel:getSize().width + 5, y = s.height - 100, }) -
ccs.listView
创建一个列表试图
对应的消息类型:
ccs.ListViewEventType格式: listView = ccs.listView(参数表格对象)
参数表格对象
direction:"滚动方向"(可选), "[panel]的所有参数"用法示例:
local listView = ccs.listView({ scale9 = true, image = "green_edit.png", size = CCSizeMake(110,100), listener = { [ccs.ListViewEventType.updateChild] = function(uiwidget) print(string.format("v_list_update:%d",uiwidget:getUpdateDataIndex())) uiwidget:setUpdateSuccess(true) end} }) -
ccs.listViewEx
创建一个增强的列表试图
对应的消息类型:
ccs.ListViewExEventType格式: listViewEx = ccs.listViewEx(参数表格对象)
参数表格对象
gravity:, margin:, direction:, bounce:, inertia:, innerSize:, "[panel]的所有参数"这个类暂时没有示例 -
ccs.scrollView
创建一个滚动视图
对应的消息类型:
ccs.ScrollViewEventType格式: scrollView = ccs.scrollView(参数表格对象)
参数表格对象
direction:"滚动方向"(可选), bounce:"是否反弹"(可选), inertia:"是否开启惯性"(可选), innerSize:"拖拽区域,CCSize类型,若不设置则为scrollView的size"(可选), "[panel]的所有参数"用法示例:
local bg = ccs.image({ image = "background.png" }) local scrollView = ccs.scrollView({ bounce = true, size = CCSizeMake(200,200), innerSize = bg:getSize(), direction = SCROLLVIEW_DIR_HORIZONTAL, scale9 = true, image = "green_edit.png", }) -
ccs.dragPanel
创建一个拖拽层,这个控件只是强制设定scrollView的滚动方向为SCROLLVIEW_DIR_BOTH
对应的消息类型:
ccs.ScrollViewEventType格式: dragPanel = ccs.dragPanel(参数表格对象)
参数表格对象
"[scrollView]所有参数,除了direction,这个无法设置,强制为SCROLLVIEW_DIR_BOTH",用法示例:
local b11 = ccs.image({ image = "b11.png", }) local dragPanel = ccs.dragPanel({ bounce = true, size = CCSizeMake(200,100), scale9 = true, image = "green_edit.png", x = listView2:getPosition().x, y = listView2:getPosition().y - 100, innerSize = b11:getSize(), listener = { [ccs.ScrollViewEventType.scrollToTop] = function(uiwidget) label:setText(ccs.ScrollViewEventType.scrollToTop) end, [ccs.ScrollViewEventType.scrollToBottom] = function(uiwidget) label:setText(ccs.ScrollViewEventType.scrollToBottom) end, [ccs.ScrollViewEventType.scrollToLeft] = function(uiwidget) label:setText(ccs.ScrollViewEventType.scrollToLeft) end, [ccs.ScrollViewEventType.scrollToRight] = function(uiwidget) label:setText(ccs.ScrollViewEventType.scrollToRight) end, [ccs.ScrollViewEventType.scrolling] = function(uiwidget) label:setText(ccs.ScrollViewEventType.scrolling) end, [ccs.ScrollViewEventType.bounce_top] = function(uiwidget) label:setText(ccs.ScrollViewEventType.bounce_top) end, [ccs.ScrollViewEventType.bounce_bottom] = function(uiwidget) label:setText(ccs.ScrollViewEventType.bounce_bottom) end, [ccs.ScrollViewEventType.bounce_left] = function(uiwidget) label:setText(ccs.ScrollViewEventType.bounce_left) end, [ccs.ScrollViewEventType.bounce_right] = function(uiwidget) label:setText(ccs.ScrollViewEventType.bounce_right) end,} }) -
ccs.pageView
创建一个页面视图
对应的消息类型:
ccs.PageViewEventType格式: pageView = ccs.pageView(参数表格对象)
参数表格对象
"[panel]的所有参数",用法示例:
local pageView = ccs.pageView({ size = CCSizeMake(110,100), x = 0, y = panel:getPosition().y - 100, listener = {[ccs.PageViewEventType.turning] = function(uiwidget) label:setText(string.format("pageView turning %d",uiwidget:getCurPageIndex()+1)) end} }) for i=1,3 do local layout = ccs.panel({ size = pageView:getSize() }) local image = ccs.image({ scale9 = true, image = "scrollviewbg.png", size = pageView:getSize(), x = layout:getSize().width/2, y = layout:getSize().height/2, }) layout:addChild(image) local pageLabel = ccs.label({ text = string.format("page=%d",i), fontSize = 20, color = ccc3(192,192,192), x = layout:getSize().width/2, y = layout:getSize().height/2, }) layout:addChild(pageLabel) pageView:addPage(layout) end -
ccs.loadLayer
读取一个ccs的ui文件并创建一个UILayer装载它
格式: layer = ccs.loadLayer(ui文件)
用法示例:
local layer = ccs.loadLayer("DemoMap/DemoMap.ExportJson") -
ccs.loadWidget
读取一个ccs的ui文件
格式: widget = ccs.loadWidget(ui文件)
framework.ccs.CCSWidgetExtend
父类为UIWidget类的扩展
扩展函数
- getChild(name):通过name返回一个child,child的类型自动匹配,并且自动添加扩展接口
- setListener(params):添加监听函数表,从文件读取的widget可以通过此接口添加回调函数
- onPressStateChangedToNormal(uiwidget)
- onPressStateChangedToPressed(uiwidget)
- onPressStateChangedToDisabled(uiwidget):这3个函数是默认函数,可以被监听函数替代
framework.ccs.CCSLayerExtend
UILayer的扩展
扩展函数
- getChild(name):同CCSWidgetExtend的getChild
- insterGroup(groupId,...):针对UICheckBox做的扩展,将checkbox控件添加到一个group
- GroupDefault(groupId,checkbox):默认选择给定的group的某个checkbox
- GroupSelected(groupId,checkbox):选择给定的group里的某个checkbox,group中其他checkbox将unSelected
framework.ccs.CCSLayoutExtend
父类为UILayout类的扩展,此扩展继承于CCSWidgetExtend
扩展函数
- AutoLayout(margin,...):自动对控件布局
framework.ccs.CCSMenu
ccs的扩展控件,简单实现了类似CCMenu的效果
格式: menu = ccs.menu(参数表格对象)
参数表格对象
"[panel]的所有参数"用法示例:
local menu = ccs.menu({ size = CCSizeMake(200,200), colorType = LAYOUT_COLOR_SOLID, color = ccc3(200,0,0), type = LAYOUT_LINEAR_HORIZONTAL, }) local button = ccs.button({ touch = false, normal = "animationbuttonnormal.png", pressed = "animationbuttonpressed.png", text = "中文按键", listener = { [ccs.TouchEventType.began] = function(uiwidget) print("按键1 Touch Down") end, [ccs.TouchEventType.moved] = function(uiwidget) print("按键1 Touch Move") end, [ccs.TouchEventType.ended] = function(uiwidget) print("按键1 Touch Up") end, [ccs.TouchEventType.canceled] = function(uiwidget) print("按键1 Touch Cancel") end, }) local button2 = ccs.button({ touch = false, normal = "animationbuttonnormal.png", pressed = "animationbuttonpressed.png", text = "中文按键2", listener = { [ccs.TouchEventType.began] = function(uiwidget) print("按键2 Touch Down") end, [ccs.TouchEventType.moved] = function(uiwidget) print("按键2 Touch Move") end, [ccs.TouchEventType.ended] = function(uiwidget) printt("按键2 Touch Up") end, [ccs.TouchEventType.canceled] = function(uiwidget) print("按键2 Touch Cancel") end,} }) menu:AutoLayout(1,button,button2)