Partilhar via

Xamarin.Forms Rolagem CarouselView

  • Artigo

CarouselView define as seguintes propriedades relacionadas à rolagem:

  • HorizontalScrollBarVisibility, do tipo ScrollBarVisibility, que especifica quando a barra de rolagem horizontal está visível.
  • IsDragging, do tipo bool, que indica se o CarouselView está rolando. Essa é uma propriedade somente leitura, cujo valor padrão é false.
  • IsScrollAnimated, do tipo bool, que especifica se uma animação ocorrerá ao rolar o CarouselView. O valor padrão é true.
  • ItemsUpdatingScrollMode, do tipo ItemsUpdatingScrollMode, que representa o comportamento de rolagem do CarouselView quando novos itens são adicionados a ele.
  • VerticalScrollBarVisibility, do tipo ScrollBarVisibility, que especifica quando a barra de rolagem vertical está visível.

Todas essas propriedades são apoiadas por BindableProperty objetos, o que significa que elas podem ser destinos de associações de dados.

CarouselView também define dois ScrollTo métodos, que rolam os itens para a exibição. Uma das sobrecargas rola o item no índice especificado para a exibição, enquanto a outra rola o item especificado para a exibição. Ambas as sobrecargas têm argumentos adicionais que podem ser especificados para indicar a posição exata do item após a conclusão da rolagem e se a rolagem deve ser animada.

CarouselView define um evento ScrollToRequested que é disparado quando um dos métodos ScrollTo é invocado. O objeto ScrollToRequestedEventArgs que acompanha o evento ScrollToRequested possui muitas propriedades, incluindo IsAnimated, Index, Item, e ScrollToPosition. Essas propriedades são definidas a partir dos argumentos especificados nas chamadas de ScrollTo método.

Além disso, CarouselView define um evento Scrolled que é acionado para indicar que ocorreu rolagem. O ItemsViewScrolledEventArgs objeto que acompanha o Scrolled evento tem muitas propriedades. Para obter mais informações, consulte Detectar rolagem.

Quando um usuário passa o dedo para iniciar uma rolagem, a posição final da rolagem pode ser controlada para que os itens sejam totalmente exibidos. Esse recurso é conhecido como ajuste, porque os itens se encaixam na posição quando a rolagem é interrompida. Para obter mais informações, consulte Pontos de ajuste.

CarouselView também pode carregar dados incrementalmente à medida que o usuário rola. Para obter mais informações, veja Carregar dados de forma incremental.

Detectar rolagem

A IsDragging propriedade pode ser examinada para determinar se o CarouselView está rolando pelos itens no momento.

Além disso, CarouselView define um Scrolled evento que é acionado para indicar que a rolagem ocorreu. Esse evento deve ser consumido quando os dados sobre a rolagem são necessários.

O exemplo XAML a seguir mostra um CarouselView que define um manipulador de eventos para o evento Scrolled:

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

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView();
carouselView.Scrolled += OnCarouselViewScrolled;

Nesse exemplo de código, o manipulador de eventos OnCarouselViewScrolled é executado quando o evento Scrolled é acionado:

void OnCarouselViewScrolled(object sender, ItemsViewScrolledEventArgs e)
{
    Debug.WriteLine("HorizontalDelta: " + e.HorizontalDelta);
    Debug.WriteLine("VerticalDelta: " + e.VerticalDelta);
    Debug.WriteLine("HorizontalOffset: " + e.HorizontalOffset);
    Debug.WriteLine("VerticalOffset: " + e.VerticalOffset);
    Debug.WriteLine("FirstVisibleItemIndex: " + e.FirstVisibleItemIndex);
    Debug.WriteLine("CenterItemIndex: " + e.CenterItemIndex);
    Debug.WriteLine("LastVisibleItemIndex: " + e.LastVisibleItemIndex);
}

Neste exemplo, o manipulador de eventos OnCarouselViewScrolled gera os valores do objeto ItemsViewScrolledEventArgs que acompanha o evento.

