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

来源：互联网发布：淘宝联盟21号不能提现编辑：程序博客网时间：2024/05/20 00:48

昨日状态不佳，今天续写昨日简单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单纯使用意义来说还是挺简单的，更多的一些对图片素材需求。

0 0