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;
}
}
操作步骤：
- 创建一个空物体，并添加一个RectTransform组件作为父容器。
- 在父容器下创建一个UI元素，如Image或Text。
- 将AspectRatioFitter组件添加到UI元素上。
- 将父容器拖拽到FitInParentExample脚本的aspectRatioFitter属性上。
- 运行游戏，观察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;
}
}
操作步骤：
- 创建一个空物体，并添加一个RectTransform组件作为父容器。
- 在父容器下创建一个UI元素，如Image或Text。
- 将AspectRatioFitter组件添加到UI元素上。
- 将父容器拖拽到EnvelopeParentExample脚本的aspectRatioFitter属性上。
- 运行游戏，观察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;
}
}
操作步骤：
- 创建一个空物体，并添加一个RectTransform组件作为父容器。
- 在父容器下创建一个UI元素，如Image或Text。
- 将AspectRatioFitter组件添加到UI元素上。
- 将父容器拖拽到DynamicAspectRatioExample脚本的aspectRatioFitter属性上。
- 创建一个Slider，并将其拖拽到DynamicAspectRatioExample脚本的slider属性上。
- 运行游戏，通过拖动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));
}
}
操作步骤：
- 创建一个空物体，并添加一个RectTransform组件作为父容器。
- 在父容器下创建一个UI元素，如Image或Text。
- 将AspectRatioFitter组件添加到UI元素上。
- 将父容器拖拽到FitInParentWithAnimationExample脚本的aspectRatioFitter属性上。
- 创建一个AnimationCurve，并将其拖拽到FitInParentWithAnimationExample脚本的animationCurve属性上。
- 设置animationDuration属性为动画的持续时间。
- 运行游戏，观察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));
}
}
操作步骤：
- 创建一个空物体，并添加一个RectTransform组件作为父容器。
- 在父容器下创建一个UI元素，如Image或Text。
- 将AspectRatioFitter组件添加到UI元素上。
- 将父容器拖拽到EnvelopeParentWithAnimationExample脚本的aspectRatioFitter属性上。
- 创建一个AnimationCurve，并将其拖拽到EnvelopeParentWithAnimationExample脚本的animationCurve属性上。
- 设置animationDuration属性为动画的持续时间。
- 运行游戏，观察UI元素是否逐渐填满父容器，并根据动画曲线进行插值。
注意事项：
- 确保父容器的RectTransform组件的宽高比例与UI元素的宽高比例一致。
5. 参考资料
- Unity官方文档：AspectRatioFitter