Importante

O evento Scrolled é acionado para rolagens iniciadas pelo usuário e para rolagens programáticas.

Rolar um item em um índice para a exibição

A primeira ScrollTo sobrecarga de método rola o item no índice especificado para exibição. Dado um CarouselView objeto chamado carouselView, o exemplo a seguir mostra como rolar o item no índice 6 para a exibição:

carouselView.ScrollTo(6);

Observação

O evento ScrollToRequested é acionado quando o método ScrollTo é invocado.

Rolar um item para visualização

A sobrecarga do segundo ScrollTo método rola o item especificado para a exibição. Dado um objeto CarouselView chamado carouselView, o exemplo a seguir mostra como rolar o item Macaco Probóscide para visualização:

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

Observação

O evento ScrollToRequested é acionado quando o método ScrollTo é invocado.

Desabilitar animação de rolagem

Uma animação de rolagem é exibida ao se mover entre itens em um CarouselView. Essa animação ocorre tanto para rolagens iniciadas pelo usuário quanto para rolagens programáticas. Definir a IsScrollAnimated propriedade como false desabilitará a animação para ambas as categorias de rolagem.

Como alternativa, o animate ScrollTo argumento do método pode ser definido como false para desabilitar a animação de rolagem em rolagens programáticas:

carouselView.ScrollTo(monkey, animate: false);

Controlar a posição de rolagem

Ao rolar um item para visualização, a posição exata do item após a conclusão da rolagem pode ser especificada com o argumento position dos métodos ScrollTo. Esse argumento aceita um membro de enumeração ScrollToPosition.

MakeVisible

O membro ScrollToPosition.MakeVisible indica que o item deve ser rolado até ficar visível na visualização:

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

Este código de exemplo resulta na rolagem mínima necessária para rolar o item para a exibição.

Observação

O ScrollToPosition.MakeVisible membro é usado por padrão, se o position argumento não for especificado ao chamar o ScrollTo método.

Iniciar

O membro ScrollToPosition.Start indica que o item deve ser rolado até o início da visualização:

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

Este código de exemplo resulta no item que está sendo rolado para o início da exibição.

Center

O membro ScrollToPosition.Center indica que o item deve ser rolado para o centro da visualização:

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

Este código de exemplo resulta no item sendo rolado para o centro da exibição.

Término

O membro ScrollToPosition.End indica que o item deve ser rolado até o final da visualização:

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

Este código de exemplo resulta no item que está sendo rolado até o final do modo de exibição.

Controlar a posição de rolagem quando novos itens são adicionados

CarouselView define uma ItemsUpdatingScrollMode propriedade, que é apoiada por uma propriedade associável. Essa propriedade obtém ou define um ItemsUpdatingScrollMode valor de enumeração que representa o comportamento de rolagem do CarouselView quando novos itens são adicionados a ela. A enumeração ItemsUpdatingScrollMode define os seguintes membros:

  • KeepItemsInView mantém o primeiro item da lista exibido quando novos itens são adicionados.
  • KeepScrollOffset garante que a posição de rolagem atual seja mantida quando novos itens forem adicionados.
  • KeepLastItemInView Ajusta o deslocamento de rolagem para manter o último item da lista exibido quando novos itens são adicionados.

O valor padrão da ItemsUpdatingScrollMode propriedade é KeepItemsInView. Portanto, quando novos itens são adicionados a um CarouselView , o primeiro item da lista permanecerá exibido. Para garantir que o último item da lista seja exibido quando novos itens forem adicionados, defina a ItemsUpdatingScrollMode propriedade como KeepLastItemInView:

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

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ItemsUpdatingScrollMode = ItemsUpdatingScrollMode.KeepLastItemInView
};

Visibilidade da barra de rolagem

