关闭

Cocos2d-x 3.0 开发(十四)使用UIScrollView 实现大小不同物品拖动展示

标签: cocos2d-x 3.0Cocos2d-xCocoStudiococos2dxUIScrollView
19217人阅读 评论(6) 收藏 举报
分类:

1、概述


    UI部分一直是cocos2d-x的弱项,而这种境况在3.0版本中将得到改善。让我们从一个曾经的坑入手,来看看这些新特性。

    大家都知道,有个这样一个坑叫做CCTableView。它的作用是来创建一个可拖动的view,来进行展示。但它有的问题是只能创建等宽等高的一组元素,这就出现问题了。比如一个聊天下拉框,总不能限制人说话的长度吧….. 所以它的存在聊胜于无,不断被吐槽。让我们看看新版中这个问题是如何处理的,先上个图:





2、创建ScrollView


    打开CocoStudio的UI编辑器,创建一个新工程,在画布列表中将名字更为:“ScrollView”

   然后在侧边栏中找到“滚动层”,拖动到编辑界面上。调整区域的大小,在属性->尺寸和模式进行调整。注意不要直接拖动边框,那样只会改变缩放比 -_- b





    然后在滚动层中拖入子button,并设置它们的基本属性:名称点击图片之类的。创建部分有不明白的童鞋可以看先前的: Cocos2d-x 3.0 开发(四)使用CocoStudio创建UI并载入到程序中 

    创建了一堆控件:




3、设置ScrollView属性


    选中ScroView在它的属性中做如下配置:




    我们注意到,其中重要的参数有两个。

    滑动方向我们可以设置:水平、竖直、两种都有。这里我们选择水平。区域宽度是可滑动区域的大小,如果不更改默认是与View区域等大,这时是不能滑动的。我们将其更改为1000,会发现在先前的区域外有增大的一部分。

    接下来我们在增大的区域中添加我们需要的物品。另外有个细节,就是我们将滑动区域边缘的物体调成有一部分超出界限,这样就会给用户可拖动的暗示。




    最后记得勾选模拟裁切,否则的话,View扩展区域的东西是会显示出来的。

    保存工程,导出我们的文件。

 

4、加载到程序

    运行脚本新建一个程序:testScrollView。

    添加库依赖,忘记添加方法的同学可以参照:Cocos2d-x 3.0 开发(十一)3.0 alpha1文件结构变化

    更改Init方法:

 

bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Point origin = Director::getInstance()->getVisibleOrigin();

    auto widget = dynamic_cast<gui::UILayout*>(cocostudio::GUIReader::shareReader()->widgetFromJsonFile("ScrollView.json"));
    auto layer = gui::UILayer::create();
    layer->addWidget(widget);
    this->addChild(layer);
    return true;
}

    编译运行。

 

5、总结


    通过UIScrollView我们可以轻松的实现拖动展示的功能。在编辑器中将其摆放好、导出、加载到程序即可。PS:我怎么感觉导出的文件加载后有些偏啊?是我的错觉么⊙﹏⊙b


 Demo下载:http://download.csdn.net/detail/fansongy/6704997


本篇博客出自阿修罗道,转载请注明出处,禁止用于商业用途:http://blog.csdn.net/fansongy/article/details/17287285 



5
0
查看评论

quick cocos2dx 2.2.5Plus中无解的问题

quick cocos2dx中使用cocostudio布局,然后再使用了其中的UIScrollView,在UIScrollView中又有按钮的话,杯具就会发生了。 现象: 当uiScrollView中的Item超过可视范围以后,被裁剪掉的部分的button是可以被点击的,而且绑定按钮的接口 o...
  • nynyvkhhiiii
  • nynyvkhhiiii
  • 2015-01-17 10:29
  • 926

quick-cocos2d-x UIScrollView使用

ScrollView控件经常被使用,比如说明,帮助等等 quick-cocos2d-x中的使用较为
  • nynyvkhhiiii
  • nynyvkhhiiii
  • 2014-11-20 14:41
  • 3795

Cocos2d-x 3.0 开发(十四)使用UIScrollView 实现大小不同物品拖动展示

  • 2013-12-12 19:19
  • 1.49MB
  • 下载

cocos2d 2.0中使用UIScrollView卡的解决办法

目前的解决办法是在CCDirectorDisplayLink 的startAnimation 方法中  在calculateDeltaTime 方法中  //[displayLink_ addToRunLoop:[NSRunLoop curre...
  • love_hot_girl
  • love_hot_girl
  • 2012-08-03 02:58
  • 617

quick-cocos2d-x踩坑记

转自:https://segmentfault.com/a/1190000002676766 原文请猛戳: http://galoisplusplus.gitcafe.io/blog/2015/01/04/quick-cocos2d-x-pitfa... 本渣最近一个月来开...
  • GrimRaider
  • GrimRaider
  • 2016-06-19 23:47
  • 544

quick-cocos2dx-luaUI控件讲解

quick-cocos2dx中,使用lua
  • In_Zihuatanejo
  • In_Zihuatanejo
  • 2015-10-28 13:31
  • 1132

UIScrollView上的控件处理touch事件

http://blog.csdn.net/ztp800201/article/details/7973036 http://blog.sina.com.cn/s/blog_7daf0a5f0100ttw7.html pagingEnabled 当值是YES,会自动滚动到subview的边界,默认...
  • jeffasd
  • jeffasd
  • 2016-03-26 09:36
  • 843

cocosStudio中使用PageView,ListView和ScrollView

晚上吃东西好像吃坏肚子了,。但是技术还要继续研究。最近工作中要使用CocosStudio做界面,好吧,不管对他有什么偏见,学习一下吧。这里主要记录一下三个控件的使用和说明。就是ScrollView,ListView和PageView。 首先大致的介绍一下这三个控件吧,scrollView顾名思义,...
  • shi_weihappy
  • shi_weihappy
  • 2015-01-12 00:11
  • 4417

cocoStudio:ScrollView控件使用记录

cocoStudio中ScrollView控件使用: 原由: 在cocoStudio工具中使用scrollView控件时,默认情况下滚动区域和控件大小相同, 但是我们实际添加的内容有可能比控件大,也有可能比控件小,那怎么处理这种 情况呢? 试验方式: 1、通过getInner...
  • tianxiawuzhei
  • tianxiawuzhei
  • 2015-05-15 16:10
  • 5052

cocoStudio:ScrollView控件使用记录(2)

cocoStudio:ScrollView控件使用记录(2) 在上一篇文章中已经分析了使用ScrollView的一些问题,那么这一篇提供一些解决方案: 1、 默认情况下scrollView的滚动区域大小和scrollView的大小(可视区域)相同, 我们可以通过getInnerConta...
  • tianxiawuzhei
  • tianxiawuzhei
  • 2015-05-15 18:18
  • 4407
    个人资料
    • 访问:2220085次
    • 积分:17932
    • 等级:
    • 排名:第626名
    • 原创:226篇
    • 转载:19篇
    • 译文:1篇
    • 评论:693条
    关于

    左手代码右手艺术 追求新浪潮。


    个人网站:blog.songyang.net


    开源项目:


    UIAP : Unity3D内购插件

    UExtend : Unity3D常用功能合集


    微信公众号:松阳论道



    微博:

    我写的书:


    实例妙解Cocos2d-x游戏开发
    博客专栏
    文章分类
    最新评论