ステップ2 - リストアイテムの外観を設定する¶

このステップでは、List Box Item Container プレハブを使用して、ContactsList のコンタクトアイテムの外観を設定します。

リストアイテムの外観を設定するには、以下のようにします。

Prefabs Alt を押しながら右クリックで、List Box Item Container 2D プレハブを作成します。

List Box Item Container プレハブを使用して、List Box ノード内のすべてのアイテムに共通する外観と動作を定義します。Grid List Box 2D ノードと共に List Box Item Container 2D を使用します。List Box Item Container は常にプレハブでなければなりません。
Node Tree で ContactsList ノードを選択し、Properties で List Box > Item Container Template プロパティを追加し、前のステップで作成した List Box Item Container 2D プレハブに設定します。

Item Container Template プロパティを使用すると、List Box ノード内のアイテム間で機能を共有できます。Item Container Template プロパティを設定すると、リストボックス内の各アイテムが List Box Item Container プレハブから機能を継承します。
Prefabs で List Box Item Container 2D プレハブを選択し、Properties で Horizontal Alignment と Vertical Alignment プロパティを追加し、それらを Stretch に設定します。

この方法で、List Box Item Container 2D プレハブのサイズを ContactsList ノードのセルのサイズに合わせます。
List Box Item Container 2D プレハブの Prefabs に Dock Layout 2D ノードを作成します。

Dock Layout ノードを使用して、Dock Layout ノードの内枠に沿ってノードを互いに相対的に配置します。

Dock Layout ノードは、そのアイテムを減算的に配置します。最初のノードを配置した後、Dock Layout ノードは残りのスペースを使用して次のノードを配置します。このように続きます。子ノードを配置する際、Dock Layout ノードはその全体のサイズを使用します。
Dock Layout 2D ノードの Prefabs 内に Empty Node 2D ノードを作成し、それに Separator という名前を付け、Properties で以下を追加および設定します:
- Background Brush から Light Gray Brush へ
- Layout Height を 1 に
- Dock Layout > Side から Bottom へ
  
  この方法で、Separator ノードを Dock Layout 2D ノードの下に配置します。
この方法で、ContactsList ノード内の連絡先アイテムの間に水平区切り線を作成します。
Prefabs で List Box Item Container 2D プレハブを選択し、Properties で Node 2D > Snap to Pixel プロパティを追加して有効にします。

この方法により、リストアイテムの位置が変わっても、その内容をピクセルパーフェクトに保つことができます。例えば、Kanzi は、ユーザーが連絡先リストをスクロールするときに、Separator ノードをシャープな線としてレンダリングし続けます。
Dock Layout 2D ノードの Prefabs 内に Image ノードを作成し、それに Arrow という名前を付け、Properties で以下を追加および設定します:
- Image から ArrowGray へ
- Layout Height から 30 まで
- Vertical Alignment から Center へ
- Dock Layout > Side から Right へ
  
  この方法で、Arrow ノードを Dock Layout 2D ノードの右側に配置します。Dock Layout 2D ノードは、Separator ノードを配置した後に残るスペースに Arrow ノードを配置します。
この方法で、ContactsList ノードの各アイテムに選択矢印の画像を作成します。このチュートリアルの後半で、選択された連絡先を表示するために Arrow ノードを使用します。

Arrow ノードの左側にはまだコンテンツがないため、Dock Layout 2D ノードは Arrow ノードをリストアイテムの全幅に設定します。ContactPhoto ノードが Arrow ノードを覆っているため、Arrow ノードが Preview にまだ表示されていません。
List Box Item Container 2D プレハブ内のリストアイテムの位置を設定します。
1. Dock Layout 2D ノードの Prefabs 内に Content Layout 2D ノードを作成します。
  
  この Content Layout 2D ノードをリストアイテムのルートノードとして使用します。
  
  Dock Layout 2D ノードは、Arrow ノードを配置した後に残るスペースに Content Layout 2D ノードを配置します。
2. Prefabs で List Box Item Container プレハブを選択し、Dictionaries ウィンドウで + Add Resource をクリックし、Create > Alias を選択し、エイリアスに $layout と名前を付けます。
  
  この方法で、List Box Item Container 2D プレハブのリソースディクショナリに $layout エイリアスを作成します。Kanzi は特別なエイリアス名 $layout を使用して、List Box Item Container にリストアイテムのルートノードとして使用する Content Layout ノードを伝えます。
3. $layout エイリアスを List Box Item Container > Dock Layout 2D > Content Layout 2D ノードにポイントするように設定します。
  
  この方法で、Kanzi を設定して、ContactItem プレハブを Content Layout 2D ノードに配置します。