1 UI widget
Align Mode: When ONCE is selected, the widget is aligned once when it takes effect. When ALWAYS is selected, it is always aligned when the parent moves.
When the widget participates in animation:
The animation component changes the value of Top. At this time, select Align Mode and ALWAYS.
2 UI label:
Text alignment, adjust the parameters of Horizontal Align and Vertical Align. The options for Horizontal Align are LEFT, CENTER, RIGHT, and the options for Vertical Align are TOP, CENTER, and BOTTOM.
Text effects, built-in outLine and Shadow
LabelAttributes script is a script component that implements text size, color, alignment, line height, impact and overflow effects on labels. Written in ts.
The LoadLongText script loads a relatively long text string and is also written in ts.
3 UIButton:
Script ButtonTransition is the transition type when changing the button state of 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;
},
});
The SimpleButtonCtrl script prompts the left button to be clicked when the left button is clicked, and similarly clicks the right button to prompt the right button to be clicked.
4 UI progressbar progress bar
Various progress bar forms, progressBar.progress controls the value of the progress bar;
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;//更新
},
});
Scroll down to the lowest position and you will see 10 more items. In fact, the top 10 items have been moved to the bottom. This is in the Update part of the code.
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);
}
});
