代码拉取完成,页面将自动刷新
在日常开发,难免会遇到超长的名字或者文本,有做过Android开发或者Ios开发的同学会觉得很简单,只要设置一下一个属性,固定一个宽度,超过这个宽度直接以省略号结尾
Android TextView的ellipsize属性可以直接加省略号,用法如下:
在xml中
<!-- 省略号在结尾 -->
Android:ellipsize = "end"
<!-- 省略号在开头 -->
android:ellipsize = "start"
<!-- 省略号在中间 -->
android:ellipsize = "middle"
<!-- 跑马灯 -->
android:ellipsize = "marquee"
<!-- 最好加一个约束 -->
android:singleline = "true"
也可以直接用代码设置
tv.setEllipsize(TextUtils.TruncateAt.valueOf("END"));
tv.setEllipsize(TextUtils.TruncateAt.valueOf("START"));
tv.setEllipsize(TextUtils.TruncateAt.valueOf("MIDDLE"));
tv.setEllipsize(TextUtils.TruncateAt.valueOf("MARQUEE"));
textView.setEllipsize(TruncateAt.END);
//最好再加一个约束
tv.setSingleLine(true);
Ios UILabel的lineBreakMode属性也有类似的功能
label.lineBreakMode =NSLineBreakByCharWrapping;//其中lineBreakMode可选值为
linBreakMode enum{
//保留整个单词,以空格为边界
NSLineBreakByWordWrapping = 0,
//保留整个字符
NSLineBreakByCharWrapping,
//以边界为止
NSLineBreakByClipping,
//省略开头,以省略号代替
NSLineBreakByTruncatingHead,
//省略结尾,以省略号代替
NSLineBreakByTruncatingTail,
//省略中间,以省略号代替
NSLineBreakByTruncatingMiddle
}
Wrap Text关闭的情况,超出Content Size的部分将不会显示,这样会让人感觉很突兀,以为内容旧这么长;
Wrap Text开启的情况,会自动换行,如果纵向高度不够时,会发现上下行会被切掉
Wrap Text关闭的情况,文字长度超过边界时,文字就自动缩放,如果文字太长,会缩放到你看不清楚文字
Wrap Text开启的情况,会自动换行,不过高度不变,因此也会被自动缩放
文字不会自动缩放,不过会自动换行,换行后,高度会重新结算刷新,排版只有一行的情况就不适合了
很显然,cc.Label没有像安卓的TextView的ellipsize属性或者ios的UILabel的lineBreakMode属性,不过我们可以扩展cc.Label,来实现这个功能
先来看下要实现的功能
代码实现如下:
const { ccclass, property } = cc._decorator;
/**固定类型 */
enum LabelFixedType {
//默认值 不作处理
NONE,
//固定宽度
WIDTH,
//固定字节长度 英文1个字节,中文(标点符号)2个字节
BYTE,
}
/**扩展 cc.Label 新增固定宽度属性 */
@ccclass
export default class LabelPlus extends cc.Label {
//固定类型
@property({ type: cc.Enum(LabelFixedType), serializable: true, displayName: "文本固定类型", tooltip: "WIDTH固定宽度\nBYTE固定字节 长度 英文1个字节,中文(标点符号)2个字节 " })
fixedType: LabelFixedType = LabelFixedType.NONE;
//固定值 width宽度 byte字节数
@property({ serializable: true, displayName: "文本固定值" })
fixedValue: number = 10;
//超出长度的替换值 123456 123...
@property({ serializable: true, displayName: "文本超出替换值 ...", tooltip: "超出长度的替换值 123456 123..." })
fixedString: string = "...";
private aLabel: string = "";
public oldLabel: string = "";
private isRefresh: boolean;
private set _string(label: string) {
this.aLabel = label;
this.refreshView();
}
private get _string(): string {
return this.aLabel
}
private refreshView(): void {
if (this.isRefresh || !this.node) {
return;
}
this.isRefresh = true;
let str = this.oldLabel = this.aLabel;
let len;
switch (this.fixedType) {
case LabelFixedType.WIDTH:
//最小值
if (this.fixedValue < this.fontSize) {
this.fixedValue = this.fontSize;
}
this['_forceUpdateRenderData']();
len = this.node.width;
len > this.fixedValue && this.labelWidth(str);
break;
case LabelFixedType.BYTE:
//最小值
if (this.fixedValue < 2) {
this.fixedValue = 2;
}
len = this.getLabelByteLength(str);
len > this.fixedValue && this.labelByte(str);
break;
}
this.isRefresh = false;
}
/**文本宽度计算 */
private labelWidth(label: string): void {
let len = label.length - 1;
let str: string;
for (var i = len; i > 0; i--) {
str = label.substring(0, i);
this.string = str;
this['_forceUpdateRenderData']();
if (this.node.width < this.fixedValue) {
this.string = str + this.fixedString;
return;
}
}
}
/**文本字节计算 */
private labelByte(label: string): void {
let len = label.length - 1;
let str: string;
for (var i = len; i > 0; i--) {
str = label.substring(0, i);
if (this.getLabelByteLength(str) <= this.fixedValue) {
this.string = str + this.fixedString;
return;
}
}
}
/**获取字符串 字节长度 */
private getLabelByteLength(label: string, replaceStr: string = "**"): number {
return label.replace(/[^\x00-\xff]/g, replaceStr).length;
}
}
效果图如下:
执行后如图:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。