Partilhar via


ViewPager

ViewPager é um gerenciador de layout que permite implementar a navegação gestual. A navegação gestual permite que o usuário deslize para a esquerda e para a direita para percorrer páginas de dados. Este guia explica como implementar a navegação gestual com ViewPager, com e sem Fragmentos. Ele também descreve como adicionar indicadores de página usando PagerTitleStrip e PagerTabStrip.

Visão geral

Um cenário comum no desenvolvimento de aplicativos é a necessidade de fornecer aos usuários navegação gestual entre modos de exibição irmãos. Nessa abordagem, o usuário passa o dedo para a esquerda ou para a direita para acessar páginas de conteúdo (por exemplo, em um assistente de configuração ou uma apresentação de slides). Você pode criar essas exibições de passar o dedo usando o ViewPager widget, disponível na Biblioteca de Suporte do Android v4. O ViewPager é um widget de layout composto de vários modos de exibição filho onde cada modo de exibição filho constitui uma página no layout:

Capturas de tela do aplicativo TreePager com exemplo de deslizamento horizontal

Normalmente, ViewPager é usado em conjunto com Fragmentos, no entanto, existem algumas situações em que você pode querer usar ViewPager sem a complexidade adicional de Fragments.

ViewPager usa um padrão de adaptador para fornecer as exibições a serem exibidas. O adaptador usado aqui é conceitualmente semelhante ao usado pelo RecyclerView – você fornece uma implementação de PagerAdapter para gerar as páginas que o ViewPager exibe para o usuário. As páginas exibidas por ViewPager podem ser Views ou Fragments. Quando Views são exibidos, o adaptador subclasses da classe base do PagerAdapter Android. Se Fragments for exibido, o adaptador subclasses Android FragmentPagerAdapterdo . A biblioteca de suporte do Android também inclui FragmentPagerAdapter (uma subclasse de PagerAdapter) para ajudar com os detalhes da conexão Fragments aos dados.

Este guia demonstra ambas as abordagens:

  • No Viewpager com Views, um TreePager aplicativo é desenvolvido para demonstrar como usar ViewPager para exibir exibições de um catálogo de árvores (uma galeria de imagens de árvores caducifólias e perenes). PagerTabStrip e PagerTitleStrip são usados para exibir títulos que ajudam na navegação da página.

  • No Viewpager com Fragmentos, um aplicativo FlashCardPager um pouco mais complexo é desenvolvido para demonstrar como usar ViewPager com Fragments para criar um aplicativo que apresenta problemas matemáticos como cartões flash e responde à entrada do usuário.

Requisitos

Para usar ViewPager em seu projeto de aplicativo, você deve instalar o pacote Android Support Library v4 . Para obter mais informações sobre como instalar pacotes NuGet, consulte Demonstra Passo a passo: incluindo um NuGet em seu projeto.

Arquitetura

Três componentes são usados para implementar a navegação gestual com ViewPager:

  • ViewPager
  • Adaptador
  • Indicador Pager

Cada um desses componentes é resumido a seguir.

ViewPager

ViewPager é um gerenciador de layout que exibe uma coleção de Views um de cada vez. Seu trabalho é detectar o gesto de passar o dedo do usuário e navegar para o modo de exibição seguinte ou anterior, conforme apropriado. Por exemplo, a captura de tela abaixo demonstra uma ViewPager transição de uma imagem para a próxima em resposta a um gesto do usuário:

Closeup do aplicativo TreePager exibindo uma transição entre Modos de Exibição

Adaptador

ViewPager extrai seus dados de um adaptador. O trabalho do adaptador é criar o Views exibido pelo ViewPager, fornecendo-os conforme necessário. O diagrama abaixo ilustra esse conceito – o adaptador cria e preenche Views e os fornece ao ViewPager. À medida que detecta ViewPager os gestos de passar o dedo do usuário, ele solicita que o adaptador forneça o apropriado View para exibir:

Diagrama ilustrando como o adaptador conecta imagens e nomes ao ViewPager

Neste exemplo específico, cada View um é construído a partir de uma imagem de árvore e um nome de árvore antes de ser passado para o ViewPager.

Indicador Pager

ViewPager pode ser usado para exibir um grande conjunto de dados (por exemplo, uma galeria de imagens pode conter centenas de imagens). Para ajudar o usuário a navegar em grandes conjuntos de dados, ViewPager geralmente é acompanhado por um indicador de pager que exibe uma cadeia de caracteres. A cadeia de caracteres pode ser o título da imagem, uma legenda ou simplesmente a posição do modo de exibição atual dentro do conjunto de dados.

Há dois modos de exibição que podem produzir essas informações de navegação para você: PagerTabStrip e Cada um exibe uma cadeia de caracteres na parte superior de um ViewPager, e cada um extrai seus dados do ViewPageradaptador do para que ele sempre permaneça em sincronia com o exibido no momentoViewPagerTitleStrip.. A diferença entre eles é que PagerTabStrip inclui um indicador visual para a cadeia de caracteres "atual" enquanto PagerTitleStrip não (como mostrado nestas capturas de tela):

Capturas de tela do aplicativo TreePager com PagerTitleStrip e PagerTabStrip

Este guia demonstra como incorporar ViewPagercomponentes de aplicativos de adaptadores e indicadores e integrá-los para oferecer suporte à navegação gestual.