多語言文本控件重疊解決方案

文本控件重疊問題分析

文本控件重疊解決方案制定

在cocostudio編輯中做好前期基礎準備工作

使用UIHelper.bindUIWidget自動化綁定UI布局

視圖自動化排序的實現：SortViewGroup

關于特殊的重疊情況的處理方案

文本控件重疊問題分析

1.1動態變化的文本內容導致重疊

在UI視圖中，有部分文本控件的內容是動態變化的，如圖1-1

1-1

如圖是遇怪界面的布局，共三個文本控件，“敵襲警報！前方有”是一個文本控件，“大海盜”是一個文本控件，“出沒，準備迎戰！”是一個文本控件，其中“大海盜”文本控件的內容是動態，另外兩個文本控件的內容是固定的，如果在游戲中動態設置文本內容則會出現如圖1-2的情況

1-2

1.2多語言切換導致重疊

切換語言時卸載UI布局，加載新的語言布局，其中的文本內容會根據語言的選定進行對應的替換，此時的問題理論上可以等同于動態變化文本內容導致重疊，如圖1-3

1-3

1.3問題分析總結

從以上例子來看，導致重疊的原因主要是新的文本內容比原先的文本內容的長度要長，而其他控件沒有進行位置更新，導致兩個控件顯示的內容疊加在一起。若是新的文本內容比原先的文本內容的長度短，則不會出現重疊的現象，但從界面上看起來控件與控件之間的間隔不相同，看起來不和諧。

文本控件重疊解決方案制定

控件重疊的原因是文本內容變化而控件位置沒有對應更新導致，那么在對需要設置新的文本內容的控件設置新的文本內容后，對對應相關的控件的位置根據一定的策略進行更新，就可以解決重疊問題。

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布局，主要做了四部分的處理，包括：綁定命名前綴為下劃線的控件到對象中;

綁定控件事件;

更新文本控件ContentSize大小;

生成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

視圖自動化排序的實現：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

總結

以上是生活随笔為你收集整理的c 用户控件 多语言,多语言文本控件重叠解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。