cocos2dx 3.2 学习篇之一(简单UI界面的添加（续上篇））

最新推荐文章于 2016-05-31 13:40:34 发布

星星的点点

最新推荐文章于 2016-05-31 13:40:34 发布

阅读量3.2k

点赞数

分类专栏： cocos2dx学习之路文章标签： cocos2dx text scrollview bmfont

本文链接：https://blog.csdn.net/aaa62021761/article/details/37922285

版权

cocos2dx学习之路专栏收录该内容

8 篇文章 0 订阅

订阅专栏

昨日状态不佳，今天续写昨日简单UI应用。

4.ScrollView篇

scrollview其实就是可以用手，鼠标拖动的滚动视图，比如比如我们的网页就是可以在手机上手指按住界面往上拖（当然电脑没有这个交互），我们手机上就可以看到下面的内容的。其中scrolview基本包含了三种基本类型：竖直方向（VERTICAL），水平方向(HORIZONTAL)，还有就是即有水平又有竖直的杂交体（BOTH）。不过在api手册上还有一种类型是none，我一支没明白到底这个是什么类型，在demo里面也没有涉及到，请原谅我的不求甚解，觉得我们要用到的也就上面三种基本类型了。作为技术开发人员，我们还是来看每种情况下代码如何实现吧。代码应该没什么难度，相信跟我一样的初学者在我注释下可以轻松看懂。

（1）竖直方向（VERTICAL）

 // Create the scrollview by vertical
        //代码中没有设置方向（在下个卷轴视图中会用设置方向），所以默认就是纵向的。
        ui::ScrollView* scrollView = ui::ScrollView::create();
        //设置可见区域大小
        scrollView->setSize(Size(280.0f, 150.0f));        
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                               (backgroundSize.width - scrollView->getSize().width) / 2.0f,
                               (widgetSize.height - backgroundSize.height) / 2.0f +
                               (backgroundSize.height - scrollView->getSize().height) / 2.0f));
        _uiLayer->addChild(scrollView);
        
        
        ImageView* imageView = ImageView::create("cocosui/ccicon.png");
        
        //设置容器内部总大小
        float innerWidth = scrollView->getSize().width;
        float innerHeight = scrollView->getSize().height + imageView->getSize().height;
        scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));                
        
        //下面创建要放进scrollView的东东们
        //创建一个按钮
        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
        button->setPosition(Vec2(innerWidth / 2.0f, scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));
        scrollView->addChild(button);
        //创建一个titlebutton
        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Vec2(innerWidth / 2.0f, button->getBottomBoundary() - button->getSize().height));
        scrollView->addChild(titleButton);
        //创建一个九宫格按钮
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Vec2(innerWidth / 2.0f, titleButton->getBottomBoundary() - titleButton->getSize().height));
        scrollView->addChild(button_scale9);
        //添加视图，创建已经在前面完成
        imageView->setPosition(Vec2(innerWidth / 2.0f, imageView->getSize().height / 2.0f));
        scrollView->addChild(imageView);

