Unity 使用InputField和Scroll View制作可滑动的简介功能

效果图：

一、新建Scroll View组件右键Canvas——>UI——>Scroll View

二、创建InputField 在新建的Scroll View——>Viewport——>Content下创建InputField

三、组件整合使用及思路

InputFiexd组件无法使用Content Size Fitter组件自动调整大小，所以需要使用代码将输入的字符赋值给Scroll View下Content的Text组件，Content通过Content Size Fitter自动调整大小后实现效果。

1.首先给Scroll View——>Viewport——>Content添加 Text组件和Content Size Fitter组件

调整完后，Content的Text组件可以随着文字增多而自动调整大小，当Content大小超过Scroll View高度时，垂直滑动条会显示出来。

2.给InputFexid添加脚本

using UnityEngine;
using UnityEngine.UI;

public class InputFieldToContent : MonoBehaviour
{
    //private static readonly string no_breaking_space = "\u00A0";

    [SerializeField] ScrollRect scrollView; 

    InputField m_InputField;
    Text content_Text;//Scroll View下Content组件Text

    RectTransform m_RectTransform;
    RectTransform content_RectTransform;

    void Start()
    {
        //获取组件
        m_InputField = GetComponent<InputField>();
        content_Text = transform.parent.GetComponent<Text>();
        m_RectTransform= GetComponent<RectTransform>();
        content_RectTransform= content_Text.rectTransform;

        //当InputField输入字符时 
        m_InputField.onValueChanged.AddListener((value) =>
        {
            //替换空格编码格式
            //m_InputField.text = m_InputField.text.Replace(" ", no_breaking_space);

            content_Text.text = m_InputField.text;
            isRefresh = true;//刷新m_InputField大小
        });
    }


    bool isRefresh = false; //是否刷新 
    Vector2 sizeDelta;
    void OnGUI() 
    {
        if (isRefresh)
        {
            LayoutRebuilder.ForceRebuildLayoutImmediate(content_Text.rectTransform);//刷新高度

            //判断内容高度是否超过scrollView 容器高度 
            if (content_RectTransform.sizeDelta.y> scrollView.GetComponent<RectTransform>().sizeDelta.y)
                sizeDelta= new Vector2(m_RectTransform.sizeDelta.x, content_RectTransform.sizeDelta.y);//超过时 修改InputField高度为内容高度
            else
                sizeDelta = new Vector2(m_RectTransform.sizeDelta.x, scrollView.GetComponent<RectTransform>().sizeDelta.y);//未超过时 修改InputField高度为ScrollView高度

            m_RectTransform.sizeDelta = sizeDelta;

            //修改滚动条 使内容位置始终可见
            scrollView.verticalScrollbar.value = 0;
            LayoutRebuilder.ForceRebuildLayoutImmediate(scrollView.GetComponent<RectTransform>());//刷新滚动条

            isRefresh = false;
        }
    }

}

给脚本拖拽上需要的组件效果就可以完成了

四、优化调整

到这里就完成了，根据网上的文章整理优化了一遍，有兴趣可以看一下原文章的讲解。

参考连接：Unity 为UGUI InputField添加滑动条 - 简书 (jianshu.com)

Unity 使用InputField和Scroll View制作可滑动的简介功能

猜你喜欢