[Unity框架]UI框架01：屏幕适配

参考链接：

https://www.cnblogs.com/zhaolaosan/p/15259240.html

https://blog.csdn.net/linxinfa/article/details/113103369?spm=1001.2014.3001.5501

https://blog.csdn.net/hyx18775752051/article/details/107672114?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.no_search_link

https://blog.csdn.net/Vitens/article/details/111053028?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7.no_search_link

 

0.

在这篇文章的基础上进行适配：

https://www.cnblogs.com/lyh916/p/11831213.html

 

1.异形屏适配

通过PackageManager搜索并安装Device Simulator(需要unity版本2019.3以上)

通过菜单栏Window/General/Device Simulator打开

Game视图：

 iPhoneX：

 

解决思路：

调整界面根节点的anchor，使其处于安全区域内

using UnityEngine;

[DisallowMultipleComponent]
[RequireComponent(typeof(RectTransform))]
public class SafeAreaRect : MonoBehaviour
{
    private RectTransform rectTransform;
    private ScreenOrientation lastScreenOrientation;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        lastScreenOrientation = Screen.orientation;
        ChangeRect();
    }

    void Update()
    {
        if (lastScreenOrientation != Screen.orientation)
        {
            lastScreenOrientation = Screen.orientation;
            ChangeRect();
        }
        //print(Screen.safeArea);
        //print(Screen.orientation);
        //print(Application.isMobilePlatform);
        //print(Screen.width + "_" + Screen.height);
    }

    private void ChangeRect()
    {
        ScreenOrientation screenOrientation = Screen.orientation;
        Rect safeArea = Screen.safeArea;
        if (screenOrientation == ScreenOrientation.Portrait || screenOrientation == ScreenOrientation.PortraitUpsideDown) //竖屏
        {
            rectTransform.anchorMin = new Vector2(safeArea.x / Screen.width, safeArea.y / Screen.height);
            rectTransform.anchorMax = new Vector2((safeArea.x + safeArea.width) / Screen.width, (safeArea.y + safeArea.height) / Screen.height);
        }
        else //横屏
        {
            rectTransform.anchorMin = new Vector2(safeArea.x / Screen.width, safeArea.y / Screen.height);
            rectTransform.anchorMax = new Vector2((safeArea.x + safeArea.width) / Screen.width, (safeArea.y + safeArea.height) / Screen.height);
        }
    }
}

 

2.屏幕旋转

可以这样设置：

对应的代码设置：

private void Awake()
    {
        Screen.autorotateToLandscapeLeft = true;
        Screen.autorotateToLandscapeRight = true;
        Screen.autorotateToPortrait = false;
        Screen.autorotateToPortraitUpsideDown = false;
        Screen.orientation = ScreenOrientation.AutoRotation;
    }

 

3.全屏背景图适配

原则：

a.背景图要铺满整个屏幕，不要留空，不然效果不好

16:9

21:9

b.图片要按比例拉伸

 

using UnityEngine;
using UnityEngine.UI;

public class BGScaler : MonoBehaviour
{
    public RectTransform canvasRectTra;
    private RawImage rawImage;
    private RectTransform rectTra;

    void Start()
    {
        rawImage = GetComponent<RawImage>();
        rectTra = GetComponent<RectTransform>();

        Scale();
    }

#if UNITY_EDITOR
    void Update()
    {
        Scale();
    }
#endif

    public void Scale()
    {
        float canvasWidth = canvasRectTra.rect.width;
        float canvasHeight = canvasRectTra.rect.height;
        float canvasRate = canvasWidth / canvasHeight;

        float bgWidth = rawImage.texture.width;
        float bgHeight = rawImage.texture.height;
        float bgRate = bgWidth / bgHeight;

        if (bgRate > canvasRate) //为了使图片铺满整个屏幕，需要拉伸图片的高度，同时要保持图片等比例拉伸
        {
            rectTra.sizeDelta = new Vector2(canvasHeight * bgRate, canvasHeight);
        }
        else
        {
            rectTra.sizeDelta = new Vector2(canvasWidth, canvasWidth / bgRate);
        }
    }   
}

 

原理：

 

效果：