ViewPager no Android, Entendendo e Utilizando

Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog. Você receberá um email de confirmação. Somente depois de confirma-lo é que poderei lhe enviar os conteúdos exclusivos.

Email inválido.
Blog /Android /ViewPager no Android, Entendendo e Utilizando

ViewPager no Android, Entendendo e Utilizando

Vinícius Thiengo
(9878) (19)
Go-ahead
"Quanto tempo você deve tentar? Até chegar lá."
Jim Rohn
Kotlin Android
Capa do livro Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia
TítuloDesenvolvedor Kotlin Android - Bibliotecas para o dia a dia
CategoriasAndroid, Kotlin
AutorVinícius Thiengo
Edição
Capítulos19
Páginas1035
Acessar Livro
Treinamento Oficial
Android: Prototipagem Profissional de Aplicativos
CursoAndroid: Prototipagem Profissional de Aplicativos
CategoriaAndroid
InstrutorVinícius Thiengo
NívelTodos os níveis
Vídeo aulas186
PlataformaUdemy
Acessar Curso
Receitas Android
Capa do livro Receitas Para Desenvolvedores Android
TítuloReceitas Para Desenvolvedores Android
CategoriaDesenvolvimento Android
AutorVinícius Thiengo
Edição
Ano2017
Capítulos20
Páginas936
Acessar Livro
Código Limpo
Capa do livro Refatorando Para Programas Limpos
TítuloRefatorando Para Programas Limpos
CategoriaEngenharia de Software
AutorVinícius Thiengo
Edição
Capítulos46
Páginas599
Acessar Livro
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Conteúdo Exclusivo
Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog.
Email inválido

Tudo bem?

Neste vídeo é apresentado o componente visual que é o substituto do componente Gallery, o componente ViewPager.

Dando continuidade a série de vídeos sobre componentes visuais no Android, mostro como o ViewPager é implementado e como ele deve ser adicionado em projeto, pois está View não pertence a API nativa do Android, logo, teremos de baixar a biblioteca android.support.v4 (se possível, já utilize a versão AndroidX) e adiciona-la ao projeto.

Note que vamos implementar também uma classe adaptadora, igualmente fizemos nos conteúdos sobre o ListView e sobre o componente Gallery, porém essa nova classe adaptadora, para ViewPager, extenderá a classe PagerAdapter.

Mesmo o componente ViewPager sendo um pouco mais complexo de se implementar em projeto do que o componente Gallery, a documentação oficial Android já recomenda, desde 2013, que o componente ViewPager seja o utilizado devido a eficiência de seu script interno.

Seguramente posso lhe afirmar que o ViewPager está sim entre os importantes componentes visuais do Android, isso, pois quando se precisa de tabs em projeto, não somente, mas principalmente, o ViewPager é sem sombra de dúvidas a melhor entidade para gerenciar, por exemplo, a apresentação de inúmeros fragmentos vinculados às tabs.

A seguir o diagrama do componente ViewPager:

Diagrama do ViewPager

Abaixo deixo a indicação de dois outros conteúdos que são sobre componentes visuais similares ao ViewPager e que certamente poderão ser excelentes "cartas na manga" em seus próprios projetos de desenvolvimento Android:

Vale ressaltar que quando se falando de componentes visuais no Android é extremamente importante que o seu conhecimento sobre o Material Design já esteja "afiado".

Antes de finalizar, vou deixar alguns links de outros conteúdos do Blog, acompanhados de vídeos, que lhe colocarão em dia com o que há de novo no mundo Android:

E caso você tenha o desejo de aprender a criar apps Android, ou evoluir nesta área, também com o conteúdo gratuito do Blog e canal, então não deixe de acessar a lista de estudos exclusiva em: Estudando Android - Lista de Conteúdos do Blog.

Não esqueça de se inscrever 📫na lista de e-mails do Blog para receber os conteúdos Android em primeira mão.

Se inscreva também no canal do Blog no YouTube para acompanhar as últimas novidades.

Surgindo dúvidas ou dicas, pode enviar abaixo na área de comentários que logo eu lhe retorno.

Obs. : o link para download do projeto apresentado em vídeo se encontra logo abaixo no artigo, na seção "Download".

Abraço.

Fontes

ViewPager - documentação oficial Android

PagerAdapter - documentação oficial Android

Slide between fragments using ViewPager

Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog.
Email inválido

Relacionado

Monitoramento de Inicio e Fim de Carregamento de Página no WebViewMonitoramento de Inicio e Fim de Carregamento de Página no WebViewAndroid
Otimizando Sua APP Android Com OnSaveInstanceStateOtimizando Sua APP Android Com OnSaveInstanceStateAndroid
Gallery no Android, Entendendo e UtilizandoGallery no Android, Entendendo e UtilizandoAndroid
ImageSwitcher no Android, Entendendo e UtilizandoImageSwitcher no Android, Entendendo e UtilizandoAndroid

Compartilhar

Comentários Facebook

