Rolagem de CollectionView de xamarin. FormsXamarin.Forms CollectionView Scrolling

Baixar Exemplo Baixar o exemploDownload Sample Download the sample

CollectionView define dois ScrollTo métodos, que rolagem os itens na exibição.CollectionView defines two ScrollTo methods, that scroll items into view. Uma das sobrecargas rola o item no índice especificado na exibição, enquanto o outro rola o item especificado na exibição.One of the overloads scrolls the item at the specified index into view, while the other scrolls the specified item into view. Ambas as sobrecargas têm argumentos adicionais que podem ser especificados para indicar a posição exata do item depois que a rolagem for concluída e se deseja animar a rolagem.Both overloads have additional arguments that can be specified to indicate the exact position of the item after the scroll has completed, and whether to animate the scroll.

CollectionView define uma ScrollToRequested evento que é disparado quando um dos ScrollTo métodos é invocado.CollectionView defines a ScrollToRequested event that is fired when one of the ScrollTo methods is invoked. O ScrollToRequestedEventArgs objeto que acompanha o ScrollToRequested evento tem muitas propriedades, incluindo IsAnimated, Index, Item, e ScrollToPosition.The ScrollToRequestedEventArgs object that accompanies the ScrollToRequested event has many properties, including IsAnimated, Index, Item, and ScrollToPosition. Essas propriedades são definidas a partir dos argumentos especificados no ScrollTo chamadas de método.These properties are set from the arguments specified in the ScrollTo method calls.

Quando um dedo do usuário para iniciar uma rolagem, a posição final da rolagem pode ser controlada para que os itens são totalmente exibidas.When a user swipes to initiate a scroll, the end position of the scroll can be controlled so that items are fully displayed. Esse recurso é conhecido como encaixe, como itens de ajuste para posicionar durante a rolagem é interrompido.This feature is known as snapping, because items snap to position when scrolling stops. Para obter mais informações, consulte ajustar pontos.For more information, see Snap points.

Rolar um item em um índice na exibiçãoScroll an item at an index into view

A primeira ScrollTo sobrecarga do método rola o item no índice especificado na exibição.The first ScrollTo method overload scrolls the item at the specified index into view. Considerando um CollectionView objeto chamado collectionView, o exemplo a seguir mostra como rolar o item no índice 12 no modo de exibição:Given a CollectionView object named collectionView, the following example shows how to scroll the item at index 12 into view:

collectionView.ScrollTo(12);

Rolar um item na exibiçãoScroll an item into view

A segunda ScrollTo sobrecarga do método rola o item especificado na exibição.The second ScrollTo method overload scrolls the specified item into view. Considerando um CollectionView objeto chamado collectionView, o exemplo a seguir mostra como rolar o item especificado no modo de exibição:Given a CollectionView object named collectionView, the following example shows how to scroll the specified item into view:

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

Posição de rolagem de controleControl scroll position

Ao rolar um item no modo de exibição, a posição exata do item após a rolagem pode ser especificada com o position argumento do ScrollTo métodos.When scrolling an item into view, the exact position of the item after the scroll has completed can be specified with the position argument of the ScrollTo methods. Esse argumento aceita uma ScrollToPosition membro de enumeração.This argument accepts a ScrollToPosition enumeration member.

MakeVisibleMakeVisible

O ScrollToPosition.MakeVisible membro indica que o item deve ser rolado até que ele esteja visível no modo de exibição:The ScrollToPosition.MakeVisible member indicates that the item should be scrolled until it's visible in the view:

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

Esse código de exemplo resulta na rolagem mínima necessária para rolar o item na exibição:This example code results in the minimal scrolling required to scroll the item into view:

Captura de tela de uma lista vertical de CollectionView com um item é colocado na exibição, no iOS e AndroidScreenshot of a CollectionView vertical list with an item scrolled into view, on iOS and Android

Observação

O ScrollToPosition.MakeVisible membro é usado por padrão, se o position argumento não for especificado ao chamar o ScrollTo método.The ScrollToPosition.MakeVisible member is used by default, if the position argument is not specified when calling the ScrollTo method.

