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

本文链接：https://blog.csdn.net/UnityBoy/article/details/142316364

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

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

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

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

在这里插入图片描述

⭕️探索入口

华丽的分割线

📂 Unity组件大全 | 目录索引

标题1

💯 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。

标题2

💯 常见使用场景

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 元素的大小，从而实现动态缩放效果。

标题3

💯 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 布局问题。

标题4

💯 示例代码

下面是一个简单的代码示例，展示如何在 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;
    }
}

标题5

💯 总结

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

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

标题6

💯 参考文献

Unity官方文档：Aspect Ratio Fitter

TheEnd

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

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

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

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

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