南京建设网站哪家好,河南网站优化哪家好,品牌宣传网站,合肥网站建设网站推广津学院前面的文章已经介绍了Canvas 组件、UITransform 组件、Widget 组件 。 想了解的朋友#xff0c;请查看 CocosCreator3.8研究笔记#xff08;十七#xff09;CocosCreator UI组件#xff08;一#xff09;。 今天我们主要介绍CocosCreator 常用容器组件#xff1a;Layout …
前面的文章已经介绍了Canvas 组件、UITransform 组件、Widget 组件 。 想了解的朋友请查看 CocosCreator3.8研究笔记十七CocosCreator UI组件一。 今天我们主要介绍CocosCreator 常用容器组件Layout 组件 、ScrollView 组件 、PageView 组件。 一、Layout 组件 Layout 容器能够开启自动布局功能开启后自动按照规范排列所有子物体方便用户制作列表、翻页等功能。 1、Layout 属性
属性功能说明Type布局类型支持 NONE、HORIZONTAL、VERTICAL 和 GRID。ResizeMode缩放模式支持 NONE、CHILDREN 和 CONTAINER。PaddingLeft排版时子物体相对于容器左边框的距离。PaddingRight排版时子物体相对于容器右边框的距离。PaddingTop排版时子物体相对于容器上边框的距离。PaddingBottom排版时子物体相对于容器下边框的距离。SpacingX水平排版时子物体与子物体在水平方向上的间距。NONE 模式无此属性。SpacingY垂直排版时子物体与子物体在垂直方向上的间距。NONE 模式无此属性。HorizontalDirection指定水平排版时第一个子节点从容器的左边还是右边开始布局。当容器为 GRID 类型时此属性和 Start Axis 属性一起决定 Grid 布局元素的起始水平排列方向。VerticalDirection指定垂直排版时第一个子节点从容器的上面还是下面开始布局。当容器为 GRID 类型时此属性和 Start Axis 属性一起决定 Grid 布局元素的起始垂直排列方向。CellSize此属性只在 GRID 布局、Children 缩放模式时存在指定网格容器里面排版元素的大小。StartAxis此属性只在 GRID 布局时存在指定网格容器里面元素排版指定的起始方向轴。AffectedByScale子节点的缩放是否影响布局。AutoAlignment自动对齐在 Type 类型为 HORIZONTAL 或 VERTICAL 模式下保证另外一个轴向值始终为 0。Constraint布局约束可以在某个方向上约束排列数量支持 NONE、FIXED_ROW 和 FIXED_COL。ConstraintNum布局约束值在 Constraint 的类型为 FIXED_ROW 或 FIXED_COL 模式下有效。 1、Layout Type 说明
Layout 组件默认布局类型是 NONE通过修改 属性检查器 里的 Type 切换容器排列类型。
类型分为HORIZONTAL水平、VERTICAL垂直以及 GRID网格布局。
如图 2、Layout ResizeMode 模式 设置为 NONE 时子物体和容器的大小变化互不影响。 设置为 CONTAINER 时容器的大小会随着子物体的大小变化。 所有的排列都是根据容器大小进行计算的如果需要固定排序可以将 Type 设置为 GRID然后设置 Constraint 和 ConstraintNum 来固定排序。 设置为 CHILDREN 时子物体大小会随着容器的大小而变化。 3、Constraint 模式 设置为 NONE 时自由布局。 设置为 FIXED_ROW 时固定行数搭配 ConstraintNum 使用。 设置为 FIXED_COL 时固定列数搭配 ConstraintNum 使用。 二、ScrollView 组件 ScrollView 是一种带滚动功能的容器它提供一种方式可以在有限的显示区域内浏览更多的内容。
通常 ScrollView 会与 Mask 组件配合使用同时也可以添加 ScrollBar 组件来显示浏览内容的位置。
点击 属性检查器 下面的 添加组件 按钮然后选择 UI/ScrollView 即可添加 ScrollView 组件到节点上。 1、ScrollView 属性
属性功能说明content它是一个节点引用用来创建 ScrollView 的可滚动内容通常这可能是一个包含一张巨大图片的节点。Horizontal布尔值是否允许横向滚动。Vertical布尔值是否允许纵向滚动。Inertia滚动的时候是否有加速度。Brake浮点数滚动之后的减速系数。取值范围是 0-1如果是 1 则立马停止滚动如果是 0则会一直滚动到 content 的边界。Elastic布尔值是否回弹。BounceDuration浮点数回弹所需要的时间。取值范围是 0-10。HorizontalScrollBar它是一个节点引用用来创建一个滚动条来显示 content 在水平方向上的位置。VerticalScrollBar它是一个节点引用用来创建一个滚动条来显示 content 在垂直方向上的位置ScrollEvents列表类型默认为空用户添加的每一个事件由节点引用组件名称和一个响应函数组成。CancelInnerEvents如果这个属性被设置为 true那么滚动行为会取消子节点上注册的触摸事件默认被设置为 true。 2、ScrollView 事件
ScrollView 的事件回调有两个参数第一个参数是 ScrollView 本身第二个参数是 ScrollView 的事件类型。
ScrollView 组件必须有指定的 content 节点才能起作用通过指定滚动方向和 content 节点在此方向上的长度来计算滚动时的位置信息Content 节点可以通过添加 Widget 设置自动 resize来布局。 设置主要有2种方式 构造一个 EventHandler 对象然后设置对应的 target、component、handler 和 customEventData 参数
import { _decorator, Component, ScrollView, EventHandler } from cc;
const { ccclass, property } _decorator;ccclass(test)
export class test extends Component {onLoad() {const scrollViewEventHandler new EventHandler();scrollViewEventHandler.target this.node; // 这个 node 节点是你的事件处理代码组件所属的节点scrollViewEventHandler.component test;// 这个是脚本类名scrollViewEventHandler.handler callback;scrollViewEventHandler.customEventData data;const scrollview this.node.getComponent(ScrollView);scrollview.scrollEvents.push(scrollViewEventHandler);}callback(scrollview, eventType, customEventData){// 这里 scrollview 是一个 Scrollview 组件对象实例// 这里 eventType ScrollView.EventType enum 里面的值// 这里 customEventData 参数就等于之前设置的 data}
}通过 scrollview.node.on(scroll-to-top, ...) 方式添加,同样也可以注册 scrolling、touch-up、scroll-began 等事件这些事件的回调函数的参数与 scroll-to-top 的参数一致。 注意: 这种方式注册的事件无法传递 customEventData import { _decorator, Component, ScrollView } from cc;
const { ccclass, property } _decorator;ccclass(test)
export class test extends Component {property(ScrollView)scrollview: ScrollView | null null;onLoad(){this.scrollview.node.on(scroll-to-top, this.callback, this);}callback(scrollView: ScrollView) {// 回调的参数是 ScrollView 组件}
}3、ScrollBar
ScrollBar 允许用户通过拖动滑块来滚动一张图片。
ScrollBar 一般不会单独使用它需要与 ScrollView 配合使用另外 ScrollBar 需要指定一个 Sprite 组件即属性面板里面的 Handle。
通常我们还会给 ScrollBar 指定一张背景图片用来指示整个 ScrollBar 的长度或者宽度。 ScrollBar 属性
属性功能说明HandleScrollBar 前景图片它的长度/宽度会根据 ScrollView 的 content 的大小和实际显示区域的大小来计算。Direction滚动方向目前包含水平和垂直两个方向。Enable Auto Hide是否开启自动隐藏如果开启了那么在 ScrollBar 显示后的 Auto Hide Time 时间内会自动消失。Auto Hide Time自动隐藏时间需要配合设置 Enable Auto Hide 三、PageView 组件 PageView 是一种页面视图容器。
点击 属性检查器 下面的 添加组件 按钮然后选择 UI/PageView 即可添加 PageView 组件到节点上 1、PageView 属性
属性功能说明SizeMode页面视图中每个页面大小类型目前有 Unified 和 Free 类型。Content它是一个节点引用用来创建 PageView 的可滚动内容Direction页面视图滚动方向ScrollThreshold滚动临界值默认单位百分比当拖拽超出该数值时松开会自动滚动下一页小于时则还原AutoPageTurningThreshold快速滑动翻页临界值当用户快速滑动时会根据滑动开始和结束的距离与时间计算出一个速度值该值与此临界值相比较如果大于临界值则进行自动翻页Inertia否开启滚动惯性Brake开启惯性后在用户停止触摸后滚动多快停止0 表示永不停止1 表示立刻停止Elastic布尔值是否回弹Bounce Duration浮点数回弹所需要的时间。取值范围是 0-10Indicator页面视图指示器组件PageTurningEventTiming设置 PageView、PageTurning 事件的发送时机PageEvents数组滚动视图的事件回调函数CancelInnerEvents布尔值是否在滚动行为时取消子节点上注册的触摸事件 2、PageView 事件
属性功能说明Target带有脚本组件的节点Component脚本组件名称Handler指定一个回调函数当 PageView 的事件发生的时候会调用此函数CustomEventData用户指定任意的字符串作为事件回调的最后一个参数传入 PageView 的事件回调有两个参数第一个参数是 PageView 本身第二个参数是 PageView 的事件类型。 PageView 组件必须有指定的 content 节点才能起作用content 中的每个子节点为一个单独页面且每个页面的大小为 PageView 节点的大小如果节点大小大于内容大小的话可能会导致出现滚动不完整的现象。 在 PageView 组件下有一个 view 节点对象该对象结合 ScrollThreshold 决定了当前滑动的距离是否达到可以翻页的条件操作效果分为以下两种
缓慢滑动通过拖拽视图中的页面到达指定的 ScrollThreshold 数值该数值是页面大小的百分比以后松开会自动滑动到下一页。快速滑动快速的向一个方向进行拖动自动滑倒下一页每次滑动最多只能一页。 添加回调主要有2种方式
构造一个 EventHandler 对象然后设置对应的 target、component、handler 和 customEventData 参数
import { _decorator, Component, Event, Node, PageView, EventHandler } from cc;
const { ccclass, property } _decorator;ccclass(test)
export class test extends Component {onLoad(){const pageChangedEventHandler new EventHandler();pageChangedEventHandler.target this.node; // 这个 node 节点是你的事件处理代码组件所属的节点pageChangedEventHandler.component test; // 这个是脚本类名pageChangedEventHandler.handler callback;pageChangedEventHandler.customEventData data;const page this.node.getComponent(PageView);page.clickEvents.push(pageChangedEventHandler);}callback(event: Event, customEventData: string){// 这里 event 是一个 Touch Event 对象可以通过 event.target 取到事件的发送节点const node event.target as Node;const pageview node.getComponent(PageView);console.log(customEventData);}
}通过 pageView.node.on(page-turning, ...) 方式添加 注意: 这种方式注册的事件无法传递 customEventData import { _decorator, Component, Event, Node, PageView } from cc;
const { ccclass, property } _decorator;ccclass(example)
export class example extends Component {onLoad(){this.pageView.node.on(page-turning, this.callback, this);}callback(pageView: PageView) {// 回调的参数是 pageView 组件}
}(3)、PageViewIndicator
PageViewIndicator 是可选的该组件是用来显示页面的个数和标记当前显示在哪一页。
PageViewIndicator 一般不会单独使用它需要与 PageView 配合使用可以通过相关属性来进行创建相对应页面的数量的标记当滑动到某个页面的时PageViewIndicator 就会高亮它对应的标记。 PageViewIndicator 属性
属性功能说明spriteFrame每个页面标记显示的图片direction页面标记摆放方向分别为 水平方向 和 垂直方向cellSize每个页面标记的大小spacing每个页面标记之间的边距
