1 UI之widget
Align Mode 选则ONCE时，Widget生效时对齐一次，选择ALWAYS时，当parent运动时，一直对齐。
widget参与动画时：
动画组件更改Top的值，此时选择Align Mode 选则ALWAYS。
2 UI之label:
文本对齐，对Horizontal Align和Vertical Align的参数进行调整，Horizontal Align的选择项有LEFT,CENTER,RIGHT,Vertical Align的选择项有TOP，CENTER,BOTTOM.
文字效果,自带的outLine 和Shadow
LabelAttributes脚本是实现label上文字大小，颜色 ，对齐，行高， 影响和溢出效果的脚本组件。用ts写的。
LoadLongText 脚本是加载文字比较长的字符串 ，同样用ts写的。
3 UI之Button:
脚本ButtonTransition是改变Button的按钮状态变换时的过度类型
cc.Class({
extends: cc.Component,
properties: {
btn: cc.Button,
},
onInteractable (event) {
this.btn.interactable = event.isChecked;//控制btn按钮是否能点击
},//绑定交互的toggle
onColorTransition (event) {
this.btn.transition = cc.Button.Transition.COLOR;//绑定颜色的
},
onSpriteTransition (event) {
this.btn.transition = cc.Button.Transition.SPRITE;
},
onScaleTransition (event) {
this.btn.transition = cc.Button.Transition.SCALE;
},
});
SimpleButtonCtrl脚本是点击了左边按钮就提示左边button被点击，同理右侧按钮点击提示右边button被点击。
4 UI之progressbar进度条
各种进度条形式， progressBar.progress控制进度条的值；
5 UI之listView
const i18n = require('i18n');
cc.Class({
extends: cc.Component,
properties: {
label: {
default: null,
type: cc.Label
},//
tmplID: 0,
itemID: 0,
},
onLoad: function () {
this.node.on('touchend', function () {
console.log("Item " + this.itemID + ' clicked');//打印
}, this);
},
initItem: function (tmplID, itemID) {
this.tmplID = tmplID;
this.itemID = itemID;
this.label.textKey = i18n.t("cases/02_ui/05_scrollView/Item.js.1") + this.tmplID + ' Item#' + this.itemID;//每个按钮初始化显示
},
updateItem: function(itemID) {
this.itemID = itemID;
this.label.textKey = i18n.t("cases/02_ui/05_scrollView/Item.js.1") + this.tmplID + ' Item#' + this.itemID;//更新
},
});
往下拉拉到低看到多了10个，其实是把最顶端的10个移动到了底部，代码里Updata里部分
cc.Class({
extends: cc.Component,
properties: {
itemTemplate: { // item template to instantiate other items这里作为预制件用
default: null,
type: cc.Node
},
scrollView: {
default: null,
type: cc.ScrollView
},
spawnCount: 0, // how many items we actually spawn
totalCount: 0, // how many items we need for the whole list
spacing: 0, // space between each item
bufferZone: 0, // when item is away from bufferZone, we relocate it
lblScrollEvent: cc.Label,
btnAddItem: cc.Button,
btnRemoveItem: cc.Button,
btnJumpToPosition: cc.Button,
lblJumpPosition: cc.Label,
lblTotalItems: cc.Label,
},
// use this for initialization
onLoad: function () {
this.content = this.scrollView.content;
this.items = []; // array to store spawned items
this.initialize();
this.updateTimer = 0;
this.updateInterval = 0.2;
this.lastContentPosY = 0; // use this variable to detect if we are scrolling up or down
},
//初始化
initialize: function () {
this.content.height = this.totalCount * (this.itemTemplate.height + this.spacing) + this.spacing; // get total content height取得高度
for (let i = 0; i < this.spawnCount; ++i) { // spawn items, we only need to do this once
let item = cc.instantiate(this.itemTemplate);//实例化
this.content.addChild(item);
item.setPosition(0, -item.height * (0.5 + i) - this.spacing * (i + 1));
item.getComponent('Item').initItem(i, i);
cc.log("Item",i,i);
this.items.push(item);//存放
}
cc.log("content",this.spawnCount);
},
getPositionInView: function (item) { // get item position in scrollview's node space
let worldPos = item.parent.convertToWorldSpaceAR(item.position);
let viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos);//坐标转化
return viewPos;
},
update: function(dt) {
this.updateTimer += dt;
if (this.updateTimer < this.updateInterval) return; // we don't need to do the math every frame
this.updateTimer = 0;
let items = this.items;
let buffer = this.bufferZone;
let isDown = this.scrollView.content.y < this.lastContentPosY; // scrolling direction
let offset = (this.itemTemplate.height + this.spacing) * items.length;
for (let i = 0; i < items.length; ++i) {
let viewPos = this.getPositionInView(items[i]);
if (isDown) {
// if away from buffer zone and not reaching top of content
if (viewPos.y < -buffer && items[i].y + offset < 0) {
items[i].y = items[i].y + offset;//更改y值
let item = items[i].getComponent('Item');
let itemId = item.itemID - items.length; // update item id
item.updateItem(itemId);
cc.log("isDown"+itemId);
}
} else {
// if away from buffer zone and not reaching bottom of content
if (viewPos.y > buffer && items[i].y - offset > -this.content.height) {
items[i].y = items[i].y - offset;
let item = items[i].getComponent('Item');
let itemId = item.itemID + items.length;
item.updateItem(itemId);
cc.log(itemId);
}
}
}
// update lastContentPosY
this.lastContentPosY = this.scrollView.content.y;
this.lblTotalItems.textKey = "Total Items: " + this.totalCount;
},
scrollEvent: function(sender, event) {
switch(event) {
case 0:
this.lblScrollEvent.string = "Scroll to Top";
break;
case 1:
this.lblScrollEvent.string = "Scroll to Bottom";
break;
case 2:
this.lblScrollEvent.string = "Scroll to Left";
break;
case 3:
this.lblScrollEvent.string = "Scroll to Right";
break;
case 4:
this.lblScrollEvent.string = "Scrolling";
break;
case 5:
this.lblScrollEvent.string = "Bounce Top";
break;
case 6:
this.lblScrollEvent.string = "Bounce bottom";
break;
case 7:
this.lblScrollEvent.string = "Bounce left";
break;
case 8:
this.lblScrollEvent.string = "Bounce right";
break;
case 9:
this.lblScrollEvent.string = "Auto scroll ended";
break;
}
},
//totalCount加1
addItem: function() {
this.content.height = (this.totalCount + 1) * (this.itemTemplate.height + this.spacing) + this.spacing; // get total content height
this.totalCount = this.totalCount + 1;
},
//totalCount减1
removeItem: function() {
if (this.totalCount - 1 < 30) {
cc.error("can't remove item less than 30!");
return;
}
this.content.height = (this.totalCount - 1) * (this.itemTemplate.height + this.spacing) + this.spacing; // get total content height
this.totalCount = this.totalCount - 1;
this.moveBottomItemToTop();//移动item从底部到顶部
},
moveBottomItemToTop () {
let offset = (this.itemTemplate.height + this.spacing) * this.items.length;
let length = this.items.length;
let item = this.getItemAtBottom();
// whether need to move to top
if (item.y + offset < 0) {
item.y = item.y + offset;
let itemComp = item.getComponent('Item');
let itemId = itemComp.itemID - length;
itemComp.updateItem(itemId);
}
},
getItemAtBottom () {
let item = this.items[0];
for (let i = 1; i < this.items.length; ++i) {
if (item.y > this.items[i].y) {
item = this.items[i];
}
}
return item;
},
scrollToFixedPosition: function () {
this.scrollView.scrollToOffset(cc.v2(0, 500), 2);
}
});
