Unity组件大全之 Layout 组件 |（28）Aspect Ratio Fitter 宽高比适配器

📂 Unity 开发资源汇总 | 插件 | 模型 | 源码

💓 欢迎访问 Unity 打怪升级大本营

在 Unity 的 UI 系统中，Aspect Ratio Fitter 组件是一个非常实用的工具，用于根据预定的宽高比动态调整 UI 元素的尺寸。它可以确保 UI 元素在不同屏幕分辨率下保持一致的比例，避免因屏幕大小变化导致的变形问题。在处理图片、视频、图像容器等需要保持特定比例的 UI 元素时，Aspect Ratio Fitter 组件极为重要。

本文将详细介绍 Unity 中的 Aspect Ratio Fitter 组件的功能、属性，以及常见的应用场景，并通过代码示例展示如何在实际项目中使用该组件。

📂 Unity组件大全 | 目录索引

💯 Aspect Ratio Fitter 的功能

Aspect Ratio Fitter 组件的核心作用是按照给定的宽高比调整 UI 元素的尺寸。它可以根据宽度调整高度，也可以根据高度调整宽度，从而确保 UI 元素的宽高比始终固定，不会因为外部布局的变化而拉伸或压缩。

1. Aspect Mode（宽高比模式）

Aspect Ratio Fitter 的核心属性是 Aspect Mode，它定义了组件如何根据宽高比调整 UI 元素的尺寸。它有以下几种模式：

• None：不做任何宽高比调整，元素保持原始尺寸。
• Width Controls Height：根据宽度来调整高度，确保元素的宽高比保持不变。
• Height Controls Width：根据高度来调整宽度，以确保比例正确。
• Fit In Parent：在父容器内缩放元素，保持宽高比不变，同时确保元素的大小适合父容器。
• Envelope Parent：让元素包裹住父容器，保持比例，同时元素可能会超过父容器的边界。

2. Aspect Ratio（宽高比）

这个属性用于设置 UI 元素的目标宽高比。通常，宽高比是通过 宽度 / 高度 的形式表示。例如，如果想保持 16:9 的比例，则需要将 Aspect Ratio 设置为 16 / 9。

💯 常见使用场景

1. 保持图片比例

在 UI 中展示图片时，如果不希望图片因拉伸而变形，可以使用 Aspect Ratio Fitter 来保持图片的宽高比不变。例如，当一张图片在不同的设备分辨率下显示时，使用 Aspect Ratio Fitter 可以确保图片不会因为屏幕的变化而被拉伸或压缩。

using UnityEngine;
using UnityEngine.UI;

public class ImageAspectRatio : MonoBehaviour
{
    public Image image;
    public AspectRatioFitter aspectRatioFitter;

    void Start()
    {
        // 获取图片的宽高比
        float aspect = (float)image.sprite.rect.width / image.sprite.rect.height;
        
        // 设置 AspectRatioFitter 的宽高比
        aspectRatioFitter.aspectRatio = aspect;
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;
    }
}

2. 视频播放窗口

在视频播放的 UI 界面中，视频的宽高比需要根据视频源的实际比例来调整。通过使用 Aspect Ratio Fitter，可以确保视频窗口始终保持正确的比例，不管视频源的分辨率是多少。

3. 自适应的游戏画面

在一些移动游戏或跨平台游戏中，UI 元素（如游戏内的屏幕截图、图像展示）需要在不同设备分辨率下保持一致的比例。通过使用 Aspect Ratio Fitter，可以轻松实现 UI 自适应布局。

4. 缩放界面

有时，UI 需要根据设备屏幕的大小进行缩放，但同时又要保持界面的宽高比不变。Aspect Ratio Fitter 提供的 Fit In Parent 和 Envelope Parent 模式，可以根据父容器的大小自动调整 UI 元素的大小，从而实现动态缩放效果。

💯 Aspect Ratio Fitter 的应用与注意事项

1. 配合其他布局组件

在实际项目中，Aspect Ratio Fitter 常常与其他布局组件（如 Horizontal Layout Group、Vertical Layout Group 或 Content Size Fitter）配合使用。需要注意的是，Aspect Ratio Fitter 直接控制 UI 元素的宽高，可能会与其他布局组件产生冲突。为避免布局错误，通常建议先确保宽高比例正确，再使用其他布局工具对齐 UI 元素。

2. 性能影响

尽管 Aspect Ratio Fitter 提供了极大的布局便利，但在处理大量 UI 元素时，动态调整 UI 元素的宽高比可能会增加性能开销。特别是在频繁更新或动态生成的 UI 界面中，建议合理使用 Aspect Ratio Fitter，以确保游戏的运行性能。

3. 与 Canvas 配合使用

如果 UI 元素是直接放置在 Canvas 上的子对象，使用 Aspect Ratio Fitter 调整宽高比时，需要确保 Canvas 组件的 Render Mode 和 Canvas Scaler 设置正确，以避免因 Canvas 尺寸变化而导致 UI 布局问题。

💯 示例代码

下面是一个简单的代码示例，展示如何在 Unity 项目中使用 Aspect Ratio Fitter 组件动态调整图片的宽高比。

using UnityEngine;
using UnityEngine.UI;

public class AspectRatioFitterExample : MonoBehaviour
{
    public RectTransform uiElement;
    public AspectRatioFitter aspectRatioFitter;

    void Start()
    {
        // 假设我们要让这个 UI 元素的宽高比保持 16:9
        aspectRatioFitter.aspectRatio = 16.0f / 9.0f;
        aspectRatioFitter.aspectMode = AspectRatioFitter.AspectMode.FitInParent;
    }

    void Update()
    {
        // 动态更新宽高比（如果需要根据某些条件更新）
        if (SomeConditionToUpdateAspect())
        {
            aspectRatioFitter.aspectRatio = GetNewAspectRatio();
        }
    }

    bool SomeConditionToUpdateAspect()
    {
        // 示例条件函数
        return false;
    }

    float GetNewAspectRatio()
    {
        // 返回新的宽高比，例如 4:3
        return 4.0f / 3.0f;
    }
}

💯 总结

Unity 的 Aspect Ratio Fitter 组件为 UI 元素提供了自动调整宽高比的能力，确保在不同的设备和分辨率下保持视觉效果的一致性。它在图片、视频、游戏截图等需要保持比例的场景中应用广泛。通过合理搭配其他布局工具和组件，开发者可以更加灵活地设计自适应布局的 UI 界面。

在使用 Aspect Ratio Fitter 时，开发者应注意其与其他布局组件的配合使用，以及潜在的性能影响，确保 UI 布局的正确性和项目的运行效率。如果你在 Unity 项目中需要处理具有固定宽高比的 UI 元素，Aspect Ratio Fitter 无疑是一个强大的工具。

💯 参考文献

• Unity官方文档：Aspect Ratio Fitter

📂 Unity 开发资源汇总 | 插件 | 模型 | 源码

💓 欢迎访问 Unity 打怪升级大本营

🍉🍉🍉 如果觉得这篇文对你有帮助的话，请点个赞👍、收藏⭐️下吧，非常感谢! 💕💕💕

【博主简介】：10年以上软件开发经验，精通 C语言、C++、C#、Java 等开发语言，开发过大型 Android 项目，现主要自主开发经营 休闲益智类小游戏。

【粉丝福利】：博主收藏了大量游戏开发资源和素材。这些资源经过博主多年整理沉淀，现筛选一批精品资源，分享给大家学习研究。

Unity打怪军团 诚邀天下勇士加入 Unity学习互助小组 有意进群的同学联系我，互3互推也请联系我…