（2）水平方向(HORIZONTAL)

 // Create the scrollview by horizontal
        ui::ScrollView* scrollView = ui::ScrollView::create();
        //设置反弹，怎么说呢，就是滑动到顶端或者最下面了，还可以拉一点点，然后放手又弹回来这个效果
        scrollView->setBounceEnabled(true);
        //设置滑动方向
        scrollView->setDirection(ui::ScrollView::Direction::HORIZONTAL);
        scrollView->setSize(Size(280.0f, 150.0f));
        //设置卷轴内部容积大小
        scrollView->setInnerContainerSize(scrollView->getSize());
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                                    (backgroundSize.width - scrollView->getSize().width) / 2.0f,
                                    (widgetSize.height - backgroundSize.height) / 2.0f +
                                    (backgroundSize.height - scrollView->getSize().height) / 2.0f));
        _uiLayer->addChild(scrollView);
        
        ImageView* imageView = ImageView::create("cocosui/ccicon.png");
        
        
        //设置卷轴内部容积大小
        float innerWidth = scrollView->getSize().width + imageView->getSize().width;
        float innerHeight = scrollView->getSize().height;
        scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));
        
        
        //卷轴内添加物件
        Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");
        button->setPosition(Vec2(button->getSize().width / 2.0f,
                                scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));
        scrollView->addChild(button);
        
        Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");
        titleButton->setTitleText("Title Button");
        titleButton->setPosition(Vec2(button->getRightBoundary() + button->getSize().width / 2.0f,
                                    button->getBottomBoundary() - button->getSize().height / 2.0f));
        scrollView->addChild(titleButton);
        
        Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");
        button_scale9->setScale9Enabled(true);
        button_scale9->setSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
        button_scale9->setPosition(Vec2(titleButton->getRightBoundary() + titleButton->getSize().width / 2.0f,
                                       titleButton->getBottomBoundary() - titleButton->getSize().height / 2.0f));
        scrollView->addChild(button_scale9);                
                
        imageView->setPosition(Vec2(innerWidth - imageView->getSize().width / 2.0f,
                                   button_scale9->getBottomBoundary() - button_scale9->getSize().height / 2.0f));
        scrollView->addChild(imageView);

（3）即有水平又有竖直的杂交体（BOTH）

        // Create the dragpanel
        ui::ScrollView* scrollView = ui::ScrollView::create();
        //设置为横竖同时可以移动
        scrollView->setDirection(ui::ScrollView::Direction::BOTH);
        //设置卷轴视图是否可以相应触摸，这个是基类widget的方法
        scrollView->setTouchEnabled(true);
        //设置反弹，怎么说呢，就是滑动到顶端或者最下面了，还可以拉一点点，然后放手又弹回来这个效果
        scrollView->setBounceEnabled(true);
        //设置背景图片放缩时为九宫格放缩
        scrollView->setBackGroundImageScale9Enabled(true);
        scrollView->setBackGroundImage("cocosui/green_edit.png");
        scrollView->setSize(Size(210, 122.5));
        Size backgroundSize = background->getContentSize();
        scrollView->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                                    (backgroundSize.width - scrollView->getSize().width) / 2.0f,
                                    (widgetSize.height - backgroundSize.height) / 2.0f +
                                    (backgroundSize.height - scrollView->getSize().height) / 2.0f));
        ImageView* imageView = ImageView::create("Hello.png");
        scrollView->addChild(imageView);
        
        scrollView->setInnerContainerSize(imageView->getContentSize());
        Size innerSize = scrollView->getInnerContainerSize();
        imageView->setPosition(Vec2(innerSize.width / 2.0f, innerSize.height / 2.0f));
        
        _uiLayer->addChild(scrollView);

其实关于卷轴，在demo里面还有很多功能没有涉及到，比如可以直接跳跃到卷轴内顶部，最下端等等，还有拉到边界后触发事件，还有等等，大家多看看api就应该能了解了。

5.text文字篇：

文字篇个人推荐一个文章感觉写的挺不错，让我获益匪浅，基本已经知道各种文字的使用场景以及优缺点，当然作者没有提到！！！还有一些大的logo之类文字还可以用精灵图片显示嘛！（T T 我是不是一定要找点原创的东西才肯罢休...）好了废话不多少了，直接发地址：http://blog.csdn.net/fzhlee/article/details/7209176

关于CCLabelBMFont我还想说的是，之前我做过一个项目是美工丢了一些单个图片文字给你，然后让你自己去做字体文件，大部分人使用只会在BMfont里面挑选文字，还不会根据已有图片文字去创建字体文件，下面还是我看到的一篇文章，可以供大家学习，地址附上：点击打开链接

简单的ui单纯使用意义来说还是挺简单的，更多的一些对图片素材需求。