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
(8548) (21) (1)
Go-ahead
"Não podemos estar em modo de sobrevivência. Temos de estar no modo de crescimento."
Jeff Bezos
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
Ano2018
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
Ano2017
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

Opa! Blz?

Nesse vídeo apresento o componente visual que é o substituto do componente Gallery, o ViewPager. Dando continuidade a série de vídeos sobre componentes visuais no Android, mostro como o ViewPager é implementado e como ele é adicionado ao projeto, pois ele não pertence a API nativa do Android, logo teremos de baixar a li android.support.v4 e adiciona-la ao projeto, mas não há nada de complexo, apenas um trabalho de baixar, copiar e colar a mais. Note que vamos implementar também uma classe adaptadora, igualmente fizemos com o ListView e com o Gallery, porém essa classe agora extenderá a classe PagerAdapter, pois como falei anteriormente, o ViewPager não pertence a API nativa do Android. Mas enfim, mesmo sendo um pouco mais complexa de se implmentar do que o componente Gallery, o Android já recomenda que o componente ViewPager seja o utilizado devido a eficiencia de seu script interno. Então é isso, vou deixar você assisitir ao vídeo.

O link para download do projeto se encontra logo abaixo no post.

Página oficial do componente ViewPager no site do Android

Página oficial da classe PagerAdapter no site do Android

Segue imagem esquema do componente ViewPager:

ViewPager no Android, Entendendo e Utilizando

Vlw!

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 (2)

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