Unity UGUI的AspectRatioFitter（宽高比适应器）组件的介绍及使用

Unity UGUI的AspectRatioFitter（宽高比适应器）组件的介绍及使用

1. 什么是AspectRatioFitter组件？

AspectRatioFitter（宽高比适应器）是Unity UGUI中的一个组件，用于控制UI元素的宽高比例，使其能够根据父容器的大小进行自适应调整。

2. 为什么要使用AspectRatioFitter组件？

AspectRatioFitter组件可以帮助我们在不同分辨率的屏幕上保持UI元素的宽高比例，确保UI的显示效果不会因为屏幕尺寸的变化而失真或变形。

3. 如何使用AspectRatioFitter组件？

3.1 工作原理

AspectRatioFitter组件通过调整UI元素的宽高比例来适应父容器的大小。它有两种模式可供选择：Fit In Parent（适应父容器）和 Envelope Parent（包裹父容器）。

• Fit In Parent模式：UI元素会根据父容器的大小等比例缩放，以适应父容器的尺寸。如果UI元素的宽高比例与父容器的宽高比例不一致，UI元素会在父容器内留有空白区域。
• Envelope Parent模式：UI元素会根据父容器的大小等比例缩放，以填满父容器的尺寸。如果UI元素的宽高比例与父容器的宽高比例不一致，UI元素会超出父容器的范围。

3.2 常用属性

• Aspect Mode：设置AspectRatioFitter的模式，可选值为Fit In Parent和Envelope Parent。
• Aspect Ratio：设置UI元素的宽高比例。

3.3 常用函数

• SetLayoutHorizontal()：在水平方向上调整UI元素的布局。
• SetLayoutVertical()：在垂直方向上调整UI元素的布局。

4. 例子代码

4.1 适应父容器的宽高比例

using UnityEngine;
using UnityEngine.UI;

public class FitInParentExample : MonoBehaviour
{
    public AspectRatioFitter aspectRatioFitter;

    private void Start()
    {
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;
        aspectRatioFitter.aspectRatio = 16f / 9f;
    }
}

操作步骤：

1. 创建一个空物体，并添加一个RectTransform组件作为父容器。
2. 在父容器下创建一个UI元素，如Image或Text。
3. 将AspectRatioFitter组件添加到UI元素上。
4. 将父容器拖拽到FitInParentExample脚本的aspectRatioFitter属性上。
5. 运行游戏，观察UI元素的宽高比例是否适应父容器。

注意事项：

• 确保父容器的RectTransform组件的宽高比例与UI元素的宽高比例一致。

4.2 包裹父容器的宽高比例

using UnityEngine;
using UnityEngine.UI;

public class EnvelopeParentExample : MonoBehaviour
{
    public AspectRatioFitter aspectRatioFitter;

    private void Start()
    {
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.EnvelopeParent;
        aspectRatioFitter.aspectRatio = 4f / 3f;
    }
}

操作步骤：

1. 创建一个空物体，并添加一个RectTransform组件作为父容器。
2. 在父容器下创建一个UI元素，如Image或Text。
3. 将AspectRatioFitter组件添加到UI元素上。
4. 将父容器拖拽到EnvelopeParentExample脚本的aspectRatioFitter属性上。
5. 运行游戏，观察UI元素是否填满父容器，并超出父容器的范围。

注意事项：

• 确保父容器的RectTransform组件的宽高比例与UI元素的宽高比例一致。

4.3 动态调整宽高比例

using UnityEngine;
using UnityEngine.UI;

public class DynamicAspectRatioExample : MonoBehaviour
{
    public AspectRatioFitter aspectRatioFitter;
    public Slider slider;

    private void Start()
    {
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;
        slider.onValueChanged.AddListener(OnSliderValueChanged);
    }

    private void OnSliderValueChanged(float value)
    {
        aspectRatioFitter.aspectRatio = value;
    }
}

操作步骤：

1. 创建一个空物体，并添加一个RectTransform组件作为父容器。
2. 在父容器下创建一个UI元素，如Image或Text。
3. 将AspectRatioFitter组件添加到UI元素上。
4. 将父容器拖拽到DynamicAspectRatioExample脚本的aspectRatioFitter属性上。
5. 创建一个Slider，并将其拖拽到DynamicAspectRatioExample脚本的slider属性上。
6. 运行游戏，通过拖动Slider来动态调整UI元素的宽高比例。

注意事项：

• Slider的值范围应与UI元素的宽高比例一致。

4.4 适应父容器的宽高比例（带动画）

using UnityEngine;
using UnityEngine.UI;

public class FitInParentWithAnimationExample : MonoBehaviour
{
    public AspectRatioFitter aspectRatioFitter;
    public AnimationCurve animationCurve;
    public float animationDuration = 1f;

    private float targetAspectRatio = 16f / 9f;
    private float currentAspectRatio;

    private void Start()
    {
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;
        currentAspectRatio = aspectRatioFitter.aspectRatio;
    }

    private void Update()
    {
        float t = Mathf.Clamp01(Time.time / animationDuration);
        aspectRatioFitter.aspectRatio = Mathf.Lerp(currentAspectRatio, targetAspectRatio, animationCurve.Evaluate(t));
    }
}

操作步骤：

1. 创建一个空物体，并添加一个RectTransform组件作为父容器。
2. 在父容器下创建一个UI元素，如Image或Text。
3. 将AspectRatioFitter组件添加到UI元素上。
4. 将父容器拖拽到FitInParentWithAnimationExample脚本的aspectRatioFitter属性上。
5. 创建一个AnimationCurve，并将其拖拽到FitInParentWithAnimationExample脚本的animationCurve属性上。
6. 设置animationDuration属性为动画的持续时间。
7. 运行游戏，观察UI元素的宽高比例是否逐渐适应父容器，并根据动画曲线进行插值。

注意事项：

• 确保父容器的RectTransform组件的宽高比例与UI元素的宽高比例一致。

4.5 包裹父容器的宽高比例（带动画）

using UnityEngine;
using UnityEngine.UI;

public class EnvelopeParentWithAnimationExample : MonoBehaviour
{
    public AspectRatioFitter aspectRatioFitter;
    public AnimationCurve animationCurve;
    public float animationDuration = 1f;

    private float targetAspectRatio = 4f / 3f;
    private float currentAspectRatio;

    private void Start()
    {
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.EnvelopeParent;
        currentAspectRatio = aspectRatioFitter.aspectRatio;
    }

    private void Update()
    {
        float t = Mathf.Clamp01(Time.time / animationDuration);
        aspectRatioFitter.aspectRatio = Mathf.Lerp(currentAspectRatio, targetAspectRatio, animationCurve.Evaluate(t));
    }
}

操作步骤：

1. 创建一个空物体，并添加一个RectTransform组件作为父容器。
2. 在父容器下创建一个UI元素，如Image或Text。
3. 将AspectRatioFitter组件添加到UI元素上。
4. 将父容器拖拽到EnvelopeParentWithAnimationExample脚本的aspectRatioFitter属性上。
5. 创建一个AnimationCurve，并将其拖拽到EnvelopeParentWithAnimationExample脚本的animationCurve属性上。
6. 设置animationDuration属性为动画的持续时间。
7. 运行游戏，观察UI元素是否逐渐填满父容器，并根据动画曲线进行插值。

注意事项：

• 确保父容器的RectTransform组件的宽高比例与UI元素的宽高比例一致。

5. 参考资料

• Unity官方文档：AspectRatioFitter