如何调整纵向和横向模式的屏幕，以便可以看到所有UI元素？

Question

我不知道如何根据不同的屏幕大小调整UI元素。我观察到的一些答案是，我应该保持设置为屏幕大小的比例，匹配宽度或高度，匹配滑块为0.5。我保留了这些设置（参见第一幅图）。但它并没有随着屏幕大小的不同而改变。

我在父元素（Showdata）中尝试了纵横比fitter，但没有用。我应该如何根据不同的屏幕大小更改屏幕？是因为我没有以正确的方式锚定UI元素吗？你将如何锚定这样的东西（画布）

我看过很多教程，介绍了如何对图像和按钮使用锚点，以及如何对嵌套元素使用锚点，或者当我们使用垂直或水平布局并且它包含许多UI元素时如何使用锚点。

Answer 1

以下是一个简短的提示列表，从最紧急到最不紧急：

• 将画布缩放设置为恒定的物理大小。在iPhone X设备上，缩放系数为3倍。在这里找到其他物理尺度因素。这样做的目的是使画布的布局坐标对应于设备点，同时以设备的本机分辨率渲染。这是你痛苦的最紧急来源。
• 对于全屏对应的RectTransform组件，将其锚设置为（0,0），（1,1），即填充父节点。播放Top，right等属性。但似乎你已经知道了。
• 垂直/水平布局组的子元素应该有一个LayoutElement，并且通常应该在非滚动轴上具有固定的大小，也就是说，现在不要在行上使用ContentSizeFitter，让它工作对于固定的高度。无论如何，这几乎总是移动设备上的正确行为。
• 实验LayoutElement的Ignore Layout标志。
• 在纹理上正确设置每单位像素设置。
• 在移动设备上，您将错过诸如切口和角落斜面等问题。使用Unity 2019.2及更早版本的NotchSolution和2019.3及以上版本的新设备模拟器来可视化和适应这些问题。
• 使用循环滚动视图组件，如优化滚动视图适配器。这也将包括关于如何布局的深思熟虑的教程。如果您需要内容适合循环滚动视图中的高度元素，您将需要此资产。
• 要根据屏幕布局触发更改，请使用OnRectTransformDimensionsChanged（）。没有别的，不要检查屏幕中的更改！一般来说，您应该熟悉EventSystem。
• 熟悉各种设备的纵横比，并使用Camera.main.aspect在这些纵横比的手动调整布局之间正确切换。iOS有4个。

下面是平台画布缩放器的示例：

using UnityEngine;
using UnityEngine.EventSystems;
#if UNITY_IPHONE
using UnityEngine.iOS;
#endif
using UnityEngine.UI;

namespace StackOverflow
{
    [ExecuteInEditMode]
    public sealed class PlatformCanvasScaler : UIBehaviour
    {
        public static PlatformCanvasScaler instance { get; private set; }


        public float scaleFactor
        {
            get
            {
                if (m_CanvasScaler != null)
                {
                    return m_CanvasScaler.scaleFactor;
                }

                return 1.0f;
            }
        }

        [SerializeField] private CanvasScaler m_CanvasScaler;
        [SerializeField] private float m_PhoneScaleFactor = 1.15f;

        private PlatformCanvasScaler()
        {
            instance = this;
        }

        protected override void Awake()
        {
            base.Awake();

            if (!enabled)
            {
                return;
            }

            Refresh();
        }

        private void Refresh()
        {
            var scaleFactor = 1f;
            var isMobile = PlatformCanvasScaler.isMobile;
            if (isMobile)
            {
#if UNITY_IPHONE
                switch (Device.generation)
                {
                    case DeviceGeneration.iPhoneX:
                    case DeviceGeneration.iPhoneXSMax:
                    case DeviceGeneration.Unknown:
                    case DeviceGeneration.iPadUnknown:
                    case DeviceGeneration.iPodTouchUnknown:
                        scaleFactor = 3f;
                        break;
                    case DeviceGeneration.iPhone5:
                    case DeviceGeneration.iPhoneSE1Gen:
                    case DeviceGeneration.iPhone5C:
                    case DeviceGeneration.iPhone5S:
                    case DeviceGeneration.iPhone6:
                    case DeviceGeneration.iPhone6S:
                    case DeviceGeneration.iPhone7:
                    case DeviceGeneration.iPhone8:
                    case DeviceGeneration.iPhoneXR:
                    case DeviceGeneration.iPhoneUnknown:
                        scaleFactor = 2f;
                        break;
                    case DeviceGeneration.iPhone6Plus:
                    case DeviceGeneration.iPhone7Plus:
                    case DeviceGeneration.iPhone8Plus:
                    case DeviceGeneration.iPhone6SPlus:
                        scaleFactor = 3f / 1.15f;
                        break;
                    case DeviceGeneration.iPhone:
                    case DeviceGeneration.iPhone3G:
                    case DeviceGeneration.iPhone3GS:
                    case DeviceGeneration.iPad1Gen:
                    case DeviceGeneration.iPad2Gen:
                    case DeviceGeneration.iPad3Gen:
                        scaleFactor = 1f;
                        break;
                    default:
                        scaleFactor = 2f;
                        break;
                }

                scaleFactor *= m_PhoneScaleFactor;
#else
                scaleFactor = 2f * Screen.dpi / 326f;
#endif
            }
            else
            {
                if (Screen.dpi > 140)
                {
                    scaleFactor = 2.0f;
                }
                else
                {
                    scaleFactor = 1.0f;
                }
            }

            m_CanvasScaler.scaleFactor = scaleFactor;
        }

        public static bool isMobile
        {
            get
            {
                var isPhone = false;
#if UNITY_IPHONE
                isPhone = true;
#endif
                var isMobile = Application.platform == RuntimePlatform.IPhonePlayer ||
                               (Application.isEditor && isPhone);
                return isMobile;
            }
        }

#if UNITY_EDITOR
        private void OnValidate()
        {
            Refresh();
        }
#endif

        // Update is called once per frame
        private void Update()
        {
        }
    }
}

观察我做了一些关于什么被认为是HiDPI设备的决定。

不幸的是，我最喜欢的屏幕管理UI资产，MaterialUI，已被弃用。希望有人能评论他们与他人的经历。