Cocos2d-JS中使用CocosStudio資源——ListView和ScrollView

Cocos2d-JS中使用CocosStudio資源——ListView和ScrollView

在本篇部落格中，我們將簡要分析一下ListView和ScrollView之間的關係，如何正確使用兩個控制項進行設計，目前CocosStudio對兩個控制項的支援狀況等。

一、ListView和ScrollView的一些思考

1. 兩者聯絡：

首先，我們要知道ListView是繼承自ScrollView的，也就是說，ListView在ScrollView的基礎上，對一些細節功能進行了細化。ScrollView有的方法，ListView都有，而ListView有的，ScrollView未必有。

官方的JS-Tests中對二者的展示也幾乎相同，都是展示了豎向和橫向滑動的列表樣式。但是，我們要知道ScrollView是可以同時實現豎向和橫向滑動的。

2. 兩者區別：

滑動方向不同：
ScrollView可以實現四個方向的滑動，但是ListView只能實現豎向或橫向滑動。

對其中陳列的控制項的監聽精度不同：
ListView往往能夠精確到某一個Item被選擇了，而ScrollView卻沒有提供這方面的便捷方案。所以，從這點也可以看出ListView更加適合用在列表資訊展示上，官網的樣本中也確實是這麼做的。而，ScrollView更加適合用在“大地圖”的展示，通過玩家視窗的移動來查看整張地圖的內容。

CocosStudio的支援程度不同：
其實，這個是很讓我驚訝的。目前來說，CocosStudio對ListView的支援並不健全，如所示：

你會發現，好多控制項都無法進行添加。雖然，這給開發人員帶來了很大不便。（希望官網早點支援更多控制項的添加啊。。。）但是，我們退一步想想。其實ListView主要用於列表內容的展示，大概也就是展示展示圖片，文字，最多再加上按鈕。我想應該能夠滿足大多數開發人員的普通要求了。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCgk8cD48c3Ryb25nPrWrysejrDwvc3Ryb25nPsjnufvE47Tyy+PU2kNvY29zU3R1ZGlv1tDX9rP20ru49rfF1sO6w7K8vta1xEl0ZW2jrMi7uvPU2klERdbQu/HIodauuvOjrGNsb25lo6zIu7rz0N64xMbk1tDSu9Cp0KHPuL3ao6y+zb/J0tTSu8n6sNmjrLDZyfrHp6Gjtu6jrMTHxOO+zc/rvPK1pcHLoaPE47/J0tSzosrU0rvPwqOs1NpDb2Nvc1N0dWRpb9bQo6zE47bU0ru49kl0ZW3Wxtf3usOyvL7W1q6686OstbzI60lERdauuvPKx8LStcSjoaOho6GyorK7ysfE49TaQ29jb3NTdHVkaW/W0Mno1sO6w7XEsry+1qGj0rKyu9aqtcDKx7K7ysfO0rLZ1/fXy8rGsru21KOst7TV/c7SsrvQ0KOsyOe5+8Tj0NCjrMbatP3XxcTjt9bP7cTjsry+1rXE1f3It9fLysahozxzdHJvbmc+1eK49sjnufvKx0J1Z7XEu7CjrNKyz6PN+7nZzfi+odTn0N64tLDJoaM8L3N0cm9uZz48L3A+DQoJPHA+z+C21MC0y7WjrFNjcm9sbFZpZXe+zb+qt8W24MHLo6zL5rHjxOPU9cO0zc+jrLa8v8nS1KGjzt7C28qyw7S/2Lz+o6zO0ra8v8nS1L3TytyhozwvcD4NCjwvYmxvY2txdW90ZT4NCjxoMiBpZD0="二最後的說明">二、最後的說明

其實，ListView中貌似是可以添加自訂控制項的，但是據一位網友反映，貌似只能在代碼中自訂，而且要繼承Widget，這樣操作之後，貌似SelectedItem會判斷不了，還要自己進行判斷，由於具體沒有操作，也就不太明了了。
由於本系列教程主要介紹在CocosStudio中製作完控制項之後，在IDE中如何擷取。而ListView貌似不能在CocosStudio中進行相應的詳細設計，只能在代碼中實現，所以，我們在這裡就不貼代碼了。而ScrollView的功能幾乎在CocosStudio設計中就可以實現了，幾乎不需要代碼進行進一步設計。我們在這裡也不詳細介紹了。
後期，如果覺得如何在代碼中製作ListView和操作ScrollView有必要的話，我們再單獨拿出一篇來詳細講講如何操作的問題。