スクロールビュー

ScrollView は、スクロール可能な領域内にコンテンツを表示します。コンテンツを ScrollView に追加すると、コンテンツは ScrollView のコンテンツコンテナ (#unity-content-container) に追加されます。

ScrollView の作成

ScrollView は、UI Builder、UXML、または C# で作成できます。以下の C# の例では、タイトルラベルといくつかの Toggle 要素を含む、水平と垂直の両方のスクロール機能を備えた ScrollView を作成します。

var scrollView = new ScrollView(ScrollViewMode.VerticalAndHorizontal);
scrollView.style.width = 250;
scrollView.style.height = 400;

scrollView.Add(new Label("List of checkboxes:"));

for (int i = 0; i < 100; ++i)
{
    var toggle = new UnityEngine.UIElements.Toggle()
    { text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." };
    scrollView.Add(toggle);
}

スクロールの可視性の管理

スクロールの移動の向き、水平スクロールバーと垂直スクロールバーのどちらを表示するかを指定し、スクロールのスピードをコントロールできます。

UI Builder でスクロールバーの動きの向きを設定するには、ScrollView の Inspector ウィンドウで、Mode に以下のオプションのいずれかを選択します。

• 垂直 (デフォルト)
• 水平
• 垂直および水平

UI Builder でスクロールバーの可視性を設定するには、ScrollView の Inspector ウィンドウで、Horizontal Scroller Visibility または Vertical Scroller Visibilityで以下のオプションのいずれかを選択します。

• 自動 (デフォルト)
• 常に表示
• 隠れオブジェクト

スクロールスピードのコントロール

スクロールスピードをコントロールするには、UI Builder、UXML、または C# コードで以下のプロパティの値を調整します。値が高いほどスクロールスピードが速くなります。

• horizontal-page-size は、 キーボードまたは画面上のスクロールバーボタン (矢印とハンドル) を使用するときの水平スクロールのスピードを制御します。スピードは、ページサイズに指定した値を乗算して計算されます。例えば、2 の値は、各スクロール移動がページ幅の 2 倍の距離をカバーすることを表します。
• vertical-page-size は、キーボードまたは画面上のスクロールバーボタン (矢印とハンドル) を使用するときの垂直スクロールのスピードを制御します。スピードは、ページサイズに指定した値を乗算して計算されます。例えば、2 の値は、各スクロール移動がページの長さの 2 倍の距離をカバーすることを表します。
• mouse-wheel-scroll-size は、マウスホイール使用時のスクロールスピードを制御します。スピードは、指定された値を 18px のデフォルトの行の高さに対応する 18 で除算して計算されます。例えば、値を 36 に設定すると、各スクロール移動は 2 行のコンテンツに相当する距離になります。

ノート: USS ビルトイン変数 –unity-metrics-single_line-height をオーバーライドして、マウスホイール使用時のスクロールのスピードをコントロールできます。mouse-wheel-scroll-size 属性は、–unity-metrics-single_line-height USS 変数よりも優先されます。

ScrollView 内で要素をラップする

ScrollView 内でビジュアル要素をラップして、要素が行に表示されるようにすることができます。行にあくスペースがない場合、要素は次の行に引き続き表示されます。

ScrollView 内でビジュアル要素をラップするには、ScrollView のコンテンツのコンテナ flex-direction を row に、flex-wrap を wrap に設定します。

USS で:

.unity-scroll-view__content-container {
    flex-direction: row;
    flex-wrap: wrap;
}

C# で:

scrollview.contentContainer.style.flexDirection = FlexDirection.Row;
scrollview.contentContainer.style.flexWrap = Wrap.Wrap;

ScrollView 内の要素のテキストをラップする

ScrollView 内でラベル要素のテキストなど、要素のテキストをラップするには、以下のことを行います。

1. 以下のいずれかの方法でラベル要素のスタイルを設定します。
   • UI Builder のラベルの Inspector ウィンドウで、Text > Wrap > normal を選択します。
   • USS、UXML、または C# でラベル要素にスタイル white-space: normal; を適用します。
2. VisualElement を ScrollView 内のコンテナとして作成します。ScrollView 内の元のコンテナ要素には境界が設定されていないため (サイズは無限)、テキストは適切にラップされません。このコンテナ VisualElement は、テキストをラップするための有限のサイズを指定します。
3. VisualElement コンテナにラベルを追加します。

例

• ScrollView 内でコンテンツをラップする: この例では、スタイルを使用してスクロールビュー内のコンテンツをラップする方法を示します。

C# クラスと名前空間

C# クラス: ScrollView
名前空間: UnityEngine.UIElements
基本クラス: VisualElement

メンバー UXML 属性

この要素は以下のメンバー属性を持ちます。

継承された UXML 属性

この要素は基本クラスから以下の属性を継承します。

この要素は VisualElement から以下の属性も継承します。

USS クラス

以下の表は、すべての C# パブリックプロパティ名と、それに関連する USS セレクターのリストです。

Inspector または UI Toolkit Debugger の Matching Selectors セクション を使用して、階層のすべてのレベルで VisualElement のコンポーネントに影響する USS セレクターを確認することもできます。

追加リソース

• ListView
• Scroller