Quick-Cocos2d-x UI控件之进度条（UILoadingBar）控件

在应用中，进度条通常用来展示下载、解压等比较耗时间的事务进度。而在游戏中，我们一样需要进度条，比如一个三消游戏的倒计时进度条、或一个通关分数进度条。

Quick封装的进度条控件类是UILoadingBar，源码位于framework/cc/ui/UILoadingBar.lua。

进度条控件效果图

创建

通过cc.ui.UILoadingBar.new(options)新建一个进度条。其中 options 是 table 类型，可用的参数有：

• scale9，boolean类型。是否缩放
• capInsets，cc.rect类型。缩放的区域
• image，string类型。进度条图片
• viewRect，cc.rect类型。显示区域
• percent，int类型。初始进度值，范围 0 到 100
• direction，方向，默认值从左到右。可选参数：
  • UILoadingBar.DIRECTION_LEFT_TO_RIGHT
  • UILoadingBar.DIRECTION_RIGHT_TO_LEFT

我们来看看如何创建一个进度条控件，在MainScene的ctor方法中加入下面代码：

1 2 3 4 5 6 7 8 9 10

local loadBar = cc.ui.UILoadingBar. new ({      scale9 = true ,      capInsets = cc.rect(0,0,10,10), -- scale region      image =  "loading.png" , -- loading bar image      viewRect = cc.rect(0,0,200,32), -- set loading bar rect      percent = 30, -- set loading bar percent      -- direction = DIRECTION_RIGHT_TO_LEFT      -- direction = DIRECTION_LEFT_TO_RIGHT -- default }) :addTo(self)

上面代码使用loading.png作为进度条显示图片新建了一个进度条。在新建时可以指定进度条显示图片是否进行scale9缩放，显示区域，进度条的加载方向等。

更新进度

进度条创建后，并不会自动地周期更新进度显示。所有UI控件只负责显示，逻辑层面的处理由开发者的其它模块完成。当底层模块数字更新后，需要同步更新进度条的显示，可以用下面的接口来更新UI：

1	loadBar:setPercent(percent)

percent取值范围 0 到 100。

Cocos引擎中文官网有奖征集优秀原创Cocos教程 奖品丰厚！活动地址：http://www.cocoachina.com/bbs/read.php?tid-274890.html