Comentários Blog (19)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
16/10/2015
E ae Thiengo blza? Pow, mto bom seu blog!
Tentei me guiar pela documentação do android pra fazer o screen slide, e não consegui. Só com sua explicação eu consegui!

Mas eu tenho algumas dúvidas;
1) há como mexer no posicionamento da imagem? Deixar a imagem no centro, na margem inferior, (20sp, 15dp) abaixo da margem superior, algo assim?

2) Tem como mexer na cor do fundo de cada página?

Abrçs! Vlew Thiengo
Responder
Vinícius Thiengo (1) (0)
17/10/2015
Fala Tsuy, blz?
Tem sim, por exemplo, com o fragment para cada página do ViewPager vc consegue colocar o ImageView dentro de um RelativeLayout ou FrameLayout e posiciona-la em qualquer lugar desse layout container, incluindo mudar a cor de fundo. Abraço
Responder
18/10/2015
Então eu teria de criar um fragment e um xml para cada página? Sendo os xml um RL ou FL, e dentro deles contendo um ImageView, foi isso que vc disse? hahha desculpe a minha ignorância no assunto.

E Thiengo, outra dúvida, cada vez que viramos o dispositivo (pelo ciclo de vida da Activity, me corrija se eu estiver enganado), voltamos a página inicial. Digo, estamos na página 4 dessa lista de carros, com o celular na posição vertical, após deitarmos o celular, ocorrem todas as etapas do seu ciclo de vida até o onDestroy(), então qndo se inicia a Activity novamente, no onCreate, temos a primeira página de volta, como poderíamos ter a página corrente (pag. 4) de volta? Mantendo alguma variável na classe? Que variável eu precisaria guardar?

Desculpe se fui confuso. Abrçs! Vlew Thiengo!
Responder
Vinícius Thiengo (1) (0)
18/10/2015
Isso, a questão dos fragments é apenas uma maneira de implementar, se quiser ir sem eles, sem problemas.

Seu problema de ciclo de vida da Activity vc pode resolver utilizando o onSaveInstanceState, nesse vídeo (http://www.thiengo.com.br/otimizando-sua-app-android-com-onsaveinstancestate ) falo um pouco sobre ele, porém utilizando o Serializable, utilize o Parcelable (http://www.thiengo.com.br/parcelable-no-android-entendendo-e-utilizando ), pois é mais eficiente. Somente utilize o configChanges (http://www.thiengo.com.br/entendendo-e-utilizando-o-configchanges-no-android ) depois de implementar o SaveInstanceState, caso contrário sua APP pode ter problemas quando o configChanges não funcionar e o saveInstanceState não estiver configurado tb. Seu script terá as variáveis necessárias salvas para então poder iniciar a APP onde estava antes da recriação da Activity. Abraço
Responder
18/10/2015
Acho que entendi, cheguei a manusear algumas variáveis, onde precisei guardar seus valores, recorri guardá-las na classe, assim eu as mantenho, depois atribuía novamente no onCreate. É que até agora não consegui manusear o onSaveInstanceState! Vou tentar do seu jeito! Vlew Thiengo!! Abrçs! Curti o Blog! Estive olhando seus materiais e são mto bons!! Parabéns cara!
Responder
20/10/2015
Opa Thiengo,

A primeira vez, fiz como vc fez:

private int mPaginas[] = {R.drawable.ic_pag_1, R.drawable.ic_pag_2, R.drawable.ic_pag3};

E funcionou perfeitamente.
Tentei utilizar o fragment como vc disse, mas sem sucesso. Parece que não sei como utilizá-lo. Fiz:

private int mPaginas[] = { R.layout.fragment_1_pagina, R.layout.fragment_2_pagina, R.layout.fragment_3_pagina };

apenas isso. E criei um xml para cada página

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android "
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/pagina1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_easter_egg_pag_1"/>
</RelativeLayout>

Assim para as outras duas imagens tb.

Criei o Fragment, mas não sei como usá-lo e onde.

public class Pagina1Fragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View layoutPag1 = inflater.inflate(R.layout.fragment_1_pagina, container, false);
        return layoutPag1;
    }
}

