Xamarin.Forms CollectionView のスクロール

  • [アーティクル]

Download Sample サンプルをダウンロードします

CollectionView では、項目をビューにスクロールする 2 つの ScrollTo メソッドを定義します。 オーバーロードの 1 つは、指定したインデックスの項目をビューにスクロールし、もう 1 つは指定した項目をビューにスクロールします。 どちらのオーバーロードにも、項目が属するグループ、スクロールが完了した後の項目の正確な位置、およびスクロールをアニメーション化するかどうかを示すために指定できる追加の引数があります。

CollectionView は、 ScrollToRequested いずれかのメソッドが呼び出されたときに発生するイベントを ScrollTo 定義します。 イベントに付随するオブジェクトにはScrollToRequestedEventArgs、,, Index, Item, など、IsAnimated多くのプロパティがありますScrollToPosition。ScrollToRequested これらのプロパティは、メソッド呼び出しで ScrollTo 指定された引数から設定されます。

さらに、 CollectionView スクロールが発生したことを示すために発生するイベントを定義 Scrolled します。 ItemsViewScrolledEventArgsイベントに付随Scrolledするオブジェクトには、多くのプロパティがあります。 詳細については、「 スクロールの検出」を参照してください。

CollectionView また、 ItemsUpdatingScrollMode 新しい項目が追加されたときのスクロール動作を CollectionView 表すプロパティも定義します。 このプロパティの詳細については、「 新しい項目が追加されたときにスクロール位置を制御する」を参照してください。

ユーザーがスワイプしてスクロールを開始すると、項目が完全に表示されるようにスクロールの終了位置を制御できます。 スクロールが停止すると項目が位置にスナップされるため、この機能はスナップと呼ばれます。 詳細については、「 スナップ点」を参照してください。

CollectionView は、ユーザーがスクロールするにつれてデータを増分的に読み込むこともできます。 詳細については、「データを 増分読み込む」を参照してください。

スクロールを検出する

CollectionView は、 Scrolled スクロールが発生したことを示すために発生するイベントを定義します。 ItemsViewScrolledEventArgsイベントに付随Scrolledするオブジェクトを表すクラスは、次のプロパティを定義します。

  • HorizontalDeltaは、水平 doubleスクロールの量の変化を表します。 これは左にスクロールする場合は負の値、右にスクロールする場合は正の値です。
  • VerticalDeltaの型 doubleは、垂直スクロールの量の変化を表します。 これは、上方向にスクロールする場合は負の値、下にスクロールする場合は正の値です。
  • HorizontalOffsetの型 doubleは、リストが原点から水平方向にオフセットされる量を定義します。
  • VerticalOffsetの型 doubleは、リストが原点から垂直方向にオフセットされる量を定義します。
  • FirstVisibleItemIndexは、リスト intに表示される最初の項目のインデックスです。
  • CenterItemIndex(type int) は、リストに表示される中央の項目のインデックスです。
  • LastVisibleItemIndex、type intは、リストに表示される最後の項目のインデックスです。

次の XAML の例は、イベントの CollectionView イベント ハンドラーを設定する例を Scrolled 示しています。

<CollectionView Scrolled="OnCollectionViewScrolled">
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView();
collectionView.Scrolled += OnCollectionViewScrolled;

このコード例では、イベントが OnCollectionViewScrolled 発生したときにイベント ハンドラーが Scrolled 実行されます。

void OnCollectionViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    // Custom logic
}

重要

イベントは Scrolled 、ユーザーが開始したスクロールとプログラムによるスクロールに対して発生します。

インデックスの項目をビューにスクロールする

最初 ScrollTo のメソッド オーバーロードは、指定したインデックスの項目をビューにスクロールします。 オブジェクトの名前collectionViewをCollectionView指定すると、次の例は、インデックス 12 の項目をビューにスクロールする方法を示しています。

collectionView.ScrollTo(12);

または、グループ化されたデータ内の項目をスクロールして、項目とグループ インデックスを指定することもできます。 次の例は、2 番目のグループの 3 番目の項目をスクロールして表示する方法を示しています。

