Version: 2022.3
言語: 日本語
リストビューのランタイム UI の作成
ランタイム用タブメニューの作成

スクロールビュー内でコンテンツを折り返す

バージョン: 2021.3 以降

この例では、スタイルを使用してスクロールビュー内のコンテンツを折り返す (ラップ) 方法を説明します。デモンストレーション目的で、このガイドはエディター UI 用です。ただし、スクロールビューのスタイル設定に関する説明は、ランタイム UI にも適用できます。

例の概要

この例では、2 つのスクロールビューを持つカスタムエディターウィンドウを作成します。

  • その中にラベルが入っています。ラベルのテキストは 1 行に表示され、行がいっぱいになると次の行に表示されます。
  • その中に 15 個のボタンがあります。ボタンは 1 行に表示され、行が一杯になると次の行に表示されます。
テキストとボタンをラップするカスタムエディターウィンドウ
テキストとボタンをラップするカスタムエディターウィンドウ

スクロールビュー内でラベルのテキストを折り返すには、Label コントロールにスタイルを適用し、VisualElement を使用してラベルを保持 します。

スクロールビュー内で要素を折り返すには、スクロールビューのコンテンツコンテナにスタイルを適用 します。

この例で作成するすべてのファイルは、GitHub リポジトリ にあります。

要件

このガイドは、Unity エディター、UI Toolkit、および C# スクリプトに精通している開発者を対象としています。始める前に、以下をよく理解してください。

カスタムエディターウィンドウの作成

この例を試すには、まずカスタムエディターウィンドウをデフォルトコンテンツで作成します。

  1. 任意のテンプレートで Unity プロジェクトを作成します。
  2. Project ウィンドウで右クリックし、Create > UI Toolkit > Editor Window を選択します。
  3. UI Toolkit Editor Window Creator ウィンドウの C# ボックスに、ScrollViewExample と入力します。
  4. Confirm を選択します。これで 3 つのファイル ScrollViewExample.csScrollViewExample.uxmlScrollViewExample.uss が作成されます。

スクロールビューの作成

UI ドキュメント (UXML ファイル) でスクロールビューの基本構造を定義し、USS ファイルでビジュアル要素のスタイルを設定し、C# スクリプトで 2 番目のスクロールビューに 15 個のボタンを加えます。

  1. ScrollViewExample.uxml の内容を以下のように置き換えます。

    <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
        <Style src="ScrollViewExample.uss" />
        <ui:ScrollView>
            <ui:VisualElement>
                <ui:Label text="ScrollView Wrapping Example" />
            </ui:VisualElement>
        </ui:ScrollView>
        <ui:ScrollView name="scroll-view-wrap-example" />
    </ui:UXML>
    
  2. ScrollViewExample.uxml の内容を以下のように置き換えます。

    Label {
        font-size: 20px;
        -unity-font-style: bold;
        color: rgb(68, 138, 255);
        /* Style to wrap text of the label */
        white-space: normal;
    }
    
    /* Style to wrap elements inside the scroll view */
    #scroll-view-wrap-example .unity-scroll-view__content-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    Button {
        width: 50px;
        height: 50px;
    }
    
  3. ScrollViewExample.uxml の内容を以下のように置き換えます。

    using UnityEditor;
    using UnityEngine;
    using UnityEngine.UIElements;
    using UnityEditor.UIElements;
    
    public class ScrollViewExample : EditorWindow
    {
        [MenuItem("Example/ScrollView Wrapping Example")]
        public static void ShowExample()
        {
            var wnd = GetWindow<ScrollViewExample>();
        }
    
        public void CreateGUI()
        {
            // Each editor window contains a root VisualElement object.
            VisualElement root = rootVisualElement;
    
            // Import UXML.
            var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/ScrollViewExample.uxml");
            VisualElement ScrollViewExample = visualTree.Instantiate();
            root.Add(ScrollViewExample);
    
            // Find the scroll view by name.
            VisualElement scrollview = root.Query<ScrollView>("scroll-view-wrap-example");
            
            // Add 15 buttons inside the scroll view.
            for (int i = 0; i < 15; i++) 
            {
                Button button = new Button();
                button.text = "Button";
                scrollview.Add(button);
            }
        }
    }
    
  4. スクロールビューの折り返しをテストするには、メニューから Example > ScrollView Wrapping Example を選択します。

その他の参考資料

リストビューのランタイム UI の作成
ランタイム用タブメニューの作成