Unity UI自适应 Image自适应宽高 Text自适应宽高

最新推荐文章于 2025-03-05 20:38:43 发布

唐沢

最新推荐文章于 2025-03-05 20:38:43 发布

阅读量3.2k

点赞数 8

分类专栏： Unity插件 Unity 自制工具文章标签： unity unity3d ui

本文链接：https://blog.youkuaiyun.com/CTangZe/article/details/118211091

版权

Unity插件同时被 2 个专栏收录

43 篇文章

订阅专栏

Unity 自制工具

25 篇文章

订阅专栏

本文介绍了一种在Unity中实现UI元素自适应的解决方案，包括Image和Text组件的自适应调整，以及整个UI布局的自动调整。通过提供的C#代码示例，开发者可以轻松地使UI元素适应不同屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自适应Image与Text

为什么要写这个
因为Unity自带的自适应功能限制性太大,想自己对UI做一些事情,挂上Unity自带的自适应基本上啥都干不了.

自己写的只会在调用时进行自适应

自适应之前

在这里插入图片描述

自适应之后

在这里插入图片描述

上代码

加载出来的图片可能与Image的宽高不符,用这个代码可以解决

        /// <summary>
        /// 自适应Image,不考虑高度,如果图片比父物体要宽,图片将会自适应
        /// </summary>
        /// <param name="mImage"></param>
        /// <param name="mIsAdaptHeight">是否进行高度自适应,有滑动条可忽略</param>
        /// <param name="mSize">缩放倍数</param>
        public static void AdaptiveUIImage( this Image mImage, bool mIsAdaptHeight = false, float mSize = 0.95f)
        {
            if (mImage.type != Image.Type.Simple)
                return;
            mImage.SetNativeSize ();
            if (mImage.rectTransform.sizeDelta.x > mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.x)
            {
                float w = mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.x / mImage.rectTransform.sizeDelta.x;
                //Debug.Log ("图片宽:" + f + "%");
                mImage.rectTransform.sizeDelta = new Vector2 (mImage.rectTransform.sizeDelta.x * w, mImage.rectTransform.sizeDelta.y * w) * mSize;
            }
            if (mIsAdaptHeight)
            {
                if (mImage.rectTransform.sizeDelta.y > mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.y)
                {
                    float h = mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.y / mImage.rectTransform.sizeDelta.y;
                    //Debug.Log ("图片宽:" + f + "%");
                    mImage.rectTransform.sizeDelta = new Vector2 (mImage.rectTransform.sizeDelta.x * h, mImage.rectTransform.sizeDelta.y * h) * mSize;
                }
            }
        }

需要改变内容的Text宽高也有可能与实际的Text内容大小不符,用这个可以完美解决

        /// <summary>
        /// 自适应Text,不考虑宽度(宽度可自定义),如果txt数量过多导致显示不出来下一行,可自适应高度
        /// </summary>
        /// <param name="mText">text</param>
        public static void AdaptiveUIText( this Text mText, bool mIsAdaptWide = false, float mSize = 0.95f )
        {
            if (mIsAdaptWide)
            {
                mText.rectTransform.sizeDelta = new Vector2 (mText.transform.parent.GetComponent<RectTransform>().sizeDelta.x* mSize, mText.rectTransform.sizeDelta.y);
            }
            mText.rectTransform.sizeDelta = new Vector2 (mText.rectTransform.sizeDelta.x, mText.preferredHeight);
        }

AdaptiveUI 这个方法功能比较全,父物体下的所有UI都会自适应,可以向左向右中间对齐,可以调整UI之间的间隔距离

完整代码:

using UnityEngine;
using UnityEngine.UI;

public enum AnchorPresets
{
    TopLeft,
    TopCenter,
    TopRight,

    MiddleLeft,
    MiddleCenter,
    MiddleRight,

    BottomLeft,
    BottonCenter,
    BottomRight,
    BottomStretch,

    VertStretchLeft,
    VertStretchRight,
    VertStretchCenter,

    HorStretchTop,
    HorStretchMiddle,
    HorStretchBottom,

    StretchAll
}
public enum PivotPresets
{
    TopLeft,
    TopCenter,
    TopRight,

    MiddleLeft,
    MiddleCenter,
    MiddleRight,

