最近的项目要实现一个类似web端响应式布局的效果,想了一下,只能通过修改整体ui的scale来实现:Content是一个image,这里充当一个容器,需要根据需求设置好锚点和中心点,会根据父物体的宽高适配,父物体上挂载一个脚本,当自身大小发生变化时计算Content应适配的大小换算为scale值:
上代码:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class UniformScaleUIContainer: MonoBehaviour
{
/// <summary>
/// 自身的RectTransform组件
/// </summary>
public RectTransform selfRectTransform;
/// <summary>
/// 适配内容的RectTransform组件
/// </summary>
public RectTransform contentRectTransform;
/// <summary>
/// 标准宽高
/// </summary>
private Vector2 contentReferenceResolution;
/// <summary>
/// 高宽比
/// </summary>
private float aspectRatio;
/// <summary>
/// 是否初始化结束
/// </summary>
private bool isInitOver;
private void Awake()
{
contentReferenceResolution = contentRectTransform.rect.size;
//计算标准高宽比
aspectRatio = contentRectTransform.rect.height / contentRectTransform.rect.width;
isInitOver = true;
}
private void OnRectTransformDimensionsChange()
{
RefreshContent();
}
private void RefreshContent ()
{
if (!isInitOver) return;
//计算自身当前的高宽比
float selfAspectRatio = selfRectTransform.rect.height / selfRectTransform.rect.width;
float scaleValue = 1;
//适配标准高宽比
if (selfAspectRatio > aspectRatio)
{
scaleValue = selfRectTransform.rect.width * aspectRatio / contentReferenceResolution.y;
} else if (selfAspectRatio < aspectRatio)
{
scaleValue = selfRectTransform.rect.height / aspectRatio / contentReferenceResolution.x;
}
//计算内容scale
contentRectTransform.localScale = new Vector3(scaleValue, scaleValue, scaleValue);
}
}