quick-cocos2dx-luaUI控件讲解

--MyApp部分

require("config")
require("cocos.init")
require("framework.init")


local MyApp = class("MyApp", cc.mvc.AppBase)


function MyApp:ctor()
    MyApp.super.ctor(self)
end


function MyApp:run()
    cc.FileUtils:getInstance():addSearchPath("res/")
    self:enterScene("MainScene")
end


return MyApp

--主函数的部分

local MainScene = class("MainScene", function()
    return display.newScene("MainScene")
end)


function MainScene:ctor()




    -- cc.ui.UILabel.new({
    --         UILabelType = 2, text = "Hello, World", size = 64})
    --     :align(display.CENTER, display.cx, display.cy)
    --     :addTo(self)




    -- self:LabelDemo();
     self:UIPushButtonDemo();
    --self:UISliderDemo();
    --self:EditBoxDemo();
    --self:UICheckBoxButtonDemo();
    --self:UICheckBoxButtonGroupDemo();
    --self:UIPageViewDemo();
   -- addTo(target) 对应的是config.lua中的shortcodes  
   --self:listViewDemo();
   --self:ScrollViewDemo()


end
--标签
function MainScene:LabelDemo()
   local label = cc.ui.UILabel.new({
   UILabelType = 2, -- 系统的字体
   text = "Helloworld",
   font = "Menlo",
    size = 64 , 
    color = cc.c4b(0,255,0,255)
   })
label:align(display.CENTER_TOP, display.cx, display.cy+100);
self:addChild(label)




local label1 = cc.ui.UILabel.new({ 


 UILabelType = 1,-- 1使用的是字体文件
 text = "美好的一天",
 font = "meihao.fnt";


})
label1:setColor(cc.c3b(255, 0, 0))
label1:setString("美好的一天")
label1:align(display.CENTER, display.cx, display.cy)
self:addChild(label1)
  
end


--按钮
function MainScene:UIPushButtonDemo()
local pushbutton = cc.ui.UIPushButton.new();
pushbutton:setButtonImage( cc.ui.UIPushButton.NORMAL, "Button01.png",true)  --正常的图片
--ignoreEmpty and image == nil then return end 


  pushbutton:setButtonImage( cc.ui.UIPushButton.PRESSED, "Button01Pressed.png",true) --点击显示的图片
  pushbutton:setButtonImage( cc.ui.UIPushButton.DISABLED, "Button01Disabled.png",true)


  pushbutton:addNodeEventListener(cc.NODE_TOUCH_EVENT, function ( event )
  print(event.name) --点击的状态  begin  moved ended 
  print(event.x)-- 点击的位置
  print(event.y)
  return false;
  end)
  --pushbutton:setButtonEnabled(false)-- 不可以触摸
  pushbutton:setPosition(240,160);
  local label = cc.ui.UILabel.new({
  UILabelType = 2,
  text = "Hello world",
  font = "Menlo",
  size = 20,
  color = cc.c4b(0,255,0,255);


  })-- 红 绿 蓝  透明度
  pushbutton:setButtonLabel(cc.ui.UIPushButton.NORMAL, label);   --button 添加文字


  pushbutton:setButtonLabelOffset(0, -100);-- 
  self:addChild(pushbutton)


end


function MainScene:UISliderDemo( )
  local slider = cc.ui.UISlider.new(display.LEFT_TO_RIGHT,
  {


    bar = "SliderBarFixedV.png",
    button = "SliderButton.png"
    })
  slider:onSliderValueChanged(function (event )
    print(event.value); --滑块的值
  end)--添加事件


  --slider:setSliderButtonRotation(90) --旋转90°
  slider:setSliderValue(25);
  slider:align(display.CENTER_LEFT, display.cx, display.cy);
  slider:setSliderSize(20, 120);
  self:addChild(slider);
  
end


function MainScene:EditBoxDemo()
  --文本框
  local function onExit()
    print(editbox:getText()) --获取输入的文本
    if event == "began" then
      print("began write")
    elseif event == "changed" then
      print("changed")
      elseif event == "ended" then
        print("ended")
        elseif event == "return" then
          print("return")
        end
  end
  local editbox = cc.ui.UIInput.new({
      image = "bar.png",  --背景图片
      listener = onEdit,
      size = cc.size(200, 30),
      font = "Menlo",
      fontSize = 60




    })
  editbox:setPosition(display.cx,display.cy-100)
  --editbox:setInputFlag(0)  --密码


  editbox:setPlaceHolder("please"); --提示文字
  editbox:setPlaceholderFontName("Menlo");
  editbox:setPlaceholderFontSize(20);


  --editbox:setMaxLength(1); --设置最多输入的个数


editbox:setFontName("Menlo");
editbox:setFontSize(10);


  editbox:setFontColor(cc.c3b(255,0,0))
 -- editbox:setColor(cc.cc.c3b(255, 0, 0))
--设置背景颜色
self:addChild(editbox);
  