    BottomLeft,
    BottomCenter,
    BottomRight,
}
public enum UILocation
{
    左,
    中,
    右
}
public static class UIUtil
{
    /// <summary>
    /// 自适应Image,不考虑高度,如果图片比父物体要宽,图片将会自适应
    /// </summary>
    /// <param name="mImage"></param>
    /// <param name="mIsAdaptHeight">是否进行高度自适应,有滑动条可忽略</param>
    /// <param name="mSize">缩放倍数</param>
    public static void AdaptiveUIImage( this Image mImage, bool mIsAdaptHeight = false, float mSize = 0.95f)
    {
        if (mImage.type != Image.Type.Simple)
            return;
        mImage.SetNativeSize ();
        if (mImage.rectTransform.sizeDelta.x > mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.x)
        {
            float w = mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.x / mImage.rectTransform.sizeDelta.x;
            //Debug.Log ("图片宽:" + f + "%");
            mImage.rectTransform.sizeDelta = new Vector2 (mImage.rectTransform.sizeDelta.x * w, mImage.rectTransform.sizeDelta.y * w) * mSize;
        }
        if (mIsAdaptHeight)
        {
            if (mImage.rectTransform.sizeDelta.y > mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.y)
            {
                float h = mImage.rectTransform.parent.GetComponent<RectTransform> ().sizeDelta.y / mImage.rectTransform.sizeDelta.y;
                //Debug.Log ("图片宽:" + f + "%");
                mImage.rectTransform.sizeDelta = new Vector2 (mImage.rectTransform.sizeDelta.x * h, mImage.rectTransform.sizeDelta.y * h) * mSize;
            }
        }
    }
    /// <summary>
    /// 自适应Text,不考虑宽度(宽度可自定义),如果txt数量过多导致显示不出来下一行,可自适应高度
    /// </summary>
    /// <param name="mText">text</param>
    public static void AdaptiveUIText( this Text mText, bool mIsAdaptWide = false, float mSize = 0.95f )
    {
        if (mIsAdaptWide)
        {
            mText.rectTransform.sizeDelta = new Vector2 (mText.transform.parent.GetComponent<RectTransform>().sizeDelta.x* mSize, mText.rectTransform.sizeDelta.y);
        }
        mText.rectTransform.sizeDelta = new Vector2 (mText.rectTransform.sizeDelta.x, mText.preferredHeight);
    }

    /// <summary>
    /// UI自适应(子物体锚点不允许为Stretch模式)
    /// </summary>
    /// <param name="mUIParent">父物体</param>
    /// <param name="mUILocation">自适应位置</param>
    /// <param name="mGap">间隔距离</param>
    /// <param name="mAlterUIParent">父物体是否跟随子物体调整大小</param>
    public static void AdaptiveUI( this RectTransform mUIParent, UILocation mUILocation = UILocation.中, float mGap = 10f, bool mAlterUIParent = true )
    {
        #region 锚点固定左上角
        foreach (RectTransform item in mUIParent)
        {
            item.SetAnchor (AnchorPresets.TopLeft);
        }
        #endregion

        RectTransform UIItem = null;
        foreach (Transform item in mUIParent.transform)
        {
            if (!item.gameObject.activeSelf)
                continue;

            #region 自适应Text与Image
            Image image = item.GetComponent<Image> ();
            Text text = item.GetComponent<Text> ();
            if (image)
                AdaptiveUIImage (image);
            if (text)
                AdaptiveUIText (text,true);
            #endregion

            if (UIItem == null)
            {
                UIItem = item.GetComponent<RectTransform> ();
                UIItem.anchoredPosition = new Vector2 (UIItem.anchoredPosition.x, ( UIItem.sizeDelta.y / -2 ));
            }
            else
            {
                float itemx = item.GetComponent<RectTransform> ().anchoredPosition.x;
                float itemy = UIItem.anchoredPosition.y - ( item.GetComponent<RectTransform> ().sizeDelta.y / 2 ) - ( UIItem.sizeDelta.y / 2 );
                item.GetComponent<RectTransform> ().anchoredPosition = new Vector2 (itemx, itemy);
                UIItem = item.GetComponent<RectTransform> ();
            }
            SetUILocation (mUIParent, item.GetComponent<RectTransform> (), mUILocation, mGap);
        }
        //设置父物体的长度
        if (mAlterUIParent)
        {
            float mUIParent_Y = ( UIItem.anchoredPosition.y * -1 ) + ( UIItem.sizeDelta.y / 2 );
            mUIParent.sizeDelta = new Vector2 (mUIParent.sizeDelta.x, mUIParent_Y + mGap);
            //mUIParent.SetPivot (PivotPresets.TopCenter);
            //mUIParent.SetAnchor ( AnchorPresets.TopLeft);
        }
    }

    static void SetUILocation( RectTransform mUIParent, RectTransform mTaggetUI, UILocation mUILocation, float mGap )
    {
        float mTaggetUI_X = 0;
        float mTaggetUI_Y = mTaggetUI.anchoredPosition.y - mGap;
        switch (mUILocation)
        {
            case UILocation.左:
                mTaggetUI_X = mTaggetUI.sizeDelta.x / 2 + mGap;
                break;
            case UILocation.中:
                mTaggetUI_X = mUIParent.sizeDelta.x / 2;
                break;
            case UILocation.右:
                mTaggetUI_X = mUIParent.sizeDelta.x - ( mTaggetUI.sizeDelta.x / 2 ) - mGap;
                break;
        }
        mTaggetUI.anchoredPosition = new Vector2 (mTaggetUI_X, mTaggetUI_Y);
    }

