COCOS學習筆記--滑動條Slider及其控件屬性

一.Slider介紹

Slider就是滑動條。遊戲中我們經常會用到這一控件，我們可以通過滑動條這一控件來人爲控制某些數值的範圍變化，比如控制遊戲的音量大小、界面的顏色亮度等。

Slider也和cocos提供的其他控件一樣，我們可以在Cocos Studio中創建並設置相關屬性，在代碼工程中使用；也可以之間在代碼工程中創建使用。Slider類提供了對滑動條的相關方法，其繼承自Widget類：

 

接下來就通過實例來看下Slider滑動條具體是如何創建和使用的：

二．通過CocosStudio創建Slider控件

第一步：用Cocos引擎創建一個空的項目並用Cocos Studio打開；

第二步：創建一個Panel基礎容器，這個基礎容器用於放置我們的Slider控件；

第三步：我們想要創建一個CheckBox控件，讓其父節點爲剛剛創建的Panel基礎容器；

以上的控件創建直接從左面的控件欄選擇一個控件拖入到當前編輯的界面中即可。

我們可以在Slider控件的屬性欄中設置其相關屬性。比如背景樣式和節點樣式，以及默認滑動進度等：

 

第四步：在Cocos Studio中創建完Slider控件後，我們需要保存併發布項目，具體步驟在我之前的博客中有介紹。

之後用VS打開我們剛剛創建的項目並運行，就可以看到我們在Cocos Studio中場景上創建的Slider控件了：

 

三.通過代碼直接創建Slider控件

除了使用Cocos Studio創建出來的Slider控件外，我們也可以通過create()方法直接在代碼中創建Slider使用，並且可以設置其相關屬性：

使用該類前別忘了添加命名空間：

using namespace cocos2d::ui; 

接下來就可以創建Slider並且設置其相關屬性了：

//通過create()方法創建slider   
auto _newSlider = Slider::create();

//設置slider背景圖片
_newSlider->loadBarTexture("Slider_Background.png");

//設置slider進度圖片
_newSlider->loadProgressBarTexture("Slider_Progress.png");

//設置slider滑動按鈕圖片
//參數：1. 正常狀態下的紋理貼圖2.被選中狀態下的紋理貼圖3.禁用狀態下的紋理貼圖
_newSlider->loadSlidBallTextures("Slider_Ball_Normal.png","Slider_Ball_Pressed.png","Slider_Ball_Disabled.png");

//設置slider的進度（範圍：0~100）
_newSlider->setPercent(80);

//獲得slider的進度
int percent = _newSlider->getPercent(80);

//設置slider的位置      
_newSlider->setPosition(Vec2(200, 200));

addChild(_newSlider);

四.爲Slider添加回調函數

Slider具有交互性，我們可以爲其綁定回調函數：

1.首先要聲明並實現回調函數：

//聲明Slider回調函數  
void sliderCallback(cocos2d::Ref * ref, cocos2d::ui::Slider::EventType type);

//實現Slider回調函數  
void HelloWorld::sliderCallback(cocos2d::Ref * ref, Slider::EventType type)
{
	switch (type)
	{
		case cocos2d::ui::Slider::EventType::ON_PERCENTAGE_CHANGED:
		{
			int percent = _slider->getPercent();
			log("slider percent = %d", percent);
		}
			break;
		default:
			break;
	}
}

其回調函數有一個Slider::EventType類型的參數，其值爲ON_PERCENTAGE_CHANGED，也就是說當滑動條進度改變時會傳來該事件類型。

2.通過Panel獲得Slider並對其綁定回調函數：

//獲得基礎容器panel層  
auto _panel = (Layout *)rootNode->getChildByName("Panel_1");

//通過panel獲得slider  
_slider = (Slider*)Helper::seekWidgetByName(_panel, "Slider_1");

//綁定回調函數  
_slider->addEventListener(CC_CALLBACK_2(HelloWorld::sliderCallback, this));

運行程序，當我們拖動滑動條時便會看到滑動條進度改變的打印輸出：

以上。