InícioStart

O ScrollToPosition.Start membro indica que o item deve ser rolado para o início do modo de exibição:The ScrollToPosition.Start member indicates that the item should be scrolled to the start of the view:

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

Esse código de exemplo resulta no item que está sendo rolado para o início da exibição:This example code results in the item being scrolled to the start of the view:

Captura de tela de uma lista vertical de CollectionView com um item é colocado na exibição, no iOS e AndroidScreenshot of a CollectionView vertical list with an item scrolled into view, on iOS and Android

Centralizado Center

O ScrollToPosition.Center membro indica que o item deve ser rolado para o centro do modo de exibição:The ScrollToPosition.Center member indicates that the item should be scrolled to the center of the view:

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

Esse código de exemplo resulta no item que está sendo rolado para o centro da exibição:This example code results in the item being scrolled to the center of the view:

Captura de tela de uma lista vertical de CollectionView com um item é colocado na exibição, no iOS e AndroidScreenshot of a CollectionView vertical list with an item scrolled into view, on iOS and Android

EndEnd

O ScrollToPosition.End membro indica que o item deve ser rolado até o final do modo de exibição:The ScrollToPosition.End member indicates that the item should be scrolled to the end of the view:

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

Esse código de exemplo resulta no item que está sendo rolado até o final do modo de exibição:This example code results in the item being scrolled to the end of the view:

Captura de tela de uma lista vertical de CollectionView com um item é colocado na exibição, no iOS e AndroidScreenshot of a CollectionView vertical list with an item scrolled into view, on iOS and Android

Desativar a animação de rolagemDisable scroll animation

Uma animação de rolagem é exibida quando um item de rolagem no modo de exibição.A scrolling animation is displayed when scrolling an item into view. No entanto, essa animação pode ser desabilitada definindo a animate argumento do ScrollTo método false:However, this animation can be disabled by setting the animate argument of the ScrollTo method to false:

collectionView.ScrollTo(monkey, animate: false);

Pontas de encaixeSnap points

Quando um dedo do usuário para iniciar uma rolagem, a posição final da rolagem pode ser controlada para que os itens são totalmente exibidas.When a user swipes to initiate a scroll, the end position of the scroll can be controlled so that items are fully displayed. Esse recurso é conhecido como encaixe, como itens de ajustar-se à posição quando rolagem for interrompido e é controlada pelas seguintes propriedades do ItemsLayout classe:This feature is known as snapping, because items snap to position when scrolling stops, and is controlled by the following properties from the ItemsLayout class:

Essas propriedades têm o respaldo BindableProperty objetos, o que significa que as propriedades podem ser alvos de vinculações de dados.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

Observação

Quando o ajuste ocorre, ele ocorrerá na direção que produz a menor quantidade de movimento.When snapping occurs, it will occur in the direction that produces the least amount of motion.

Tipo de pontas de encaixeSnap points type

O SnapPointsType enumeração define os seguintes membros:The SnapPointsType enumeration defines the following members:

  • None indica que rolagem não se ajusta aos itens.None indicates that scrolling does not snap to items.
  • Mandatory indica que o conteúdo sempre se ajusta para o mais próximo snap aponta para onde rolagem naturalmente pararia, ao longo da direção da inércia.Mandatory indicates that content always snaps to the closest snap point to where scrolling would naturally stop, along the direction of inertia.
  • MandatorySingle indica o mesmo comportamento que Mandatory, mas rola apenas um item por vez.MandatorySingle indicates the same behavior as Mandatory, but only scrolls one item at a time.

Por padrão, o SnapPointsType estiver definida como SnapPointsType.None, que garante que a rolagem não se ajusta itens, conforme mostrado nas capturas de tela seguir:By default, the SnapPointsType property is set to SnapPointsType.None, which ensures that scrolling does not snap items, as shown in the following screenshots:

Captura de tela de uma lista vertical de CollectionView sem pontos de alinhamento, no iOS e AndroidScreenshot of a CollectionView vertical list without snap points, on iOS and Android

