RadListViewアイテムのレイアウト

アイテムのリストを線形でないレイアウトで表示する必要がある場合がよくあります。 たとえば、アイテムのグリッドが必要になる場合があります。 そのために、RadListViewは3つのタイプのアイテムレイアウトを定義しています。 これらは完全にUI仮想化され、モバイル用に最適化されています。 次のレイアウトタイプを使用できます。

• 線形レイアウト - これは、RadListViewコンポーネントで使用される最も一般的なレイアウトです。アイテムは、水平方向または垂直方向に1つずつ配置されます。
• グリッドレイアウト - これは、項目が列と行に並べられているレイアウトです。スクロール方向（垂直または水平）に応じて、列または行の量が事前定義されます。
• 千鳥配置 - これはグリッドレイアウトのより洗練されたバージョンで、項目はスクロール方向に応じて行または列に並べられますが、スクロール方向に隣接する項目間に空きスペースは保持されません。

特定のアイテムレイアウトの定義

RadListViewは、"ListViewLayoutBase"から継承するオブジェクトを受け入れる listViewLayoutプロパティを公開します。 現在、次のクラスを使用できます。

• "ListViewLinearLayout"
• "ListViewGridLayout"
• "ListViewStaggeredLayout"

各レイアウトオブジェクトは、アイテムのサイズを明示的に定義するために使用できるプロパティ "itemHeight" と "itemWidth" プロパティを公開します。 これらのプロパティは、現在使用されているレイアウトタイプやプラットフォーム（AndroidまたはiOS）によっては、常に機能するとは限りません。

「ListViewLinearLayout」の使用

"ListViewLinearLayout"の設定は、XMLで次のように行われます。

例1：RadListViewでListViewLinearLayoutを設定する：

<lv:RadListView.listViewLayout>
	<lv:ListViewLinearLayout scrollDirection="Vertical"/>
</lv:RadListView.listViewLayout>

「ListViewGridLayout」の使用

例2：RadListViewでListViewGridLayoutを設定する：

<lv:RadListView.listViewLayout>
	<lv:ListViewGridLayout scrollDirection="Vertical" itemHeight="250" spanCount="2"/>
</lv:RadListView.listViewLayout>

"spanCount"プロパティを数値に設定すると、 スクロール方向に応じて3列または3行の "ListViewGridLayout"のアイテムの順序が決まります。 ここで"itemHeight"および "itemWidth"プロパティを使用してサイズを調整することもできます。

「ListViewStaggeredLayout」の使用

ListViewStaggeredLayoutの設定は、XMLで次のように行われます。

例3：RadListViewでListViewStaggeredLayoutを設定する：

<lv:RadListView.listViewLayout>
	<lv:ListViewStaggeredLayout scrollDirection="Vertical" spanCount="3"/>
</lv:RadListView.listViewLayout>

千鳥配置の本質は、下の図に示すように、アイテムが自由に測定され、希望のサイズに従って配置されることなので、ここで明示的なアイテムサイズを定義する必要はありません。 また、"itemTemplate"の2番目の Label にも注目してください。 これにより、コンテンツの長さによってテキストの折り返しが可能になり、テキストの長さに応じて任意のアイテムサイズが可能になります。 結果は下の画像で確認できます：

図1：ListViewStaggeredLayoutの動作：

参考文献

このシナリオを実際に見てみたいですか？ GitHubのSDKサンプルリポジトリを確認してください。これとNativeScript UIを使用した他の多くの実用的な例があります。

• アイテムレイアウトの例