UGUI屏幕适配，包括刘海屏适配

游戏开发的过程中，ui都是在设计分辨率下出效果图，开发者需要适配各种不同的屏幕分辨率；

本文介绍商业化项目中使用的屏幕适配方式，实验时ui设计分辨率为1080*1920；

1. 设置CanvasScaler：

前两个设置没什么好说的，主要是第三个选项Screen Match Mode得设置为Expand；

Expand模式会将 ui 缩小到能在屏幕中显示完所有的ui元素；

我们可将Game视图分辨率设置为1080 * 1600（窄屏），来看Shrink模式和Expand模式的效果：

Shrink模式，部分ui超出屏幕能显示的区域：

Expand模式，所有的ui元素都在屏幕显示区域内：

使用Expand模式能将所有的ui元素显示在屏幕内，但是会引出一个新的问题，即背景图片无法铺满整个屏幕，这是不能接受的，由此我们进入下一步背景图片适配；

2. Expand模式下的背景图片适配：

由于Expand模式下导致背景图片过度缩小，我们得再次修正其大小，以铺满我们整个屏幕；

我们需要添加在背景图片上添加一个脚本UIBgAdapt，放大尺寸来铺满这个屏幕：

UIBgAdapt组件请参考附件，核心为：

//设置图片铺满整个屏幕
float expandScaleFactor = Mathf.Min(screenSize.x / inst.ImageWidth, screenSize.y / inst.ImageHeight);
float shrinkScaleFactor = Mathf.Max(screenSize.x / inst.ImageWidth, screenSize.y / inst.ImageHeight);
float resetScale = shrinkScaleFactor / expandScaleFactor;   //shrinkScaleFactor为我们想要的缩放，expandScaleFactor为我们默认设置的缩放
inst.m_Transform.localScale = new Vector3(resetScale, resetScale, 1);

UGUI也给我们提供了一个组件AspectRatioFitter，使用它可以达到同样效果：

不同分辨率的适配就此结束；

3. 接下来看屏幕安全区域适配；

如果目标设备是刘海屏，则红色区域的内容不能显示出来（四个绿色的块锚住屏幕四个角）：

因此我们需要修改RectTranform的Height（如果是横屏游戏修改Width）

在GameObject上添加UISafeArea组件：

实验时在组件上勾选Is Safe Area，可看到四个绿色的方块都在安全区域内显示了；

UISafeArea组件请参考附件，核心为：

    private void applySafeArea()
    {
        if (this.isSafeArea)    //如果是刘海屏
        {
            Vector2 sizeDelta = this.m_ParentRectTransform.sizeDelta;
            //sizeDelta.x *= 0.9f;    //横屏游戏开启这个
            sizeDelta.y *= 0.9f;
            this.m_RectTransform.sizeDelta = sizeDelta;
        }
        else
        {
            Vector2 sizeDelta = this.m_ParentRectTransform.sizeDelta;
            this.m_RectTransform.sizeDelta = sizeDelta;
        }
    }