end
--[[
1.查找错误位置，机器显示行数，否则执行2
2. 分段注销，进行查找错误具体的位置


--]]
function  MainScene:UICheckBoxButtonDemo(  )
  --ChecBox 
  local images =  -- switch
  {
    off = "CheckBoxButtonOn.png",
    off_disableed =  "CheckBoxButtonOffDisable.png",
    of_pressed = "CheckBoxButtonOffPressed.png",
    on = "CheckBoxButtonOn.png",
    on_disabled = "ChecBoxButtonOnDisable.png",
    on_pressed = "CheckBoxButtonOnPressed.png"


}


local checkButton = cc.ui.UICheckBoxButton.new(images);
checkButton:setButtonLabel(cc.ui.UILabel.new({
    text = "",
    size = 22,
    color = cc.c3b(255,96,255)


  }))
checkButton:setButtonLabelOffset(0, -40)
checkButton:setButtonLabelAlignment(display.CENTER);
checkButton:onButtonStateChanged(function ( event )
  local checkbox = event.target -- event  target   is checkboxButton
 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))--修改button中的label的字符串


end)
checkButton:align(display.LEFT_CENTER, display.left +40, display.top-80);
self:addChild(checkButton);
end


function MainScene:UICheckBoxButtonGroupDemo(  )
  local  group = cc.ui.UICheckBoxButtonGroup.new(display.TOP_TO_BOTTOM);  --方向
  local images = 
  {
    off = "CheckBoxButtonOn.png",
    off_disableed =  "CheckBoxButtonOffDisable.png",
    of_pressed = "CheckBoxButtonOffPressed.png",
    on = "CheckBoxButtonOn.png",
    on_disabled = "ChecBoxButtonOnDisable.png",
    on_pressed = "CheckBoxButtonOnPressed.png"




}
for i = 1,4  do
  local checkboxButton = cc.ui.UICheckBoxButton.new(images);
  text = ""
  checkboxButton:setButtonLabel(cc.ui.UILabel.new({text = text, color = cc.c3b(255, 0, 0)}))
  checkboxButton:setButtonLabelOffset(20, 0);
  group:addButton(checkboxButton);


end
group:onButtonSelectChanged(function ( event )
  printf("Option %d selected, Option %d unselected",event.selected,event.last);


  --  当前选择的序号 之前选择的序号  
end)
group:align(display.LEFT_TOP, display.left+40, display.top-240);
group:getButtonAtIndex(2):setButtonSelected(true); -- 
group:removeButtonAtIndex(2);
self:addChild(group);


end
function MainScene:UIPageViewDemo(  )
  -- local pv 
self.pv = cc.ui.UIPageView.new({
  viewRect = cc.rect(50,50,600,300),--窗口的大小和位置
  column = 3,--
  row = 3, --行列数
--   padding = {
--   left = 12,right = 45,top = 78, bottom = 67
-- }--四周留得空白
--rowSpace = 23; -- 行列的间距


 })
self:addChild(self.pv);
for i = 1,18 do
  local item =  self.pv:newItem() -- Node 
  local  sprite = display.newSprite("bar.png");
  --sprite:setColor(cc.cc.c3b(255, 0, 255));
  item:addChild(sprite);
  self.pv:addItem(item);
  --removeItem(item);
end
self.pv:reload();
self.pv:gotoPage(1)  --显示那一页  从1开始
print(self.pv:getCurPageIdx())  --获得当前页的编号
end




function MainScene:listViewDemo(  )
  
  --创建listView
  self.lv = cc.ui.UIListView.new{


 -- bgColor = cc.c4b(255,0,0,255)  --背景颜色
 bg = "sunset.png",
 bgScale9 = true,
 viewRect = cc.rect(40,80,120,400),


 direction = cc.ui.UIScrollView.DIRECTION_VERTICAL, -- 方向


 scrollbarImgV = "sunset.png"
-- scrollbarImgh = ""




}
self.lv:addTo(self);  --self:addChild(self.lv)
-- add items 
for i = 1,20 do
  local item = self.lv:newItem(); -- Node 
  item:setItemSize(120, 40)
  local sprite = display.newSprite("sunset.png");
  item:addContent(sprite);
  self.lv:addItem(item);


  end 
  self.lv:reload();


end


function MainScene:ScrollViewDemo(  )
  local sp1 = display.newScale9Sprite("RedBlock.png");
  sp1:setContentSize(100,100);
  sp1:setAnchorPoint(0,0);
  sp1:pos(0, 600)


  local sp2 = display.newScale9Sprite("bar.png");
  sp2:setContentSize(100,100);
  sp2:setAnchorPoint(0,0);
  sp2:pos(100, 600)
local emptyNode = cc.Node:create();
emptyNode:addChild(sp1)
emptyNode:addChild(sp2);


local  bound = sp2:getBoundingBox(); -- 窗口的大小
bound.width = 100;
bound.height = 100;


local scroll = cc.ui.UIScrollView.new({
  viewRect = bound;


  })-- 窗口的大小
scroll:addScrollNode(emptyNode);--设置显示内容
scroll:setDirection(cc.ui.UIScrollView.DIRECTION_HORIZONTAL) -- 设置滚动方向
scroll:onScroll(function ( event )
  -- event.name -- 滚动的状态  began moved ended 
  -- event.x
  -- event.y -- 
end)
scroll:addTo(self)






end






function MainScene:onEnter()
end


function MainScene:onExit()
end


return MainScene