Unity 為UGUI InputField添加滑動條

前排高能提醒:這是個深坑?。。。。。?!

研究過程:
一開始以為InputField添加個滑動條是一個不太難的功能,可是百度搜搜,谷歌搜搜,竟然沒有一個靠譜的答案。
只有下面兩個答案稍微靠譜一點:
1.把InputField作為Scroll View的子物體進行拖拽,https://blog.csdn.net/u010511043/article/details/106870079
2.使用Textmeshpro插件,TMP自帶這個功能

首先TMP有一些問題(比如角標無法正常顯示)等,暫時不考慮插件實現(xiàn)。
而上述方案一又是拖拽整個InputField,而非僅拖拽移動文字部分,也不太符合我的實現(xiàn)思路。

沉下心研究了一下InputField的全部API內(nèi)容,竟然發(fā)現(xiàn)沒有直接的接口。

而InputField用于展示的text則不支持ContentSizeFitter根據(jù)字符自動撐滿。

仔細看了一下InputField輸入大量文字時,選中文字可以進行拖拽,而他的實現(xiàn)方式竟然是修改顯示的那個子物體Text的內(nèi)容,而不是修改Text的位置。
也就是說:m_InputField.text(輸入的字)和m_InputField.textComponent.text(用戶實際看到的字)的文字內(nèi)容是不相等的,后者僅僅有顯示部分的字。

于是我先考慮是否可以調(diào)整顯示這部分字的內(nèi)容,先找到了m_InputField.caretPosition(光標位置),通過動態(tài)修改光標位置,再調(diào)用一下刷新渲染(m_InputField.ForceLabelUpdate();),確實可以通過光標移動實現(xiàn)文字的移動,但是問題是無法實現(xiàn)光標上下移動僅能左右n個字符n個字符移動。如果某一行只有一個字,一下子跳10個字符的話可能會到N行以外,即便把數(shù)據(jù)和拖拽條綁定,實現(xiàn)效果也并不會好。

然后發(fā)現(xiàn)鍵盤的上下鍵可以直接上下行移動光標,接近我想要的效果,但是!Unity居然沒有開放相關(guān)的api調(diào)用!除非我去修改ugui的源碼,再編譯打包進來,才能實現(xiàn)想要的效果(太麻煩了,太難了)。

于是研究回到起點,寫這么多只是想告訴你們這是真的坑。


下面開始曲線救國,首先沒看過這篇http://www.itdecent.cn/p/463447cc8c73的先去做一遍熟悉一下。
這次我們在這篇基礎(chǔ)上稍微加一些東西。不過還是從頭開始講步驟,所以上一篇不看也行~
一、首先創(chuàng)建一個Scroll View,把橫向拖拽條刪掉,其他的根據(jù)喜好自己設(shè)定

image.png

Scroll View設(shè)置要修改一下,否則子物體位置會有問題
image.png

二、在Content下創(chuàng)建一個InputField再把它撐滿設(shè)置得很長


image.png

三、把兩個子物體也撐滿,防止位置有問題


image.png

四、設(shè)置InputField為多行并且回車可換行


image.png

五、最精彩的來了,給Content添加Text組建和ContentSizeFitter,并且Text的參數(shù)要和InputField用于子物體的Text參數(shù)一樣。簡單說就是InputField無法字適應(yīng),我們用一個看不到的Text自適應(yīng)用來給Scroll View拖拽。而把InputField設(shè)置的非常長(也可以寫代碼根據(jù)需求動態(tài)修改)。


image.png

六、最后我們要寫一個小腳本,讓InputField的輸入value改變時實時傳到Content的Text,如下:

using UnityEngine;
using UnityEngine.UI;

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

    InputField m_InputField;
    Text m_Text;
    void Start()
    {
        m_InputField = GetComponent<InputField>();
        m_Text = transform.parent.GetComponent<Text>();
        m_InputField.onValueChanged.AddListener((value) =>
       {
           //替換空格編碼格式
           m_InputField.text = m_InputField.text.Replace(" ", no_breaking_space);

           m_Text.text = m_InputField.text;
       });
    }
}

腳本內(nèi)容太簡單了就不解釋了,拖到InputField上。

over~ 運行,可以拖拽InputField了


image.png

其他的優(yōu)化項可以參考這篇的后半部分http://www.itdecent.cn/p/463447cc8c73

沒錯!能想到這么搞的我就是個天才,給我點個贊吧~

鏈接: https://pan.baidu.com/s/10BYt64XHXoi--NNuhylKOw 提取碼: 3uku

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容