    public static void SetAnchor( this RectTransform source, AnchorPresets allign, int offsetX = 0, int offsetY = 0 )
    {
        source.anchoredPosition = new Vector3 (offsetX, offsetY, 0);

        switch (allign)
        {
            case ( AnchorPresets.TopLeft ):
                {
                    source.anchorMin = new Vector2 (0, 1);
                    source.anchorMax = new Vector2 (0, 1);
                    break;
                }
            case ( AnchorPresets.TopCenter ):
                {
                    source.anchorMin = new Vector2 (0.5f, 1);
                    source.anchorMax = new Vector2 (0.5f, 1);
                    break;
                }
            case ( AnchorPresets.TopRight ):
                {
                    source.anchorMin = new Vector2 (1, 1);
                    source.anchorMax = new Vector2 (1, 1);
                    break;
                }

            case ( AnchorPresets.MiddleLeft ):
                {
                    source.anchorMin = new Vector2 (0, 0.5f);
                    source.anchorMax = new Vector2 (0, 0.5f);
                    break;
                }
            case ( AnchorPresets.MiddleCenter ):
                {
                    source.anchorMin = new Vector2 (0.5f, 0.5f);
                    source.anchorMax = new Vector2 (0.5f, 0.5f);
                    break;
                }
            case ( AnchorPresets.MiddleRight ):
                {
                    source.anchorMin = new Vector2 (1, 0.5f);
                    source.anchorMax = new Vector2 (1, 0.5f);
                    break;
                }

            case ( AnchorPresets.BottomLeft ):
                {
                    source.anchorMin = new Vector2 (0, 0);
                    source.anchorMax = new Vector2 (0, 0);
                    break;
                }
            case ( AnchorPresets.BottonCenter ):
                {
                    source.anchorMin = new Vector2 (0.5f, 0);
                    source.anchorMax = new Vector2 (0.5f, 0);
                    break;
                }
            case ( AnchorPresets.BottomRight ):
                {
                    source.anchorMin = new Vector2 (1, 0);
                    source.anchorMax = new Vector2 (1, 0);
                    break;
                }

            case ( AnchorPresets.HorStretchTop ):
                {
                    source.anchorMin = new Vector2 (0, 1);
                    source.anchorMax = new Vector2 (1, 1);
                    break;
                }
            case ( AnchorPresets.HorStretchMiddle ):
                {
                    source.anchorMin = new Vector2 (0, 0.5f);
                    source.anchorMax = new Vector2 (1, 0.5f);
                    break;
                }
            case ( AnchorPresets.HorStretchBottom ):
                {
                    source.anchorMin = new Vector2 (0, 0);
                    source.anchorMax = new Vector2 (1, 0);
                    break;
                }

            case ( AnchorPresets.VertStretchLeft ):
                {
                    source.anchorMin = new Vector2 (0, 0);
                    source.anchorMax = new Vector2 (0, 1);
                    break;
                }
            case ( AnchorPresets.VertStretchCenter ):
                {
                    source.anchorMin = new Vector2 (0.5f, 0);
                    source.anchorMax = new Vector2 (0.5f, 1);
                    break;
                }
            case ( AnchorPresets.VertStretchRight ):
                {
                    source.anchorMin = new Vector2 (1, 0);
                    source.anchorMax = new Vector2 (1, 1);
                    break;
                }

            case ( AnchorPresets.StretchAll ):
                {
                    source.anchorMin = new Vector2 (0, 0);
                    source.anchorMax = new Vector2 (1, 1);
                    break;
                }
        }
    }

    public static void SetPivot( this RectTransform source, PivotPresets preset )
    {

        switch (preset)
        {
            case ( PivotPresets.TopLeft ):
                {
                    source.pivot = new Vector2 (0, 1);
                    break;
                }
            case ( PivotPresets.TopCenter ):
                {
                    source.pivot = new Vector2 (0.5f, 1);
                    break;
                }
            case ( PivotPresets.TopRight ):
                {
                    source.pivot = new Vector2 (1, 1);
                    break;
                }

            case ( PivotPresets.MiddleLeft ):
                {
                    source.pivot = new Vector2 (0, 0.5f);
                    break;
                }
            case ( PivotPresets.MiddleCenter ):
                {
                    source.pivot = new Vector2 (0.5f, 0.5f);
                    break;
                }
            case ( PivotPresets.MiddleRight ):
                {
                    source.pivot = new Vector2 (1, 0.5f);
                    break;
                }

            case ( PivotPresets.BottomLeft ):
                {
                    source.pivot = new Vector2 (0, 0);
                    break;
                }
            case ( PivotPresets.BottomCenter ):
                {
                    source.pivot = new Vector2 (0.5f, 0);
                    break;
                }
            case ( PivotPresets.BottomRight ):
                {
                    source.pivot = new Vector2 (1, 0);
                    break;
                }
        }
    }
}

用的时候特别简单
想要自适应的UI父物体或单独的UI调用对应的方法就可以了

public class UITest : MonoBehaviour
{
    public RectTransform UIParent;
    public Image UIImage;
    public Text UIText;
    void Awake()
    {
        UIParent.AdaptiveUI ();
        UIImage.AdaptiveUIImage ();
        UIText.AdaptiveUIText ();
    }
}