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主要用于列表内容的展示,大概也就是展示展示图片,文字,最多再加上按钮。我想应该能够满足大多数开发者的普通要求了。

但是,如果你打算在CocosStudio中做出一个放置好布局的Item,然后在IDE中获取之后,clone,然后修改其中一些小细节,就可以一生百,百生千。额,那你就想简单了。你可以尝试一下,在CocosStudio中,你对一个Item制作好布局之后,导入IDE之后是乱的!!!并不是你在CocosStudio中设置好的布局。也不知道是不是我操作姿势不对,反正我不行,如果你行,期待着你分享你布局的正确姿势。这个如果是Bug的话,也希望官网尽早修复吧。

相对来说,ScrollView就开放多了,随便你怎么拖,都可以。无论什么控件,我都可以接受。

二、最后的说明

其实,ListView中貌似是可以添加自定义控件的,但是据一位网友反映,貌似只能在代码中自定义,而且要继承Widget,这样操作之后,貌似SelectedItem会判断不了,还要自己进行判断,由于具体没有操作,也就不太明了了。

由于本系列教程主要介绍在CocosStudio中制作完控件之后,在IDE中如何获取。而ListView貌似不能在CocosStudio中进行相应的详细设计,只能在代码中实现,所以,我们在这里就不贴代码了。而ScrollView的功能几乎在CocosStudio设计中就可以实现了,几乎不需要代码进行进一步设计。我们在这里也不详细介绍了。

后期,如果觉得如何在代码中制作ListView和操作ScrollView有必要的话,我们再单独拿出一篇来详细讲讲如何操作的问题。

时间: 2024-12-23 13:00:07

Cocos2d-JS中使用CocosStudio资源——ListView和ScrollView的相关文章

Cocos2d-JS中使用CocosStudio资源——关卡选择界面

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的关卡选择界面资源的例子,来简要介绍以下内容:Button控件,Text控件,PageView控件,即翻页容器的使用. 一.CocosStudio准备 第一步:从官网下载相应的示例,LevelSelection.效果图如下: 第二步:修改其中的一些控件的名称,方便寻找获取,如: 由于官网给的例子中的控件名字有的较复杂,所以可以按照自己的想法进行修改. 第三步:发布资源.注意发布设置中应该将数据格式改为JSON格式

Cocos2d-JS中使用CocosStudio资源——帧动画(1)

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的帧动画资源的例子,来简要介绍以下内容:利用ActionTimeLine进行动画切割,如何使用导出的帧动画资源.关于帧动画,由于内容繁杂.我们将分为两篇进行介绍.本篇将主要介绍资源的准备工作,下一篇将主要介绍资源的使用问题. 不得不说: 按照原来的进度安排,帧动画和骨骼动画我准备最后介绍.但是,看到好多朋友非常期待动画的讲解,于是就修改了一下计划.其实,关于帧动画,前几天就大体研究明白了,这几天一直围绕着一个"坑

Cocos2d-JS中使用CocosStudio资源——设置界面

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的设置界面资源的例子,来简要介绍以下内容:Slider控件的使用. 一.CocosStudio准备 第一步:从官网下载相应的示例,setting.效果图如下: 第二步:修改其中的一些控件的名称,方便寻找获取,如: 将Music那个滑动条的控件名字改为musicSlider,从而方便查找. 类似的修改还可以有:Continue按钮,Sound滑动条等. 第三步:发布资源.注意发布设置中应该将数据格式改为JSON格式

Cocos2d-JS中使用CocosStudio资源——帧动画(2)

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的帧动画资源的例子,来简要介绍以下内容:利用ActionTimeLine进行动画切割,如何使用导出的帧动画资源.关于帧动画,由于内容繁杂.我们将分为两篇进行介绍.在上一篇中,我们已经做好了前期的资源准备和CocosCodeIDE中的简单处理,本篇将主要介绍资源的使用问题. 一.使用CocosStudio资源 做好了前期的准备工作,终于到我们的重头戏(FrameAnimationScene.js)了,下面,我们将要

Cocos2d-JS中使用CocosStudio资源——序

Cocos2d官网上对于Cocos2d-JS和CocosStudio的教程有很多,但是对于如何将二者连接起来的教程却很少,至于如何在Cocos2d-JS中使用从CocosStudio导出的资源方面的教程就更少得可怜.也应博友的要求,我最近会写一个系列的教程,都是关于如何在Cocos2d-JS中使用从CocosStudio导出的资源方面的,希望大家关注.在这篇博客中,我会简单介绍一下学习的准备工作.我们会从简单的按钮,输入框开始,一直到帧动画,地图等的使用.如果你准备好了,那就跟我一起来吧. 一.

cocos2d JS 中的数组拼接与排序

1 var arrA = [];//创建三个局部变量的新数组 2 var arrB = []; 3 var arrC = []; 4 var newCards = this.MyMahjong;//创建一个新的局部变量等于一个全局变量的数组:并把里面的内容依次拆开再全部拼接 5 for(var t=0;t<newCards.length;t++){ 6 var char = newCards[t].charAt(0); 7 if(char == "a"){ 8 arrA.push

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>    <servlet-name&g

SpringMVC中css,js,图片等静态资源被拦截的解决办法

一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xml和SpringMVC配置文件中的配置 方法一: web.xml中的配置: SpringMVC配置文件中的配置: 方法二: web.xml中的配置: 与之对应的SpringMVC配置文件中不用特别配置 方法三: web.xml中的配置: 或者 与之对应的SpringMVC配置文件中不用再添加特殊配置