【Unity】【UI Toolkit】tabIndexを使ってフォーカス順を制御する方法

UnityのUI Toolkitにおけるフォーカス順の制御方法をまとめました。

Unity 2021.3.16f1

タブキーとフォーカスの順序

テキストフィールド、フォーカス可能な要素が複数並んでいるときには、タブキーを押すと次の優先順位の要素にフォーカスが移ります。

フォーカス移動

デフォルトでは、ルート要素に近くChildIndexが小さいUI要素から順にフォーカスが移っていきます。

UI Toolkitでは、このフォーカスの順序は自由に制御することができます。
本記事ではその方法についてまとめます。

フォーカスの順序を制御する

フォーカスの順序を制御するには、TextFieldの基底クラスであるFocusableのtabIndex フィールドを使用します。
このフィールドに値を設定すると、この値が小さいものから順にフォーカスが移るようになります。

この動作を確認するために、以下のようにfield2とfield3にtabIndexを指定します。

using UnityEditor;
using UnityEngine.UIElements;

public class FocusExample : EditorWindow
{
    public void CreateGUI()
    {
        var field1 = new TextField { label = "Field1" };
        rootVisualElement.Add(field1);

        var field2 = new TextField
        {
            label = "Field2",
            tabIndex = 2
        };
        rootVisualElement.Add(field2);

        var field3 = new TextField
        {
            label = "Field3",
            tabIndex = 1
        };
        rootVisualElement.Add(field3);
    }

    [MenuItem("Window/FocusExample")]
    public static void ShowExample()
    {
        GetWindow<FocusExample>();
    }
}

これを実行すると、以下のようにフォーカスの順序が変わっていることを確認できます。

動作確認

参考

docs.unity3d.com