Ajustar-se pontos de alinhamentoSnap points alignment

O SnapPointsAlignment enumeração define Start, Center, e End membros.The SnapPointsAlignment enumeration defines Start, Center, and End members.

Importante

O valor da SnapPointsAlignment propriedade só é respeitada quando o SnapPointsType propriedade é definida como Mandatory, ou MandatorySingle.The value of the SnapPointsAlignment property is only respected when the SnapPointsType property is set to Mandatory, or MandatorySingle.

InícioStart

O SnapPointsAlignment.Start membro indica que pontos de alinhamento são alinhados com a borda à esquerda de itens.The SnapPointsAlignment.Start member indicates that snap points are aligned with the leading edge of items.

Por padrão, o SnapPointsAlignment estiver definida como SnapPointsAlignment.Start.By default, the SnapPointsAlignment property is set to SnapPointsAlignment.Start. No entanto, para fins de integridade, o exemplo XAML a seguir mostra como definir este membro de enumeração:However, for completeness, the following XAML example shows how to set this enumeration member:

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <ListItemsLayout SnapPointsType="MandatorySingle"
                         SnapPointsAlignment="Start">
            <x:Arguments>
                <ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
            </x:Arguments>
        </ListItemsLayout>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

O código C# equivalente é:The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new ListItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    ItemTemplate = new DataTemplate(() =>
    {
        return null;
    })
};

Quando um dedo do usuário para iniciar uma rolagem, o item superior será alinhado à parte superior do modo de exibição:When a user swipes to initiate a scroll, the top item will be aligned with the top of the view:

Captura de tela de uma lista vertical de CollectionView com pontos de alinhamento de início, no iOS e AndroidScreenshot of a CollectionView vertical list with start snap points, on iOS and Android

Centralizado Center

O SnapPointsAlignment.Center membro indica que pontos de alinhamento são alinhados com a Central de itens.The SnapPointsAlignment.Center member indicates that snap points are aligned with the center of items. O exemplo XAML a seguir mostra como definir este membro de enumeração:The following XAML example shows how to set this enumeration member:

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <ListItemsLayout SnapPointsType="MandatorySingle"
                         SnapPointsAlignment="Center">
            <x:Arguments>
                <ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
            </x:Arguments>
        </ListItemsLayout>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

O código C# equivalente é:The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new ListItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    ItemTemplate = new DataTemplate(() =>
    {
        return null;
    })
};

Quando um dedo do usuário para iniciar uma rolagem, o item superior será centralizado na parte superior do modo de exibição:When a user swipes to initiate a scroll, the top item will be center aligned at the top of the view:

Captura de tela de uma lista vertical de CollectionView com pontos de alinhamento central, no iOS e AndroidScreenshot of a CollectionView vertical list with center snap points, on iOS and Android

EndEnd

O SnapPointsAlignment.End membro indica que os pontos de alinhamento são alinhados com a borda direita de itens.The SnapPointsAlignment.End member indicates that snap points are aligned with the trailing edge of items. O exemplo XAML a seguir mostra como definir este membro de enumeração:The following XAML example shows how to set this enumeration member:

<CollectionView x:Name="collectionView"
                ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <ListItemsLayout SnapPointsType="MandatorySingle"
                         SnapPointsAlignment="End">
            <x:Arguments>
                <ItemsLayoutOrientation>Vertical</ItemsLayoutOrientation>
            </x:Arguments>
        </ListItemsLayout>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

O código C# equivalente é:The equivalent C# code is:

CollectionView collectionView = new CollectionView
{
    ItemsLayout = new ListItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    ItemTemplate = new DataTemplate(() =>
    {
        return null;
    })
};

Quando um dedo do usuário para iniciar uma rolagem, o item na parte inferior será alinhado à parte inferior do modo de exibição:When a user swipes to initiate a scroll, the bottom item will be aligned with the bottom of the view:

Captura de tela de uma lista vertical de CollectionView com pontos de alinhamento final, no iOS e AndroidScreenshot of a CollectionView vertical list with end snap points, on iOS and Android