GUI2 进度条LoadingBar 滑块 Slider
GUI 九宫格 loadingBar slider
九宫格
九宫格是利用一张很小的图片来绘制大区域图片却不失真的技术。
绘制时会遵循下面的规则：
a. 保持4个角部分不变形
b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）
c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）
loadingBar进度条
1️⃣设置背景图片
auto sp = Scale9Sprite::create("xuetiao1.png");
sp->setPosition(480, 320);
sp->setContentSize(Size(300,50));
addChild(sp,0);
2️⃣设置进度条图片
auto loadingbar =cocos2d::ui::LoadingBar::create("xuetiao2.png");
loadingbar->setScale9Enabled(true);
loadingbar->setContentSize(Size(300,50));
loadingbar->setPercent(0); //起始设置为0（0~100）
loadingbar->setPosition(Vec2(480, 320)) ;
loadingbar->setDirection(cocos2d::ui::LoadingBar::Direction::LEFT);// 设置从左往右走
addChild(loadingbar,1,1);
3️⃣加载
schedule(CC_CALLBACK_1(UItest::loadinfBarUpdate, this), 0.1f, "loadingbarUpdate");
// 控制加载的回调函数
void UItest:: loadinfBarUpdate(float dt){
auto lb = dynamic_cast
log("ssss");
float percent = lb->getPercent()+0.5;
lb->setPercent(percent);
if (percent>=100) {
lb->setPercent(100);
unschedule("loadingbarUpdate");
}
}
#pragma mark 资源加载 // count1为设置的一个全局变量，用来记录加载了图片的数目
void UItest::loadResources(){
// 加载资源 将图片加载到纹理缓存中
auto cache = Director::getInstance()->getTextureCache();
cache->addImageAsync("0.png", CC_CALLBACK_1(UItest::loadinfBarUpdate2, this));
cache->addImageAsync("2.png", CC_CALLBACK_1(UItest::loadinfBarUpdate2, this));
cache->addImageAsync("3.png", CC_CALLBACK_1(UItest::loadinfBarUpdate2, this));
cache->addImageAsync("21.png", CC_CALLBACK_1(UItest::loadinfBarUpdate2, this));
cache->addImageAsync("bg.png", CC_CALLBACK_1(UItest::loadinfBarUpdate2, this));
cache->addImageAsync("duihao1.png", CC_CALLBACK_1(UItest::loadinfBarUpdate2, this));
}
void UItest:: loadinfBarUpdate2(Texture2D *){
count1++;
float percent = 100*count1/6;
auto lb = dynamic_cast
lb->setPercent(percent);
if (percent>=100) {
log("加载成功");
}
}
slider滑块
1️⃣设置五张图
进度条背景图，进度条图，滑块的三种状态图（正常，选中，不可选）
auto sl = cocos2d::ui::Slider::create();
sl->loadBarTexture("xuetiao1.png");// 加载背景
sl->loadProgressBarTexture("xuetiao2.png");// 加载进度条
// 加载滑块是哪个不同状态下的图
sl->loadSlidBallTextureNormal("switch-thumb.png");
sl->loadSlidBallTexturePressed("switch-on.png");
sl->loadSlidBallTextureDisabled("switch-off.png");
2️⃣添加监听
// 添加监听
sl->addEventListener(CC_CALLBACK_2(UItest::slider_callback, this));
sl->cocos2d::Node::setPosition(480, 320);
// 设置初始值为100%
sl->setPercent(100);
addChild(sl);
3️⃣重写事件监听器的回调函数
// 监听器回调函数
// sender其实就是滑块本身
void UItest::slider_callback(Ref *sender , cocos2d::ui::Slider::EventType){
auto slider = dynamic_cast
log("%d",slider->getPercent());
SimpleAudioEngine::getInstance()->setBackgroundMusicVolume(slider->getPercent()/100.0);
}