Sabe resolver esse problema?
Responder
Vinícius Thiengo (0) (0)
24/10/2015
Fala Tsuy, blz?
Dê uma olhada nesse vídeo onde utilizo o ViewPager junto a fragments (http://www.thiengo.com.br/sliding-tabs-toolbar-material-design-android-parte-8 ), tente adaptar a sua necessidade, pois provavelmente não está com tabs como no vídeo, pode fazer sem elas.

Nesse tuto (http://developer.android.com/intl/pt-br/training/animation/screen-slide.html ) da doc não tem tabs. Tente assim e ve se passa. Abraço
Responder
Ricardo (1) (0)
22/12/2014
Fala thiengo blz,
Cara eu consigo usar o viewpager em um listview? cada item da lista teria um slider com o view pager. Ja fez algo assim? Ou ja viu algo semelhante?
Responder
Vinícius Thiengo (0) (0)
23/12/2014
Fala Ricardo,
Não tentei com ViewPager ainda, mas não vejo problemas em fazer esse script que vc comentou. Mas se for passar imagens tenta o ImageSwitcher, ele é especifico para isso. Se não me engano o APP do Facebook faz isso, porém não sei lhe informar se é com ViewPager. Abraço
Responder
Hudson Mitoso (0) (0)
03/12/2014
e ai Thiengo blz?
seguinte to usando o viewpager mas to tendo o seguinte problema no meu item(pagerAdapter) tenho um botao(imageview) de like(um coração vazio) quando clico tenho que setar um coração cheio, só que a view atual nao ta sendo atualizada e sim a próxima ou a anterior :(

pode me ajudar?

abs.
Responder
Vinícius Thiengo (0) (0)
05/12/2014
Fala Hudson, blz?
Coloque a parte de atualização de imagem aqui, para ver como está fazendo. Abraço
Responder
Claudinei Arteman (0) (0)
04/10/2014
Thiengo, Como você me passou que gallery já depreciado e não aconselha incluir o zoom, aqui no ViewPager é possível? Preciso criar as galerias, mas tem que ter o esquema de zoom tipo pinça, pis as imagens vão conter texto que o zoom vai facilitar a leitura. Valeu.
Responder
Vinícius Thiengo (0) (0)
04/10/2014
Fala Claudinei, blz?
Na verdade eu não aconselho não utilizar o Gallery, o zoom não há problemas, porém eu não cheguei a utilizar o zoom ainda, logo encontrei essa api que pode lhe ajudar a aplicar o zoom

https://github.com/davemorrissey/subsampling-scale-image-view

Se não me engano ele é aplicado no ImageView, vc terá de ver lá se é isso mesmo. Abraço
Responder
23/09/2014
Thiengo, você conhece algum modo para personalizar a transição entre telas parecida com o ViewPager?
Exemplo: Para tirar um relatório eu vou escolhendo a cada tela os itens que estarão contido nesse relatório, a cada clique eu passo para a próxima tela fazendo com que a tela atual deslize para a esquerda e a próxima tela deslize para a esquerda a parecendo na tela do smartphone.
Responder
Vinícius Thiengo (0) (0)
23/09/2014
Fala Carlos, blz?
Então vc pode utilizar o ActionBar no modo Tab com SwipeView, alias SwipeView é mt utilizado. Abraço
Responder
26/09/2014
Fala Thiengo, blz! E você?
Cara, to com uma certa dificuldade aqui. Qual seria a sequencia boa dos seus vídeos para eu aprender de vez a lidar com fragments, action bar, swipeview e algum outro vídeo de transição de tela e personalização de layout?

Grande abraço e agradeço sua atenção!
Responder
Vinícius Thiengo (1) (0)
26/09/2014
Bom os que tenho vídeo vou colocar o link aqui:

Fragments:

Fragments no Android, Trabalhando com Múltiplas Activities (http://www.thiengo.com.br/fragments-no-android-trabalhando-com-multiplas-activities )

Ciclo de Vida e Otimização de Fragments no Android (http://www.thiengo.com.br/ciclo-de-vida-e-otimizacao-de-fragments-no-android )

ActionBar:

Iniciando ActionBar no Android, Trabalhando Com Menu (http://www.thiengo.com.br/iniciando-com-actionbar-no-android-trabalhando-com-menu )

Adicionando Tabs na ActionBar Android (http://www.thiengo.com.br/adicionando-tabs-actionbar-android )

Colocando Botão de Update no ActionBar Android (http://www.thiengo.com.br/colocando-botao-de-update-no-actionbar-android )

Criando Suporte ActionBar Android Com ActionBarSherlock (http://www.thiengo.com.br/criando-suporte-actionbar-android-com-actionbarsherlock )

SearchView, Botão Home e Mudança de Título na ActionBar Android (http://www.thiengo.com.br/searchview-botao-home-e-mudanca-de-titulo-no-actionbar-android )

Customizando ActionBar Android Com ActionBar Style Generator (http://www.thiengo.com.br/customizando-actionbar-android-com-actionbar-style-generator )

Navigator Drawer na ActionBar Android, Entendendo e Utilizando (http://www.thiengo.com.br/navigator-drawer-actionbar-android-entendendo-e-utilizando )

Vídeos sobre transição com efeito entre telas ainda não tenho. Abraço
Responder
Wasley (0) (0)
26/08/2014
Olá Thiengo, os vídeos estão show de bola.
Como faria para implementar o click nas imagens e trazer detalhes sobre o item em questão.
Abraço
Responder
Vinícius Thiengo (2) (0)
26/08/2014
Fala Wasley, blz? Então, vc pode colocar o listener de click no ImageView, ele aceita numa boa (onClickListener()) e dentro do método onClick() do listener vc pode chamar uma outra Activity (startActivity()) mostrando os detalhes que achar necessário. Abraço
Responder