RadListViewアイテムセパレータ

このチュートリアルでは、RadListViewの項目間にセパレーターを追加する方法について説明します。

項目セパレーターは、スクロール可能なリスト内で各項目が占める境界をより適切に指定するために、項目間に表示される線です。 アイテムのセパレーターは、現時点ではRadListViewの標準機能としてサポートされていませんが、この記事で説明するこの動作を実装する簡単な方法があります。

RadListViewでのアイテムセパレーターの実装

1. NativeScriptアプリケーションでページを作成し、RadListViewデータアイテムのソースにバインドされたインスタンスを配置します。

   <Page loaded="onPageLoaded" xmlns:lv="component/listview" xmlns="http://www.nativescript.org/tns.xsd">
   	<lv:RadListView items="{{ dataItems }}" >
   		<lv:RadListView.listViewLayout>
   			<lv:ListViewLinearLayout scrollDirection="Vertical"/>
   		</lv:RadListView.listViewLayout>
   		<lv:RadListView.itemTemplate>
   			<StackLayout orientation="vertical">
   				<Label fontSize="20" text="{{ itemName }}"/>
   				<Label fontSize="14" text="{{ itemDescription }}" textWrap="true"/>
   			</StackLayout>
   		</lv:RadListView.itemTemplate>
   	</lv:RadListView>
   </Page>

   この特定のケースでは、2つのラベルを含むルートパネルとしてStackLayoutを持つテンプレートがあります。
   
   
2. 以下のStackLayoutように、テンプレートに新しいインスタンスを追加し、その高さを2ピクセルにします。

   <lv:RadListView.itemTemplate>
   	<StackLayout orientation="vertical">
   		<Label fontSize="20" text="{{ itemName }}"/>
   		<Label fontSize="14" text="{{ itemDescription }}" textWrap="true"/>
   		<StackLayout height="2" backgroundColor="Black"/>
   	</StackLayout>
   </lv:RadListView.itemTemplate>

   
   
3. アプリケーションを実行します。結果は、次のスクリーンショットが示すとおりです。

   

結論

アイテムセパレーターは、対応する寸法と色を持つ要素をテンプレート内に追加することにより、"RadListView" で簡単に実装できます。 "RadListView" の項目間の分離は、以下に示すようにマージンを使用して実装することもできます。

<lv:RadListView.itemTemplate>
	<StackLayout>
		<StackLayout orientation="vertical" marginBottom="2">
			<Label fontSize="20" text="{{ itemName }}"/>
			<Label fontSize="14" text="{{ itemDescription }}" textWrap="true"/>
		</StackLayout>
	</StackLayout>
</lv:RadListView.itemTemplate>