// Items and groups are indexed from zero.
collectionView.ScrollTo(2, 1);

注意

イベントは ScrollToRequested 、メソッドが ScrollTo 呼び出されたときに発生します。

項目をスクロールして表示する

2 番目 ScrollTo のメソッド オーバーロードは、指定した項目をビューにスクロールします。 という名前collectionViewのCollectionViewオブジェクトを指定すると、次の例は Proboscis Monkey 項目をスクロールして表示する方法を示しています。

MonkeysViewModel viewModel = BindingContext as MonkeysViewModel;
Monkey monkey = viewModel.Monkeys.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey);

または、グループ化されたデータ内の項目をスクロールして、項目とグループを指定することもできます。 次の例は、Monkeys グループの Proboscis Monkey 項目をスクロールして表示する方法を示しています。

GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;
AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Monkeys");
Animal monkey = group.FirstOrDefault(m => m.Name == "Proboscis Monkey");
collectionView.ScrollTo(monkey, group);

注意

イベントは ScrollToRequested 、メソッドが ScrollTo 呼び出されたときに発生します。

スクロール アニメーションを無効にする

項目をビューにスクロールすると、スクロール アニメーションが表示されます。 ただし、このアニメーションは、メソッドfalseの引数をanimate次のようにScrollTo設定することで無効にすることができます。

collectionView.ScrollTo(monkey, animate: false);

スクロール位置を制御する

項目をビューにスクロールする場合、スクロールが完了した後の項目の正確な位置は、メソッドのScrollTo引数でposition指定できます。 この引数は列挙メンバーを ScrollToPosition 受け入れます。

MakeVisible

メンバーは ScrollToPosition.MakeVisible 、項目がビューに表示されるまでスクロールする必要があることを示します。

collectionView.ScrollTo(monkey, position: ScrollToPosition.MakeVisible);

次のコード例では、項目をビューにスクロールするために必要なスクロールが最小限になります。

Screenshot of a CollectionView vertical list with ScrollToPosition.MakeVisible, on iOS and Android

注意

ScrollToPosition.MakeVisibleこのメンバーは、メソッドの呼び出しScrollTo時に引数がposition指定されていない場合、既定で使用されます。

開始

メンバーは ScrollToPosition.Start 、項目をビューの先頭までスクロールする必要があることを示します。

collectionView.ScrollTo(monkey, position: ScrollToPosition.Start);

次のコード例では、項目がビューの先頭までスクロールされます。

Screenshot of a CollectionView vertical list with ScrollToPosition.Start, on iOS and Android

Center

メンバーは ScrollToPosition.Center 、項目をビューの中央までスクロールする必要があることを示します。

collectionView.ScrollTo(monkey, position: ScrollToPosition.Center);

次のコード例では、項目がビューの中央までスクロールされます。

Screenshot of a CollectionView vertical list with ScrollToPosition.Center, on iOS and Android

End

メンバーは ScrollToPosition.End 、項目をビューの末尾までスクロールする必要があることを示します。

collectionView.ScrollTo(monkey, position: ScrollToPosition.End);

次のコード例では、項目がビューの末尾までスクロールされます。

Screenshot of a CollectionView vertical list with ScrollToPosition.End, on iOS and Android

新しい項目が追加されたときにスクロール位置を制御する

CollectionViewItemsUpdatingScrollModeは、バインド可能なプロパティによってサポートされるプロパティを定義します。 このプロパティは、新しい項目が追加されたときのCollectionViewスクロール動作を表す列挙値を取得または設定ItemsUpdatingScrollModeします。 ItemsUpdatingScrollMode 列挙体を使って、次のメンバーを定義できます。

  • KeepItemsInView は、新しい項目が追加されたときに表示されるリスト内の最初の項目を保持します。
  • KeepScrollOffset は、新しい項目が追加されたときに現在のスクロール位置が維持されることを保証します。
  • KeepLastItemInView は、新しい項目が追加されたときに表示されるリスト内の最後の項目を保持するようにスクロール オフセットを調整します。

