ユーザーインターフェイス / コンポーネント / RadListView / アイテムの並べ替え

RadListViewアイテムの並べ替え

リスト内のアイテムの並べ替えは、モバイルアプリの一般的なシナリオです。 たとえば、タスクを視覚化するリストビューでは、タスクを並べ替えて優先順位を指定できます。 RadListViewでは、単一のプロパティを設定することでこの機能を有効にできます。

アイテムの並べ替えを有効にする

RadListViewでアイテム並べ替えの機能を有効にするには、以下に示すように "itemReorder" プロパティを設定するだけです。 さらに、"itemReorderedEvent" イベントを実装して、 並べ替えイベントを実行できます。

例1:RadListViewでアイテムの並べ替えを有効にする:

<lv:RadListView itemReordered="{{onItemReordered}}" items="{{ dataItems }}" row="1" itemReorder="true">
	<lv:RadListView.itemTemplate>
		<StackLayout paddingTop="5" paddingBottom="5">
			<Label fontSize="20" text="{{ itemName }}" marginLeft="10"/>
		</StackLayout>
	</lv:RadListView.itemTemplate>
</lv:RadListView>

並べ替えモードの定義

"RadListView" は2つの並べ替えモードをサポートします

デフォルトの並べ替えモードは "HoldAndDrag" です。 使用可能な並べ替えモードのいずれかをアクティブにするには、"reorderMode" プロパティを対応する値に設定します。

並べ換えハンドルの定義

並べ換えモード "Drag" をアクティブにした場合、RadListView は以下のように振舞います:

並べ換えハンドルとして機能する、"itemTemplate" の部分を明示的に指定することで、並べ換えハンドルを簡単にカスタマイズできます。次のXMLスニペットを見てください。

例2:テンプレートで並べ換えハンドルを定義する:

<lv:RadListView.itemTemplate>
	<GridLayout columns="*, auto" paddingTop="16" paddingBottom="16">
		<StackLayout orientation="vertical" col="0" verticalAlignment="center">
			<Label fontSize="20" text="{{ itemName }}"/>
		</StackLayout>
		<lv:ReorderHandle col="1" verticalAlignment="center">
			<Image android:src="res://reorder_icon" ios:src="res://reorder-icon" stretch="none" verticalAlignment="stretch" margin="16"/>
		</lv:ReorderHandle>
	</GridLayout>
</lv:RadListView.itemTemplate>

ご覧のとおり、特別な "ReorderHandle" 要素が使用されており、 テンプレートのどの部分を再注文ハンドルとして使用するかを "RadListView" に指示します。 "ReorderHandle" 要素は通常の {N} ビューなので、 使い慣れたプロパティをすべて使用してレイアウトや外観を調整することができます。 ここでは、Image要素を "ReorderHandle" の中に入れています。 次の画像は、"RadListView" がこの場合どのように見えるかを示しています。

図1:カスタムの並べ替えハンドルが動作しているアイテムの並べ替え:

RadListView:ハンドルで並べ替え RadListView:ハンドルで並べ替え

アイテムの並べ替えイベントの処理

RadListViewは、アイテムの並べ替え機能に関連する2つのイベントを公開します。

"itemReorderStartedEvent" イベントは、 並べ替えられる項目のインデックスを取得するために使用できる "ListViewEventData" クラスのインスタンスを公開します。

RadListViewは、アイテムが並べ換えられると "itemReorderedEvent" イベントを発生させます。 イベントは、dataプロパティが "ListViewItemReorderData" オブジェクトを指す "ListViewEventData" インスタンスを提供します。 並べ替え操作に関する特定の情報を提供する2つのプロパティを公開します。

次のコードサンプルは、"itemReorderedEvent" ハンドラーの例を示しています。

例3:アイテムの並べ替えイベントの処理:

public onItemReordered(args: ListViewEventData) {
	console.log("Item reordered. Old index: " + args.index + " " + "new index: " + args.data.targetIndex);
}

参考文献

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

入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick