ユーザーインターフェイス / コンポーネント / RadListView / アイテムアニメーション

RadListViewアイテムのアニメーション

RadListViewは、リストに追加またはリストから削除されるアイテムのアニメーションをサポートしています。 この機能を利用するには、モジュールをObservableArrayインスタンスにバインドして、コレクションの変更がRadListViewモジュールに報告されるようにする必要があります。

アイテムのアニメーションを有効にする

アイテムのアニメーションを有効にするには、まずアイテムのレイアウトを明示的に定義する必要があります。 アイテムレイアウトの詳細については、専用の記事「アイテムレイアウトアニメーション」を参照してください。 以下のコードサンプルは、"ListViewLinearLayout"の設定方法を示しています。

例1:RadListViewでアイテムアニメーションを有効にする:

<lv:RadListView items="{{ dataItems }}" row="1" id="ls">
    <lv:RadListView.listViewLayout>
         <lv:ListViewLinearLayout scrollDirection="Vertical" itemInsertAnimation="Default" itemDeleteAnimation="Default"/>
    </lv:RadListView.listViewLayout>
    <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical">
            <Label fontSize="20" text="{{ _itemName }}"/>
            <Label fontSize="14" text="{{ _itemDescription }}"/>
        </StackLayout>
    </lv:RadListView.itemTemplate>
 </lv:RadListView>

プロパティ "itemInsertAnimation""itemDeleteAnimation"プロパティを "Fade"に設定すると、 ソースコレクションから挿入または削除されるアイテムは、フェードインまたはフェードアウトアニメーションを使用してアニメーション化されます。 現在利用可能なアニメーションは以下の4つです。

現在利用可能なアイテムのアニメーションタイプは、"ListViewItemAnimation"列挙によって定義されます。

参考文献

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

入門

コアコンセプト

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

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

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

ガイド

サポートを受ける

トラブルシューティング

Siedkick