Cocostudio學習筆記（6） ScrollView+ ListView+ PageView，cocostudio

Cocostudio學習筆記（6） ScrollView+ ListView+ PageView，cocostudio

這篇記錄了三個控制項的使用流程：ScrollView和 ListView、PageView。

----------------------------------------------------------------------------------------------------------------------------

ScrollView

---------------------------------------------------------------------------------------------------------------------------

ScrollView這個控制項大家應該挺熟的吧，反正我是經常用到。
1、首先在cocostudio 的UI介面添加一個ScrollView的控制項，然後設定其屬性。ScrollView要設定的東西比較多，我一開始做了如下的設定：
a 設定scrollView的顯示視窗大小（Size）為：300x300；
b 設定scrollView的容器層大小（ContentSize）為 300x300；
c 開啟BounceBack，也就是當scrollView拖到邊緣時有一種彈性的效果
d 設定name 為 scrollView
e 往scollView中添加三個ImageView控制項，其中兩個放在scrollView顯示視窗內，另外一個放在scrollView的顯示視窗下方
e 匯出工程到cocos2dx項目的Resources目錄中

2、在cocos2dx中載入ScrollView的Widget，代碼如下：

Widget* scrollViewUi = GUIReader::getInstance()->widgetFromJsonFile("ScrollViewUI/ScrollViewUi_1.json");this->addChild(scrollViewUi,2);

調試發現，scrollView的widget已經添加進了情境，但是想拖動scrollView卻無法拖動，這也就看不到放在scrollView上的最下方的ImageView控制項。
回到Cocostudio中看下之前ScrollView的屬性設定，發現 容器層的大小不應該設定成與顯示視窗一樣，而應該比它大，這樣才能拖動scrollView，於是修改第一點的第 b 步：
b 設定scrollView的容器層大小（ContentSize）為 300x400；
重新匯出cocostudio工程，並運行cocos2dx項目，拖動成功。

3、從scrollView的Widget中提取ScrollView。天真的我又到TestCpp中尋找了下UIScrollView的控制項名，結果啥都沒看到，包括之後的ListView，PageView都是如此。最後我恍然大悟， 說到底scrollView這類控制項其實就是一個Layout嘛，所以他們都統一用Layout來載入就可以了。

auto layout = static_cast<Layout*>(Helper::seekWidgetByName(scrollViewUi,"scrollView"));layout->setPosition(Point(300,300));

4、ScrollView控制項在cocostudio中的預設方向是豎直的，如果要改變為方向可以將Scroll Director中修改。

5、關於layout的源碼我打算在PageView與ListView寫完後再一起講，那應該是一個比較大的模組。

----------------------------------------------------------------------------------------------------------------------------

ListView

---------------------------------------------------------------------------------------------------------------------------

ListView這貨說到底就像tableView，但個人感覺比tableView好用一點，因為，我基本沒使用過tableView，如果你讓我在cocos2dx用tableView實現某個UI，我肯定要花費點時間要瞭解下tableView的使用方法，原因就在於我認為只要用scrollView就可以實現tableView的所有功能了。

-------------
扯遠了，進入ListView的主題中來：
建立一個cocostudio工程，命名為ListViewUI，然後拉一個ListView的控制項到情境中，之後設定它的屬性，設定方法和ScrollView還是有一定的出入，如下：
1、我先設定ListView的顯示視窗大小（Size）為300x300；

2、設定name 為 ”ListView“；

3、選中ListView，右鍵--addObject，往ListView中添加一個ImageView控制項。發現新添加的ImageView控制項預設的位置在ListView的左上方，並且ImageView控制項中的一個 紅色的”+“號告訴我是不能設定這個控制項的基本屬性的，也就無法挪動它的位置。我又嘗試添加了個CheckBox控制項，發現它預設的位置在之前的ImageView控制項的右邊，同時它也無法修改屬性。這個情況讓我始料不及，於是我又到屬性欄裡找原因，最終發現原因出在”child Control Layout“這一類的屬性裡，它的作用是自動給ListView中的控制項排列位置，包括排列方向，控制項間的距離等。還是比較好理解的，所以我沒有啦。嘿嘿。

4、在ListView中不一定要設定容器層的大小，因為當你添加控制項到ListView中，如果控制項所處的座標已經超出了ListView的顯示視窗範圍，那麼ListView會自動調整容器層的大小。

5、個人感覺ListView還是蠻方便的，特別是對我這種之前一直將ScrollView當tableView用的人來說，簡直就是福音啊！！！

6、在cocos2dx載入ListView控制項，如下：

Widget* ListViewUi = GUIReader::getInstance()->widgetFromJsonFile("ListViewUi_1/ListViewUi_1.json");this->addChild(ListViewUi,2);

7、單獨提取出ListView控制項

auto layout = static_cast<Layout*>(Helper::seekWidgetByName(ListViewUi,"ListView"));layout->setPosition(Point(300,300));

8、就醬紫吧。沒什麼好補充的了。

----------------------------------------------------------------------------------------------------------------------------

PageView

---------------------------------------------------------------------------------------------------------------------------

終於看到PageView這貨了，其實它也就是ScrollView的特別版。scrollView拖動多少介面就挪動多少，PageView拖一點介面就直接翻頁了，真刺激。
------------------------
下面看下PageView該從哪裡搞起...過程還是蠻糾結的
1、首先往cocostudio情境中拖入一個PageView控制項，然後選中控制項，右鍵，在彈出的菜單中選擇"add Child page",之後就會出現一個新的頁面。這時候不要停，用同樣的方式繼續添加一個頁面。將滑鼠在編輯器的其他位置隨便點擊一下，之後再選中剛剛的PageView控制項，發現已經沒有“add Chid page”這個菜單了。可是如果我要再加好幾個頁面該怎麼辦呢？答案很簡單，同時按“ctrl + z”，撤銷之前的操作，直到回到PageView剛拖進情境時的狀態，然後你可以繼續添加頁面了（我知道方法很挫。。）；

2、改變cocostudio的頁面大小。這個和上面那一步很像，你必須在PageView控制項最初始的狀態下才能改變它的Size，如果你已經添加了好幾個頁面，那麼將無法改變它的Size；

3、往PageView中添加控制項。這個就和ScrollView、ListView一樣了，右鍵--add Object。

4、匯出該cocostudio工程到cocos2dx項目的資來源目錄下。然後在cocos2dx中載入該cocostudio的widget：

cocos2d::ui::Widget* pageViewUi = GUIReader::getInstance()->widgetFromJsonFile("PageView/pageViewUi_01.json");this->addChild(pageViewUi,2);

就醬紫吧。

尊重原創，轉載請註明來源：http://blog.csdn.net/star530/article/details/37371211