多语言文本控件重叠解决方案

多语言文本控件重叠解决方案

1. 文本控件重叠问题分析
2. 文本控件重叠解决方案制定
3. 在cocostudio编辑中做好前期基础准备工作
4. 使用UIHelper.bindUIWidget自动化绑定UI布局
5. 视图自动化排序的实现：SortViewGroup
6. 关于特殊的重叠情况的处理方案

1. 文本控件重叠问题分析

1.1动态变化的文本内容导致重叠

在UI视图中，有部分文本控件的内容是动态变化的，如图1-1

1-1

如图是遇怪界面的布局，共三个文本控件，“敌袭警报！前方有”是一个文本控件，“大海盗”是一个文本控件，“出没，准备迎战！”是一个文本控件，其中“大海盗”文本控件的内容是动态，另外两个文本控件的内容是固定的，如果在游戏中动态设置文本内容则会出现如图1-2的情况

1-2

1.2多语言切换导致重叠

切换语言时卸载UI布局，加载新的语言布局，其中的文本内容会根据语言的选定进行对应的替换，此时的问题理论上可以等同于动态变化文本内容导致重叠，如图1-3

1-3

1.3问题分析总结

从以上例子来看，导致重叠的原因主要是新的文本内容比原先的文本内容的长度要长，而其他控件没有进行位置更新，导致两个控件显示的内容叠加在一起。若是新的文本内容比原先的文本内容的长度短，则不会出现重叠的现象，但从界面上看起来控件与控件之间的间隔不相同，看起来不和谐。

1. 文本控件重叠解决方案制定

控件重叠的原因是文本内容变化而控件位置没有对应更新导致，那么在对需要设置新的文本内容的控件设置新的文本内容后，对对应相关的控件的位置根据一定的策略进行更新，就可以解决重叠问题。

3.在cocostudio编辑中做好前期基础准备工作

在cocostudio编辑器中编辑界面时，使用Panel容器将需要排序的控件放到Panel中，如图1-4

1-4

Panel容器的命名格式为：xxx_，即以名称加下划线的格式，如lifeSortViewGroup_

需要注意的是需要排序的控件的x坐标在编辑器中不能相同，如图1-4中的“生命”控件和“#100”控件的x坐标不能相同，代码上处理会根据x坐标从小到大来确定控件的排序顺序。另外Panel容器的背景颜色属性和交互性属性两个属性可以不用编辑，代码上会处理这些属性。

编辑步骤（供参考）：在布局上添加一个Panel容器，修改命名，将锚点修改为0，0.5，将高度设置为跟文本控件的高度一样，将Panel的位置设置成第一个需要排序的控件的位置一样，将需要排序的控件移到Panel节点下，将需要排序的控件的x坐标减去Panel的x坐标，设置新的x属性，将y坐标的类型设置为相对于父容器的百分比，设置为50%。

例子：以图1-4中的“生命”和“#100”为例，添加Panel容器，命名为lifeSortViewGroup_，将Panel的锚点设置为0，0.5，将坐标位置设置成跟“生命”控件的位置一样，将“生命”控件和“#100”控件移到Panel节点下，将“生命”控件的x坐标减去Panel的x坐标，得到的值设置为x坐标的新值，将“生命”控件的y类型改为相对于父容器的百分比，设置为50%，“#100”控件同样的操作。

4.使用UIHelper.bindUIWidget自动化绑定UI布局

UIHelper中提供了bindUIWidget函数用于自动化绑定UI布局，主要做了四部分的处理，包括：

1. 绑定命名前缀为下划线的控件到对象中;
2. 绑定控件事件;
3. 更新文本控件ContentSize大小;
4. 生成SortViewGroup及排序函数;

在cocostudio编辑器中已经将需要排序的控件放到Panel容器中，在bindUIWidget处理过程中会以Panel生成一个SortViewGroup方式生成多个SortViewGroup并存储到_sortViewGroupList中，同时会生成一个命名为sortViewGroups的函数，并将sortViewGroupList，sortViewGroups和生成的SortViewGroup绑定到对象中，代码于UIHelper中的_handleSortViewGroup。

如无其他需求，如控件与控件之间的间隔，居中排序等等需求，则在设置完文本内容后调用sortViewGroups函数便可对控件进行位置更新。如有其他需求，可直接使用绑定好的SortViewGroup对象，如object._shipCountSortViewGroup进行设置。

排序效果，如图1-5（未排序前的视图），如图1-6（排序后的视图）

1-5

1-6

1. 视图自动化排序的实现：SortViewGroup

SortViewGroup封装了排序策略及排序功能，代码在gui/common/SortViewGroup.js中，其内部维护了一个需要排序的控件列表，提供了从左往右排和从右往左排两种模式，可设置控件之间的间隔以及以指定点为中心点排序，支持总体控件位置偏移及设置位置，其排序原理如图1-7：

1-7

控件的位置由前一个控件的位置，大小和间隔可以计算出来，如从左往右排序，则view2的位置由view1的位置加上宽加上间隔可以计算出来，view3的位置由view2的位置，宽，间隔可以计算出来，以此类推可以计算出所有控件的位置，当更新完文本控件的文本内容后再以此方式计算更新位置，即可解决重叠问题。

特别的，有些情况我们希望能够以某个点为基准排序，如图1-8

1-8

希望排序的控件以200为基准居中排序，那么调用SortViewGroup中的setMidX(200)将基准设置为200，调用sort时会处理成以200为基准排序的效果。

6.关于特殊的重叠情况的处理方案

有些情况会出现两个SortViewGroup之间重叠的情况，如图1-9红色框部分

1-9

图1-9中左上方的内容重叠，其中Owned vessels:1 ship是一个SortViewGroup（sortViewGroup1），Drawings:3 photos是一个SortViewGroup（sortViewGroup2），希望的效果是sortViewGroup2在sortViewGroup1后的20个像素的位置，那么可以通过以下代码实现：

var sortViewGroup1RightX = sortViewGroup1.getRightX();

sortViewGroup2.setX(sortViewGroup1RightX + 20);

最终效果如1-10

1-10

Github地址：https://github.com/malloyz/sortViewGroupTest.git