CarouselView define propriedades HorizontalScrollBarVisibility e VerticalScrollBarVisibility, que são apoiadas por propriedades vinculáveis. Essas propriedades obtêm ou definem um valor de enumeração ScrollBarVisibility que representa quando a barra de rolagem horizontal ou vertical está visível. A enumeração ScrollBarVisibility define os seguintes membros:

  • Default indica o comportamento padrão da barra de rolagem para a plataforma e é o valor padrão para as propriedades HorizontalScrollBarVisibility e VerticalScrollBarVisibility.
  • Always indica que as barras de rolagem ficarão visíveis, mesmo quando o conteúdo couber na visualização.
  • Never indica que as barras de rolagem não ficarão visíveis, mesmo que o conteúdo não caiba na visualização.

Pontos de ajuste

Quando um usuário passa o dedo para iniciar uma rolagem, a posição final da rolagem pode ser controlada para que os itens sejam totalmente exibidos. Esse recurso é conhecido como ajuste, pois os itens se encaixam na posição quando a rolagem é interrompida e é controlado pelas seguintes propriedades da ItemsLayout classe:

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que as propriedades podem ser alvos de vinculações de dados.

Observação

Quando o encaixe ocorrer, ele ocorrerá na direção que produz a menor quantidade de movimento.

Tipo de pontos de snap

A enumeração SnapPointsType define os seguintes membros:

  • None indica que a rolagem não se encaixa nos itens.
  • Mandatory indica que o conteúdo sempre se encaixa no ponto de ajuste mais próximo de onde a rolagem pararia naturalmente, ao longo da direção da inércia.
  • MandatorySingle indica o mesmo comportamento Mandatoryque , mas rola apenas um item por vez.

Por padrão, em um CarouselView, a propriedade é definida como SnapPointsType.MandatorySingle, o SnapPointsType que garante que a rolagem role apenas um item por vez.

As capturas de tela a seguir mostram um com o CarouselView ajuste desativado:

Captura de tela de um CarouselView sem pontos de ajuste, no iOS e Android

Alinhamento de pontos de snap

A SnapPointsAlignment enumeração define Start, Center, e End membros.

Importante

O valor da SnapPointsAlignment propriedade só é respeitado quando a SnapPointsType propriedade é definida como Mandatory, ou MandatorySingle.

Iniciar

O SnapPointsAlignment.Start membro indica que os pontos de snap estão alinhados com a borda inicial dos itens. O exemplo XAML a seguir mostra como definir esse membro de enumeração:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Start
    },
    // ...
};

Quando um usuário desliza para iniciar uma rolagem em uma rolagem CarouselViewhorizontal, o item esquerdo será alinhado com a esquerda da exibição:

Captura de tela de um CarouselView com pontos de snap inicial, no iOS e Android

Centro

O SnapPointsAlignment.Center membro indica que os pontos de snap estão alinhados com o centro dos itens.

Por padrão, em um CarouselView, a SnapPointsAlignment propriedade é definida como Center. No entanto, para fins de integridade, o exemplo XAML a seguir mostra como definir esse membro de enumeração:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="Center" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.Center
    },
    // ...
};

Quando um usuário desliza o dedo para iniciar uma rolagem em uma rolagem CarouselViewhorizontal, o item central será alinhado com o centro da exibição:

Captura de tela de um CarouselView com pontos de ajuste centrais, no iOS e Android

Término

O SnapPointsAlignment.End membro indica que os pontos de snap estão alinhados com a borda à direita dos itens. O exemplo XAML a seguir mostra como definir esse membro de enumeração:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"
                           SnapPointsType="MandatorySingle"
                           SnapPointsAlignment="End" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

Este é o código C# equivalente:

CarouselView carouselView = new CarouselView
{
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal)
    {
        SnapPointsType = SnapPointsType.MandatorySingle,
        SnapPointsAlignment = SnapPointsAlignment.End
    },
    // ...
};

Quando um usuário desliza o dedo para iniciar uma rolagem em uma rolagem CarouselViewhorizontal, o item direito será alinhado com a direita da exibição.

Captura de tela de um CarouselView com pontos de ajuste final, no iOS e Android