プロパティの ItemsUpdatingScrollMode 既定値は KeepItemsInView. したがって、リストの最初の項目に新しい CollectionView 項目が追加されると、表示されたままになります。 新しい項目が追加されたときにリスト内の最後の項目が表示されるようにするには、プロパティを ItemsUpdatingScrollMode 次のように KeepLastItemInView設定します。

<CollectionView ItemsUpdatingScrollMode="KeepLastItemInView">
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

スクロール バーの表示

CollectionView では、 HorizontalScrollBarVisibility バインド可能なプロパティによってサポートされるプロパティが定義および VerticalScrollBarVisibility プロパティになります。 これらのプロパティは、水平スクロール バーまたは垂直スクロール バーが表示されるタイミングを表す列挙値を取得または設定 ScrollBarVisibility します。 ScrollBarVisibility 列挙体を使って、次のメンバーを定義できます。

  • Defaultはプラットフォームの既定のスクロール バーの動作を示し、およびプロパティのHorizontalScrollBarVisibilityVerticalScrollBarVisibility既定値です。
  • Always は、コンテンツがビューに収まる場合でも、スクロール バーが表示されることを示します。
  • Never は、コンテンツがビューに収まらない場合でも、スクロール バーが表示されないことを示します。

スナップ位置

ユーザーがスワイプしてスクロールを開始すると、項目が完全に表示されるようにスクロールの終了位置を制御できます。 この機能はスナップと呼ばれます。スクロールが停止したときに項目が位置にスナップされ、クラスの ItemsLayout 次のプロパティによって制御されるためです。

これらのプロパティはオブジェクトによって BindableProperty サポートされます。つまり、プロパティはデータ バインディングのターゲットにすることができます。

注意

スナップが発生すると、最小のモーション量を生成する方向にスナップが発生します。

スナップポイントの種類

SnapPointsType 列挙体を使って、次のメンバーを定義できます。

  • None は、スクロールが項目にスナップしないことを示します。
  • Mandatory は、コンテンツが常に、慣性方向に沿って、スクロールが自然に停止する最も近いスナップ ポイントにスナップすることを示します。
  • MandatorySingle は、同じ動作 Mandatoryを示しますが、一度に 1 つの項目のみをスクロールします。

既定では、次の SnapPointsType スクリーンショットに SnapPointsType.None示すように、このプロパティは 、スクロールによって項目がスナップされないように設定されます。

Screenshot of a CollectionView vertical list without snap points, on iOS and Android

点の配置をスナップする

列挙体はSnapPointsAlignment、、Center、およびメンバーをEnd定義しますStart。

重要

プロパティのSnapPointsAlignment値は、プロパティが 、またはMandatorySingleに設定Mandatoryされている場合SnapPointsTypeにのみ考慮されます。

開始

このメンバーは SnapPointsAlignment.Start 、スナップポイントが項目の上端に揃っていることを示します。

既定では、SnapPointsAlignment プロパティは SnapPointsAlignment.Start に設定されます。 ただし、完成度を高めるために、次の XAML の例では、この列挙メンバーを設定する方法を示します。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

ユーザーがスワイプしてスクロールを開始すると、上部の項目がビューの上部に揃えられます。

Screenshot of a CollectionView vertical list with start snap points, on iOS and Android

Center

メンバーは SnapPointsAlignment.Center 、スナップポイントが項目の中心に揃っていることを示します。 次の XAML の例は、この列挙メンバーを設定する方法を示しています。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

ユーザーがスワイプしてスクロールを開始すると、上部の項目がビューの上部に中央揃えされます。

Screenshot of a CollectionView vertical list with center snap points, on iOS and Android

End

このメンバーは SnapPointsAlignment.End 、スナップポイントが項目の末尾の端に揃っていることを示します。 次の XAML の例は、この列挙メンバーを設定する方法を示しています。

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

これに相当する C# コードを次に示します。

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

ユーザーがスワイプしてスクロールを開始すると、下部の項目がビューの下部に揃えられます。

Screenshot of a CollectionView vertical list with end snap points, on iOS and Android