RadListViewアイテムのカスタマイズ

"RadListView" のアイテムテンプレートをXMLで提供するのは、非常に簡単な作業です。 この方法では複雑で美しいデザインを作成できますが、一部のアイテムで異なるデザインを使用する場合は、十分な柔軟性がありません。

この記事では、さまざまなアイテムのデザインでRadListViewを作成するために "itemLoadingEvent" イベントを使用します。

「itemLoading」イベント

"itemLoadingEvent" イベントは、 項目がRadListViewで視覚化される直前に呼び出されます。 NativeScriptアイテムビューとネイティブビューが提供されるため、各アイテムを個別にカスタマイズできます。 このカスタマイズ手法を使用するには、XMLに "itemLoadingEvent" イベントのハンドラーを定義し、 対応するハンドラーを実装する必要があります。

<lv:RadListView id="listView" items="{{ dataItems }}" row="1" itemLoading="onItemLoading">
	<lv:RadListView.itemTemplate>
		<StackLayout orientation="vertical" padding="15">
			<Label id="nameLabel" fontSize="20" text="{{ itemName }}" marginBottom="10"/>
			<Label id="descLabel" fontSize="14" text="{{ itemDescription }}"/>
		</StackLayout>
	</lv:RadListView.itemTemplate>
</lv:RadListView>

上記のサンプルでは、次の "itemLoadingEvent" イベントのハンドラーを定義しonItemLoadingを呼び出すシンプルなListViewを作成しています。

export function onItemLoading(args: ListViewEventData) {
	if (args.index % 2 === 0) {
		args.view.backgroundColor = new Color("#b3ecff");
		args.view.getViewById<Label>("nameLabel").fontSize = 24;
		args.view.getViewById<Label>("descLabel").fontSize = 18;
	}
	else {
		args.view.backgroundColor = new Color("#ccf2ff");
		args.view.getViewById<Label>("nameLabel").fontSize = 20;
		args.view.getViewById<Label>("descLabel").fontSize = 14;
	}
}

args オブジェクトは、次の重要なプロパティを公開します。

• itemIndex - 現在視覚化されているアイテムのデータソースインデックス
• view - アイテムのビジュアルコンテナを表す{N}ビュー
• ios(iOS固有) - アイテムの視覚化に使用されるネイティブiOSセルを公開します
• android(Android固有) - アイテムの視覚化に使用されるネイティブのAndroidビューを公開します

この構造により、すべてのアイテムの外観を自由に変更およびカスタマイズできます。この特定のケースでは、偶数のインデックスを持つアイテムと奇数のインデックスを持つアイテムに1つのスタイルセットを適用しています。結果は以下の通りです。

iOS：

アンドロイド：