UI开发核心问题-UI随屏幕自适应

野性酷女 2021-12-12 16:49 259阅读 0赞

**屏幕分辨率对UI适配的影响**

一般来说，UIRoot都会选择FixSize的缩放模式，这样可以让UI随着分辨率而自动缩放，保持和屏幕相对的大小比例不变，让UI整体看上去不会有变大变小的奇怪现象。但是，还有另一个真正严重的问题：不同屏幕的宽高比不一样。

在Unity中，不同屏幕的宽高比，一般都会以高度为基准而拉伸宽度。

切换屏幕比例模式的方法为在Game视图中的屏幕比例菜单，FreeAspect为不限长宽比，可以在其中选择想要的长宽比。

如果屏幕比例菜单中没有想要的屏幕比例，可以单击菜单最底部那个小较好按钮，会弹出一个让自定义一个新的屏幕比例模式的界面，Label选项中，可以输入一个名称来为这个自定义的屏幕比例命名。在Type中可以选择FixedResolution和Aspect Ratio两个选项，如果选择FixedResolution，可以在下面的Width&Height中输入分辨率的宽和高的具体像素；如果选择Aspect Ratio，可以在下面的Width&Height中输入分辨率的宽高比。设定好之后单击OK按钮，即可保存这个自定义的屏幕分辨率模式。

因为NGUI的UIRoot具备FixSize模式，所以，一般在进行UI随屏幕自适应时，主要着重解决的是屏幕宽高比发生变化之后的自适应。

**主流设备的屏幕分辨率**

不论是PC设备还是移动设备，屏幕分辨率一般处于4:3到16:9之间，一般来说，只需要考虑这两个值作为极限值即可。

**自适应核心组件Anchor的使用**

所谓Anchor，即为锚点，它的工作原理是它会自动地绑定摄像机的某一个点作为锚点，锚点一共有上左、上、上右、左、中、右、左下、下、右下9个点可以设定。当相机变动时，Anchor组件所在的物体位置也会跟随相机的变动而变动，并始终处于相机边界的锚点位置。

Anchor的创建方式，在Unity顶部NGUI菜单中选择Create->Anchor即可。

Anchor组件的设置：

UICamera选项自动锁定了该Anchor所在的UI的摄像机，它将会绑定这个摄像机边缘上的某一个点作为锚点。Container即为包含的物体，一般情况下无需设置，因为将物体放置于Anchor的子物体中，就可以利用“子物体跟随父物体”实现跟随Anchor的锚点。

Side一项为核心项，选择该Anchor的脑电，一共9个点，分别对应相机边缘的上左、上、上右、左、中、右、左下、下、右下。

RunOnlyOnce意为执行一次，即只在开始的时候进行一次适配，默认为勾选上，一把把不需要去修改它。

RelativeOffset，这是Anchor的相对位置偏移，百分比形式的。

PixelOffset，像素偏移，Anchor会相对于相机边缘上的锚点以像素为单位进行偏移。