NGUI屏幕自适应

冷不防 2022-04-11 10:45 268阅读 0赞

## 屏幕自适应 ##

NGUI可以比较方便的实现屏幕自适应，但是它的官方教程里面针对这个问题没有详细的教程，所以可能在实现的时候会走比较多的弯路。以下是我在开发过程中找到的一个比较方便的实现方法。

## 主要组件 ##

1. UIAnchor

这个是用来确定控件在屏幕中的位置，另外有一篇教程专门讲它的功能，所有不会再赘述

2. UIStretch

这个是用来做缩放的组件。老版本的NGUI是集成在UIAnchor上的。新版本的UIStretch提供了4种缩放方式：

Horizontal：只缩放水平方向

Vertical：只缩放垂直方向

Bose：缩放两个方向

[BasedOnHeight![plus.gif][]][BasedOnHeight_plus.gif]：基于高度等比缩放

然后基于这些我自己实现了一个

[BasedOnWidth![plus.gif][]][BasedOnWidth_plus.gif]：基于宽度等比缩放

代码如下：

**\[csharp\]**   [view plain][] [copy][view plain]

1.  **else** **if**(style == Style.BasedOnWidth)  
2.  \{  
3.      localScale.x = relativeSize.x \* screenWidth;  
4.      localScale.y = relativeSize.y \* screenWidth;  
5.      localScale.z = localScale.x;  
6.  \}

这段代码添加在Update方法里面。为了能将UIStretch挂在UIPanel上面不出问题，所有将Z轴也缩放了。

## 自适应流程 ##

1. 创建一个新的UI，将Anchor里面的UIAnchor调整的合适的位置，注意最好将Anchor设置为Bottom。

2. 将[Camera的Size![plus.gif][]][Camera_Size_plus.gif]调节到默认屏幕大小。比如UI是以960\*640分辨率制作的，那么将[Camera的Size![plus.gif][]][Camera_Size_plus.gif]调整到960。

3. 在Panel上面添加一个UIStretch，模式选择[BasedOnWidth![plus.gif][]][BasedOnWidth_plus.gif]。完成之后你可以看到你的[Panel的Scale![plus.gif][]][Panel_Scale_plus.gif]被修改到了当前屏幕的X方向分辨率大小。

4. 将UI控件添加到Panel上，调整位置，在Panel下的所有控件都会以X方向为标准做等比缩放来适应屏幕大小。

5. 添加一张作为背景的图，将UISprite的anchor设置为Bottom，添加之后你可以看到这个sprite可以在不同的分辨率下自适应了。

6. 以上一步添加的背景图作为参照物来摆放页面上的控件，这样不仅仅是大小，位置也同样会按照相同的模式进行等比缩放

7. 可以在第3步创建的Panel下面添加子Panel，子Panel不需要UIStretch（一般用来做Draggable Panel，否则没必要，会增加额外的Draw Call）

8. 如果某一些控件需要定位在屏幕上下左右中的某一角，可以单独给他添加一个UIAnchor，这个时候UIStretch只会缩放这个控件的大小，它的位置由他自己的UIAnchor控制了

[plus.gif]: http://enveesoft.dyndns.biz:8082/images/icons/plus.gif
[BasedOnHeight_plus.gif]: http://enveesoft.dyndns.biz:8082/pages/createpage.action?spaceKey=~daiguangda&title=BasedOnHeight&linkCreation=true&fromPageId=20906019
[BasedOnWidth_plus.gif]: http://enveesoft.dyndns.biz:8082/pages/createpage.action?spaceKey=~daiguangda&title=BasedOnWidth&linkCreation=true&fromPageId=20906019
[view plain]: http://blog.csdn.net/daiguangda/article/details/7888942#
[Camera_Size_plus.gif]: http://enveesoft.dyndns.biz:8082/pages/createpage.action?spaceKey=~daiguangda&encodedTitle=Q2FtZXJh55qEU2l6ZQ==&linkCreation=true&fromPageId=20906019
[Panel_Scale_plus.gif]: http://enveesoft.dyndns.biz:8082/pages/createpage.action?spaceKey=~daiguangda&encodedTitle=UGFuZWznmoRTY2FsZQ==&linkCreation=true&fromPageId=20906019