cocos2dx+lua学习笔记:UIPageView的使用

前言
本篇在讲什么

本篇简单介绍Lua篇cocos2dx中UIPageView的相关内容
仅介绍简单的应用,仅供参考

本篇适合什么

适合初学Cocos2dX的小白
适合想要在Cocos2dx-lua中使用UIPageView的人

本篇需要什么

对Lua语法有简单认知
对Cocos2dx-Lua有简单认知
Cocos2dx-Lua 3.15的开发环境

本篇的特色

具有全流程的图文教学
重实践,轻理论,快速上手
提供全流程的源码内容


★提高阅读体验★

♠ 一级标题

♥ 二级标题

♣ 三级标题

♦ 四级标题

目录

  • ♠ 简介
    • ♥ 翻页原理
  • ♠ 应用
    • ♥ 横向翻页容器
  • ♠ 常用功能
    • ♥ 插入页面
    • ♥ 删除页面
    • ♥ 自动翻页
  • ♠ 推送
  • ♠ 结语


♠ 简介

UIPageView是继承自ListView的容器,ListView又继承自ScrollView,其本质是在ScrollView基础上拓展的,可供开发者做水平或垂直方向的翻页容器


♥ 翻页原理

我们在上一章节学习了和UIScrollView相关的内容,在ScrollView中我们知道存在一个叫自动滚动的内容,如下述代码所示, PageView翻页的原理就更简单了,其实就是计算好页面的宽度或长度,翻页的时候给一个自动滚动的距离和时间

// ScrollView中的调用
void ScrollView::startAutoScrollToDestination(const Vec2& destination, float timeInSec, bool attenuated)
{
    startAutoScroll(destination - _innerContainer->getPosition(), timeInSec, attenuated);
}


// PageView中的调用
void PageView::scrollToItem(ssize_t itemIndex, float time)
{
    if (_innerContainerDoLayoutDirty) {
        this->forceDoLayout();
    }
    ListView::scrollToItem(itemIndex, Vec2::ANCHOR_MIDDLE, Vec2::ANCHOR_MIDDLE, time >= 0 ? time : _scrollTime);
}

♠ 应用

以下我们将通过几个简单的代码示例,来展示PageView的功能


♥ 横向翻页容器

我们通过以下代码创建一个横向滚动列表,效果如下所示

local pv            = ccui.PageView:create()
local size          = cc.size(500, 500)

pv:setContentSize(size)
pv:setAnchorPoint(0.5, 0.5)
pv:setDirection(ccui.PageViewDirection.HORIZONTAL)

for i=1,5 do
    local layout = ccui.Layout:create()
    local sp = cc.Sprite:create("dlrb.png")
    layout:addChild(sp)
    sp:setPosition(cc.p(250,250))
    pv:insertPage(layout, i-1)
end

pv:setPosition(640,360)
self:addChild(pv)

要点1:通过ccui.PageView:create()来创建一个翻页列表的实例

要点2:通过setContentSize来设置翻页显示区域

要点3:通过setDirection来设置翻页方向,参数有两个

  • ccui.PageViewDirection.NONE :不翻

  • ccui.PageViewDirection.HORIZONTAL :水平翻页参数

  • ccui.PageViewDirection.VERTICAL :垂直翻页参数

  • ccui.PageViewDirection.BOTH :水平垂直都能翻


♠ 常用功能

我们已经可以创建最基础的滚动列表了,面介绍几个常用的功能


♥ 插入页面

对于插入页面提供了两个接口

pv:addPage(layout)

pv:insertPage(layout, 0)

要点1:通过addPage来插入页面,页面放在最后面

要点2:通过insertPage来插入页面,可以指定页面插入的位置,从0开始

要点3:所有插入的子页必须是继承自Widget的UI组件


♥ 删除页面

pv:removePage(layout)

pv:removePageAtIndex(layout, 0)

pv:removeAllPages();

要点1:通过removePage直接删除子页

要点2:通过removePageAtIndex来根据下标删除子页

要点3:通过removeAllPages删除所有子页


♥ 自动翻页

和滚动页面类似,翻页容器提供了自动翻页的功能

pv:scrollToPage(1)

pv:scrollToPage(1, 0.5)

要点1:通过scrollToPage翻到指定页面,可以设置翻动时间

cocos2dx+lua学习笔记:UIPageView的使用_第1张图片


♠ 推送

  • Github
https://github.com/KingSun5

♠ 结语

还有不少其他额外功能,如果感兴趣,自己去扒拉一下吧,若是觉得博主的文章写的不错,不妨关注一下博主,点赞一下博文,另博主能力有限,若文中有出现什么错误的地方,欢迎各位评论指摘。

本文属于原创文章,转载请评论留言,并在转载文章头部著名作者出处

你可能感兴趣的:(Cocos2dX-lua,lua,cocos2d,学习)