SlideShare uma empresa Scribd logo
PhotoView
Android Para a
Completa
Implementação
de Zoom
thiengo.com.br
Android PhotoView
A PhotoView API é uma daquelas APIs
simples, mas que atendem a vários domínios
de problema, exatamente como a Picasso
API e o Retrofit, por exemplo.
A diferença da PhotoView para com as APIs
citadas anteriormente é que ela é ainda mais
simples de ser incorporada a projetos Android
e foi desenvolvida por um dos engenheiros do
Google Android, Chris Banes.
A PhotoView tem suporte a partir do Android
4, Donut. E apesar de oferecer algumas
características extras, como a rotação de
imagem, a proposta principal, zoom em
imagem, é muito bem atendida, mesmo com
o carregamento de imagens remotas.
Instalação da API
A API está presente no repositório JVM Jitpack. Logo, primeiro temos de adicionar
esse repositório no Gradle Project Level, ou build.gradle (Project:
NomeAplicativo):
Depois é adicionar a referência a API no Gradle App Level, ou build.gradle
(Module: app):
Na época da construção deste conjunto de slides a versão mais atual e estável da
API era a 2.1.4. Escolha sempre por utilizar a versão mais atual e estável.
Carregamento de imagem com PhotoView
A principal bandeira que faz com que a PhotoView API tenha mais de 13k estrelas
no GitHub (isso é um forte indício de que a API tem alta qualidade) é a facilidade de
uso. Veja o código de exemplo:
A PhotoView é uma implementação mais robusta do ImageView, ela herda desta
View. Logo, podemos utilizar todos os atributos possíveis no ImageView.
Executando o projeto Android com o trecho de código anterior, temos:
Clique aqui para abrir a animação
O acesso a PhotoView via código também é simples, utilizando o método
findViewById() ou então o ID da View seguindo a sintaxe do plugin kotlin-android-
extensions:
Carregamento remoto de imagem - Picasso API
A princípio a única API de carregamento remoto de imagem que não tem suporte
junto a PhotoView é a API Fresco, para driblar esta limitação, caso você realmente
esteja em um projeto onde a Fresco API seja indispensável, a documentação da
PhotoView indica a API PhotoDraweeView.
As outras APIs de carregamento remoto funcionam sem problemas junto a
PhotoView, ao menos as principais. A mais comum para esse tipo de tarefa é a
Picasso.
A seguir um XML PhotoView ainda sem uma imagem referenciada:
Agora a referência a Picasso API direto do Gradle App Level, build.gradle
(Module: app):
Então a permissão de Internet no AndroidManifest.xml:
E assim o código de carregamento de imagem via Picasso API:
Executando o projeto com os códigos anteriormente apresentados, temos:
Clique aqui para abrir a animação
Trabalhando as escalas de zoom
Se o domínio de problema do aplicativo em desenvolvimento exigir que as três
escalas de zoom padrão sejam trabalhadas em outros valores, você consegue isso
com as seguintes propriedades:
• minimumScale: defini / obtém a escala mínima de zoom. O valor padrão é
1.0F, valor que representa a escala inicial, onde o zoom ainda não foi aplicado;
• mediumScale: defini / obtém a segunda escala de zoom. O valor padrão é
1.75F;
• maximumScale: defini / obtém a terceira escala de zoom. O valor padrão é
3.0F.
Agora um PhotoView de exemplo:
Então o código de alteração de escalas de zoom:
Executando o projeto com os códigos anteriores, temos:
Clique aqui para abrir a animação
O método setScaleLevels()
permiti que as três escalas
sejam atualizadas em uma
única invocação.
Caso seja necessária a atualização da escala de zoom atual em imagem, utilize:
• scale: propriedade que permiti obter / atualizar a escala atual de zoom no PhotoView
alvo. Aqui a atualização vai gerar uma mudança brusca de escala de zoom. O valor
aceito / retornado é do tipo Float;
• setScale( escala_em_float, animacao_em_boolean ): método que permite definir a
nova escala de zoom no PhotoView alvo, mas aqui é possível, em segundo
argumento, informar se a animação de mudança de escala deve ou não ser aplicada. O
valor true indica que sim, false indica que não.
Segue código de exemplo de atualização de escala de zoom em imagem:
Como informado em comentário do código anterior: scale e setScale() somente
têm efeito depois que a PhotoView alvo já está renderizada em tela, por isso o
código de exemplo é acompanhado de uma thread e um SystemClock.sleep().
Importante: o valor definido em scale ou em setScale() deve estar no range
[minimumScale, maximumScale], caso contrário uma IllegalArgumentException
será gerada.
Executando o projeto com o trecho de código anterior, temos:
Clique aqui para abrir a animação
Listener de atualização de escala
Para ouvir a cada mudança de fator de escala basta implementar a Interface
OnScaleChangedListener como no código a seguir:
Como informado em comentário, focusX e focusY somente terão a mudança de valor se o
acionamento do zoom for em tela, em qualquer parte do PhotoView, não necessariamente na
parte onde a imagem aparece.
Verificação e duração de animação
Para verificar ou então atualizar o status de zoom na PhotoView, utilize a
propriedade isZoomable:
Para trabalhar o tempo de duração da animação de zoom, utilize o método
setZoomTransitionDuration(), veja a seguir:
Com a PhotoView de teste a seguir:
Podemos executar o código com delay de quatro segundos em animação de zoom:
Clique aqui para abrir a animação
Rotação da imagem
Por algum motivo foi adicionada a API a funcionalidade de rotação de acordo com o
grau definido. São dois métodos passíveis de serem utilizados: setRotationBy() e
setRotationTo().
Acredite, ambos os métodos aguardam o mesmo tipo de argumento, graus de
rotação em Float, e têm o mesmo código interno.
Os métodos de rotação seguem a mesma regra de negócio que a propriedade e
método de mudança de escala de zoom: somente terão efeitos visuais se
invocados depois que a PhotoView já estiver renderizada em tela.
A seguir uma PhotoView de exemplo:
Então o código de rotação de imagem:
Executando o projeto com os códigos anteriores, temos:
Clique aqui para abrir a animação
Listener de toque em imagem
Para ouvir o toque / clique único em imagem, podemos implementar a Interface
OnPhotoTapListener como a seguir:
Note que o método onPhotoTap() somente é invocado se o toque na imagem for exatamente
na área coberta por ela e não em toda a área coberta pela PhotoView, onde pode haver
espaços não cobertos pela imagem.
Listener de toque fora da imagem
Também é possível ouvir ao toque / clique dentro da PhotoView, porém fora da
área de cobertura da imagem, isso implementando a Interface
OnOutsidePhotoTapListener como no código a seguir:
Listener de toque na PhotoView
Para ouvir ao toque ou clique em qualquer parte da PhotoView, com cobertura ou
não da imagem carregada, é necessário implementar a Interface
OnViewTapListener como a seguir:
Listener de duplo toque, único toque e duplo toque seguido
de ação
Para ouvir ao toque duplo, ou ao
toque único, incluindo o listener
de ação pós toque duplo,
podemos implementar a Interface
GestureDetector.OnDoubleTap
Listener:
O método
onSingleTapConfirmed()
funciona exatamente com a
mesma regra de negócio que o
método onViewTap() de
OnViewTapListener: o toque
único precisa ocorrer dentro da
PhotoView.
Ouvindo ao evento de drag
O listener de drag na imagem é tão sensível que até mesmo quando o drag não é
passível de ser visualizado em tela, quando o zoom não foi ainda aplicado, esse
listener é invocado.
Antes de mostrar o código de listener de drag, vamos a um exemplo do que seria
um drag junto ao componente PhotoView:
Clique aqui para abrir a animação
Então podemos ir ao código que implementa a Interface OnViewDragListener:
Ouvindo a atualização da matriz da imagem
Se em seu domínio de problema é preciso algum trabalho quando houver a atualização do
objeto Matrix da imagem, para isso é possível implementar a Interface
OnMatrixChangedListener como a seguir:
Hackcode para ViewGroups problemáticos
Alguns ViewGroups que implementam OnInterceptTouchEvent, como o
ViewPager e o DrawerLayout, disparam exceções quando alguma PhotoView
está dentro deles.
O código hack para burlar esse problema é o seguinte:
Note que o código do slide anterior é bem genérico, serve para qualquer
ViewGroup problemático. Veja, por exemplo, as implementações de hackcode,
direto da documentação oficial da PhotoView API, para:
• ViewPager;
• DrawerLayout.
Pontos negativos
• A documentação não mostra, detalhadamente, como obter o máximo da
PhotoView, é preciso navegar pelos exemplos (sem comentários) para então
entender a API por completo;
• O nome da API é bem confuso em relação a proposta dela. Um rótulo como
ZoomView certamente cairia melhor na API;
• A funcionalidade de rotação de imagem poderia ser removida, pois não tem
haver com a proposta de ser uma API simples para a aplicação de zoom. Ou:
• É possível que a funcionalidade de rotação tenha sido adicionada devido ao
problema que alguns devices Android têm depois que uma fotografia é
realizada: a imagem é entregue invertida. Com os métodos de rotação seria
simples resolver isso, porém na documentação não há nada informando o
porquê da API de rotação.
• A Interface OnSingleFlingListener quando em uso não trás nada diferente do
que é conseguido com outras Interfaces da API PhotoView, Interfaces que têm
um rótulo muito mais significativo em termos boa de leitura de código.
Pontos positivos
• Código muito simples para já conseguirmos a aplicação completa de zoom;
• Possibilidade de atualização de níveis de escala e de duração do zoom;
• Vários tipos de listeners que permitem o acionamento das mais variadas
funções de acordo com o toque do usuário em View;
• Possibilidade de trabalho com APIs de carregamento de imagens remotas.
Conclusão
Apesar do zoom ser uma funcionalidade simples e que desenvolvedores Android
de primeira viagem possam imaginar já ser uma funcionalidade nativa no
ImageView, por exemplo, na verdade não é.
A API PhotoView faz o trabalho da melhor maneira possível:
• Exigindo poucas linhas de código;
• E entregando o zoom completo.
Obviamente que sempre é possível obter ainda mais de APIs Android, mas a
PhotoView tem realmente uma proposta de ser simples. Logo, seguindo as dicas
da documentação, se você precisa de algo ainda mais robusto em termos de
escala de imagem, tente a API Subsampling-Scale-Image-View.
Fontes
Conteúdo completo, em texto e em vídeo, no link a seguir:
• https://www.thiengo.com.br/photoview-android-para-a-completa-
implementacao-de-zoom
Fonte:
• https://github.com/chrisbanes/PhotoView
Para estudo
• Treinamento oficial:
• Prototipagem Profissional de Aplicativos Android.
• Meus livros:
• Receitas Para Desenvolvedores Android;
• Refatorando Para Programas Limpos.
• Redes:
• Udemy;
• YouTube;
• Facebook;
• LinkedIn;
• GitHub;
• Twitter;
• Google Plus.
• Blog App.
PhotoView Android Para a Completa
Implementação de Zoom
thiengo.com.br
Vinícius Thiengo
thiengocalopsita@gmail.com

Mais conteúdo relacionado

Mais procurados

Trabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo AndroidTrabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo Android
Vinícius Thiengo
 
BottomNavigationView Android, Como e Quando Utilizar
BottomNavigationView Android, Como e Quando UtilizarBottomNavigationView Android, Como e Quando Utilizar
BottomNavigationView Android, Como e Quando Utilizar
Vinícius Thiengo
 
ViewModel Android, Como Utilizar Este Componente de Arquitetura
ViewModel Android, Como Utilizar Este Componente de ArquiteturaViewModel Android, Como Utilizar Este Componente de Arquitetura
ViewModel Android, Como Utilizar Este Componente de Arquitetura
Vinícius Thiengo
 
Leitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXingLeitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXing
Vinícius Thiengo
 
Android: Avaliação do Pré-projeto Agenda Cultural
Android: Avaliação do Pré-projeto Agenda CulturalAndroid: Avaliação do Pré-projeto Agenda Cultural
Android: Avaliação do Pré-projeto Agenda Cultural
Vinícius Thiengo
 
Estudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do BlogEstudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do Blog
Vinícius Thiengo
 
Como Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no AndroidComo Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no Android
Vinícius Thiengo
 
Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?
Vinícius Thiengo
 
Observable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI AndroidObservable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI Android
Vinícius Thiengo
 
Android Studio
Android StudioAndroid Studio
Android Studio
Vinícius Thiengo
 
Como Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State APIComo Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State API
Vinícius Thiengo
 
Annotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no AndroidAnnotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no Android
Vinícius Thiengo
 
Fontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e UsoFontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e Uso
Vinícius Thiengo
 
Eclipse uml
Eclipse umlEclipse uml
Eclipse uml
Tiago Davi
 
Programação Android - Básico
Programação Android - BásicoProgramação Android - Básico
Programação Android - Básico
HugoDalevedove
 
Java Fx Guia De IntroduçãO
Java Fx Guia De IntroduçãOJava Fx Guia De IntroduçãO
Java Fx Guia De IntroduçãO
danielfc
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento Android
José Alexandre Macedo
 
Apostila Android
Apostila AndroidApostila Android
Apostila Android
Andre Nascimento
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
Leandro Santos
 
Android Aula 5
Android Aula 5Android Aula 5
Android Aula 5
Erisvaldo Junior
 

Mais procurados (20)

Trabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo AndroidTrabalhando Análise Qualitativa em seu Aplicativo Android
Trabalhando Análise Qualitativa em seu Aplicativo Android
 
BottomNavigationView Android, Como e Quando Utilizar
BottomNavigationView Android, Como e Quando UtilizarBottomNavigationView Android, Como e Quando Utilizar
BottomNavigationView Android, Como e Quando Utilizar
 
ViewModel Android, Como Utilizar Este Componente de Arquitetura
ViewModel Android, Como Utilizar Este Componente de ArquiteturaViewModel Android, Como Utilizar Este Componente de Arquitetura
ViewModel Android, Como Utilizar Este Componente de Arquitetura
 
Leitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXingLeitor de Códigos no Android com Barcode Scanner API - ZXing
Leitor de Códigos no Android com Barcode Scanner API - ZXing
 
Android: Avaliação do Pré-projeto Agenda Cultural
Android: Avaliação do Pré-projeto Agenda CulturalAndroid: Avaliação do Pré-projeto Agenda Cultural
Android: Avaliação do Pré-projeto Agenda Cultural
 
Estudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do BlogEstudando Android - Lista de Conteúdos do Blog
Estudando Android - Lista de Conteúdos do Blog
 
Como Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no AndroidComo Utilizar Métodos Binding Adapter no Android
Como Utilizar Métodos Binding Adapter no Android
 
Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?Android: Qual Tecnologia de Desenvolvimento Utilizar?
Android: Qual Tecnologia de Desenvolvimento Utilizar?
 
Observable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI AndroidObservable Binding Para Atualização na UI Android
Observable Binding Para Atualização na UI Android
 
Android Studio
Android StudioAndroid Studio
Android Studio
 
Como Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State APIComo Reter Objetos Utilizando Android-State API
Como Reter Objetos Utilizando Android-State API
 
Annotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no AndroidAnnotation Span Para Estilização de Texto no Android
Annotation Span Para Estilização de Texto no Android
 
Fontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e UsoFontes em XML, Android O. Configuração e Uso
Fontes em XML, Android O. Configuração e Uso
 
Eclipse uml
Eclipse umlEclipse uml
Eclipse uml
 
Programação Android - Básico
Programação Android - BásicoProgramação Android - Básico
Programação Android - Básico
 
Java Fx Guia De IntroduçãO
Java Fx Guia De IntroduçãOJava Fx Guia De IntroduçãO
Java Fx Guia De IntroduçãO
 
Introdução ao Desenvolvimento Android
Introdução ao Desenvolvimento AndroidIntrodução ao Desenvolvimento Android
Introdução ao Desenvolvimento Android
 
Apostila Android
Apostila AndroidApostila Android
Apostila Android
 
#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5#DeveloperDay - Front-end API html5
#DeveloperDay - Front-end API html5
 
Android Aula 5
Android Aula 5Android Aula 5
Android Aula 5
 

Semelhante a PhotoView Android Para a Completa Implementação de Zoom

VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
Dextra Sistemas / Etec Itu
 
Aula maps 23_2
Aula maps 23_2Aula maps 23_2
Aula maps 23_2
rafa nonato
 
1503 - Revista - Angular.pdf
1503 - Revista - Angular.pdf1503 - Revista - Angular.pdf
1503 - Revista - Angular.pdf
joaoJunior93
 
Bada
BadaBada
Aprendendo Angular com a CLI
Aprendendo Angular com a CLIAprendendo Angular com a CLI
Aprendendo Angular com a CLI
Vanessa Me Tonini
 
Aula02 android hands_on
Aula02 android hands_onAula02 android hands_on
Aula02 android hands_on
Roberson Alves
 
Watch face gdg jf
Watch face gdg jfWatch face gdg jf
Watch face gdg jf
Rafael Alves Feliciano
 
Apostila adobe premiere_portugues_www.clickcursos.net_
Apostila adobe premiere_portugues_www.clickcursos.net_Apostila adobe premiere_portugues_www.clickcursos.net_
Apostila adobe premiere_portugues_www.clickcursos.net_
BomSoul
 
Widget
WidgetWidget
Widget
grupoass
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
Julia469065
 
Palm e web os
Palm e web osPalm e web os
Palm e web os
Ricardo Ogliari
 
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma práticaAprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
Josué Rockefeller
 
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma práticaAprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
Josué Rockefeller
 
APIs gerenciadas de ponta a ponta - construção
APIs gerenciadas de ponta a ponta - construçãoAPIs gerenciadas de ponta a ponta - construção
APIs gerenciadas de ponta a ponta - construção
Fábio Rosato
 
Android Aula 3
Android Aula 3Android Aula 3
Android Aula 3
Erisvaldo Junior
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
Daniel Paz
 
JavaFx - Guia Prático
JavaFx - Guia PráticoJavaFx - Guia Prático
JavaFx - Guia Prático
danielfc
 
Como criar interfaces gráficas com android
Como criar interfaces gráficas com androidComo criar interfaces gráficas com android
Como criar interfaces gráficas com android
Ricardo Ogliari
 
Parse Push Notification - O Lado negro da força
Parse Push Notification - O Lado negro da forçaParse Push Notification - O Lado negro da força
Parse Push Notification - O Lado negro da força
Rudson Lima
 
Instalacao eclipse-servidor-tomcat
Instalacao eclipse-servidor-tomcatInstalacao eclipse-servidor-tomcat
Instalacao eclipse-servidor-tomcat
Clayton de Almeida Souza
 

Semelhante a PhotoView Android Para a Completa Implementação de Zoom (20)

VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
VSSUMMIT 2023 - Como partir do zero e entregar uma API Profissional com .NET ...
 
Aula maps 23_2
Aula maps 23_2Aula maps 23_2
Aula maps 23_2
 
1503 - Revista - Angular.pdf
1503 - Revista - Angular.pdf1503 - Revista - Angular.pdf
1503 - Revista - Angular.pdf
 
Bada
BadaBada
Bada
 
Aprendendo Angular com a CLI
Aprendendo Angular com a CLIAprendendo Angular com a CLI
Aprendendo Angular com a CLI
 
Aula02 android hands_on
Aula02 android hands_onAula02 android hands_on
Aula02 android hands_on
 
Watch face gdg jf
Watch face gdg jfWatch face gdg jf
Watch face gdg jf
 
Apostila adobe premiere_portugues_www.clickcursos.net_
Apostila adobe premiere_portugues_www.clickcursos.net_Apostila adobe premiere_portugues_www.clickcursos.net_
Apostila adobe premiere_portugues_www.clickcursos.net_
 
Widget
WidgetWidget
Widget
 
435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf435142330-Guia-Completo-React-Js.pdf
435142330-Guia-Completo-React-Js.pdf
 
Palm e web os
Palm e web osPalm e web os
Palm e web os
 
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma práticaAprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
 
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma práticaAprenda a usar os recursos “câmera” do android, criando um app de forma prática
Aprenda a usar os recursos “câmera” do android, criando um app de forma prática
 
APIs gerenciadas de ponta a ponta - construção
APIs gerenciadas de ponta a ponta - construçãoAPIs gerenciadas de ponta a ponta - construção
APIs gerenciadas de ponta a ponta - construção
 
Android Aula 3
Android Aula 3Android Aula 3
Android Aula 3
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
 
JavaFx - Guia Prático
JavaFx - Guia PráticoJavaFx - Guia Prático
JavaFx - Guia Prático
 
Como criar interfaces gráficas com android
Como criar interfaces gráficas com androidComo criar interfaces gráficas com android
Como criar interfaces gráficas com android
 
Parse Push Notification - O Lado negro da força
Parse Push Notification - O Lado negro da forçaParse Push Notification - O Lado negro da força
Parse Push Notification - O Lado negro da força
 
Instalacao eclipse-servidor-tomcat
Instalacao eclipse-servidor-tomcatInstalacao eclipse-servidor-tomcat
Instalacao eclipse-servidor-tomcat
 

Mais de Vinícius Thiengo

7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
Vinícius Thiengo
 
5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler
Vinícius Thiengo
 
True Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no AndroidTrue Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no Android
Vinícius Thiengo
 
Utilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no AndroidUtilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no Android
Vinícius Thiengo
 
Chips Android, Quando e Como Utilizar
Chips Android, Quando e Como UtilizarChips Android, Quando e Como Utilizar
Chips Android, Quando e Como Utilizar
Vinícius Thiengo
 
Freelancer Android
Freelancer AndroidFreelancer Android
Freelancer Android
Vinícius Thiengo
 
Definindo Fontes em Aplicativos Android
Definindo Fontes em Aplicativos AndroidDefinindo Fontes em Aplicativos Android
Definindo Fontes em Aplicativos Android
Vinícius Thiengo
 
Material Design
Material DesignMaterial Design
Material Design
Vinícius Thiengo
 

Mais de Vinícius Thiengo (8)

7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
7 Livros Que Não São de TI, Mas Que Um Programador Deveria Ler
 
5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler5 livros que não são de TI, mas que um desenvolvedor deveria ler
5 livros que não são de TI, mas que um desenvolvedor deveria ler
 
True Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no AndroidTrue Time API Para Data e Horário NTP no Android
True Time API Para Data e Horário NTP no Android
 
Utilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no AndroidUtilizando Intenções Para Mapas de Alta Qualidade no Android
Utilizando Intenções Para Mapas de Alta Qualidade no Android
 
Chips Android, Quando e Como Utilizar
Chips Android, Quando e Como UtilizarChips Android, Quando e Como Utilizar
Chips Android, Quando e Como Utilizar
 
Freelancer Android
Freelancer AndroidFreelancer Android
Freelancer Android
 
Definindo Fontes em Aplicativos Android
Definindo Fontes em Aplicativos AndroidDefinindo Fontes em Aplicativos Android
Definindo Fontes em Aplicativos Android
 
Material Design
Material DesignMaterial Design
Material Design
 

PhotoView Android Para a Completa Implementação de Zoom

  • 2. Android PhotoView A PhotoView API é uma daquelas APIs simples, mas que atendem a vários domínios de problema, exatamente como a Picasso API e o Retrofit, por exemplo. A diferença da PhotoView para com as APIs citadas anteriormente é que ela é ainda mais simples de ser incorporada a projetos Android e foi desenvolvida por um dos engenheiros do Google Android, Chris Banes. A PhotoView tem suporte a partir do Android 4, Donut. E apesar de oferecer algumas características extras, como a rotação de imagem, a proposta principal, zoom em imagem, é muito bem atendida, mesmo com o carregamento de imagens remotas.
  • 3. Instalação da API A API está presente no repositório JVM Jitpack. Logo, primeiro temos de adicionar esse repositório no Gradle Project Level, ou build.gradle (Project: NomeAplicativo): Depois é adicionar a referência a API no Gradle App Level, ou build.gradle (Module: app): Na época da construção deste conjunto de slides a versão mais atual e estável da API era a 2.1.4. Escolha sempre por utilizar a versão mais atual e estável.
  • 4. Carregamento de imagem com PhotoView A principal bandeira que faz com que a PhotoView API tenha mais de 13k estrelas no GitHub (isso é um forte indício de que a API tem alta qualidade) é a facilidade de uso. Veja o código de exemplo: A PhotoView é uma implementação mais robusta do ImageView, ela herda desta View. Logo, podemos utilizar todos os atributos possíveis no ImageView.
  • 5. Executando o projeto Android com o trecho de código anterior, temos: Clique aqui para abrir a animação
  • 6. O acesso a PhotoView via código também é simples, utilizando o método findViewById() ou então o ID da View seguindo a sintaxe do plugin kotlin-android- extensions:
  • 7. Carregamento remoto de imagem - Picasso API A princípio a única API de carregamento remoto de imagem que não tem suporte junto a PhotoView é a API Fresco, para driblar esta limitação, caso você realmente esteja em um projeto onde a Fresco API seja indispensável, a documentação da PhotoView indica a API PhotoDraweeView. As outras APIs de carregamento remoto funcionam sem problemas junto a PhotoView, ao menos as principais. A mais comum para esse tipo de tarefa é a Picasso. A seguir um XML PhotoView ainda sem uma imagem referenciada:
  • 8. Agora a referência a Picasso API direto do Gradle App Level, build.gradle (Module: app): Então a permissão de Internet no AndroidManifest.xml: E assim o código de carregamento de imagem via Picasso API:
  • 9. Executando o projeto com os códigos anteriormente apresentados, temos: Clique aqui para abrir a animação
  • 10. Trabalhando as escalas de zoom Se o domínio de problema do aplicativo em desenvolvimento exigir que as três escalas de zoom padrão sejam trabalhadas em outros valores, você consegue isso com as seguintes propriedades: • minimumScale: defini / obtém a escala mínima de zoom. O valor padrão é 1.0F, valor que representa a escala inicial, onde o zoom ainda não foi aplicado; • mediumScale: defini / obtém a segunda escala de zoom. O valor padrão é 1.75F; • maximumScale: defini / obtém a terceira escala de zoom. O valor padrão é 3.0F. Agora um PhotoView de exemplo:
  • 11. Então o código de alteração de escalas de zoom: Executando o projeto com os códigos anteriores, temos: Clique aqui para abrir a animação O método setScaleLevels() permiti que as três escalas sejam atualizadas em uma única invocação.
  • 12. Caso seja necessária a atualização da escala de zoom atual em imagem, utilize: • scale: propriedade que permiti obter / atualizar a escala atual de zoom no PhotoView alvo. Aqui a atualização vai gerar uma mudança brusca de escala de zoom. O valor aceito / retornado é do tipo Float; • setScale( escala_em_float, animacao_em_boolean ): método que permite definir a nova escala de zoom no PhotoView alvo, mas aqui é possível, em segundo argumento, informar se a animação de mudança de escala deve ou não ser aplicada. O valor true indica que sim, false indica que não. Segue código de exemplo de atualização de escala de zoom em imagem:
  • 13. Como informado em comentário do código anterior: scale e setScale() somente têm efeito depois que a PhotoView alvo já está renderizada em tela, por isso o código de exemplo é acompanhado de uma thread e um SystemClock.sleep(). Importante: o valor definido em scale ou em setScale() deve estar no range [minimumScale, maximumScale], caso contrário uma IllegalArgumentException será gerada. Executando o projeto com o trecho de código anterior, temos: Clique aqui para abrir a animação
  • 14. Listener de atualização de escala Para ouvir a cada mudança de fator de escala basta implementar a Interface OnScaleChangedListener como no código a seguir: Como informado em comentário, focusX e focusY somente terão a mudança de valor se o acionamento do zoom for em tela, em qualquer parte do PhotoView, não necessariamente na parte onde a imagem aparece.
  • 15. Verificação e duração de animação Para verificar ou então atualizar o status de zoom na PhotoView, utilize a propriedade isZoomable: Para trabalhar o tempo de duração da animação de zoom, utilize o método setZoomTransitionDuration(), veja a seguir:
  • 16. Com a PhotoView de teste a seguir: Podemos executar o código com delay de quatro segundos em animação de zoom: Clique aqui para abrir a animação
  • 17. Rotação da imagem Por algum motivo foi adicionada a API a funcionalidade de rotação de acordo com o grau definido. São dois métodos passíveis de serem utilizados: setRotationBy() e setRotationTo(). Acredite, ambos os métodos aguardam o mesmo tipo de argumento, graus de rotação em Float, e têm o mesmo código interno. Os métodos de rotação seguem a mesma regra de negócio que a propriedade e método de mudança de escala de zoom: somente terão efeitos visuais se invocados depois que a PhotoView já estiver renderizada em tela. A seguir uma PhotoView de exemplo:
  • 18. Então o código de rotação de imagem:
  • 19. Executando o projeto com os códigos anteriores, temos: Clique aqui para abrir a animação
  • 20. Listener de toque em imagem Para ouvir o toque / clique único em imagem, podemos implementar a Interface OnPhotoTapListener como a seguir: Note que o método onPhotoTap() somente é invocado se o toque na imagem for exatamente na área coberta por ela e não em toda a área coberta pela PhotoView, onde pode haver espaços não cobertos pela imagem.
  • 21. Listener de toque fora da imagem Também é possível ouvir ao toque / clique dentro da PhotoView, porém fora da área de cobertura da imagem, isso implementando a Interface OnOutsidePhotoTapListener como no código a seguir:
  • 22. Listener de toque na PhotoView Para ouvir ao toque ou clique em qualquer parte da PhotoView, com cobertura ou não da imagem carregada, é necessário implementar a Interface OnViewTapListener como a seguir:
  • 23. Listener de duplo toque, único toque e duplo toque seguido de ação Para ouvir ao toque duplo, ou ao toque único, incluindo o listener de ação pós toque duplo, podemos implementar a Interface GestureDetector.OnDoubleTap Listener: O método onSingleTapConfirmed() funciona exatamente com a mesma regra de negócio que o método onViewTap() de OnViewTapListener: o toque único precisa ocorrer dentro da PhotoView.
  • 24. Ouvindo ao evento de drag O listener de drag na imagem é tão sensível que até mesmo quando o drag não é passível de ser visualizado em tela, quando o zoom não foi ainda aplicado, esse listener é invocado. Antes de mostrar o código de listener de drag, vamos a um exemplo do que seria um drag junto ao componente PhotoView: Clique aqui para abrir a animação
  • 25. Então podemos ir ao código que implementa a Interface OnViewDragListener:
  • 26. Ouvindo a atualização da matriz da imagem Se em seu domínio de problema é preciso algum trabalho quando houver a atualização do objeto Matrix da imagem, para isso é possível implementar a Interface OnMatrixChangedListener como a seguir:
  • 27. Hackcode para ViewGroups problemáticos Alguns ViewGroups que implementam OnInterceptTouchEvent, como o ViewPager e o DrawerLayout, disparam exceções quando alguma PhotoView está dentro deles. O código hack para burlar esse problema é o seguinte:
  • 28. Note que o código do slide anterior é bem genérico, serve para qualquer ViewGroup problemático. Veja, por exemplo, as implementações de hackcode, direto da documentação oficial da PhotoView API, para: • ViewPager; • DrawerLayout.
  • 29. Pontos negativos • A documentação não mostra, detalhadamente, como obter o máximo da PhotoView, é preciso navegar pelos exemplos (sem comentários) para então entender a API por completo; • O nome da API é bem confuso em relação a proposta dela. Um rótulo como ZoomView certamente cairia melhor na API; • A funcionalidade de rotação de imagem poderia ser removida, pois não tem haver com a proposta de ser uma API simples para a aplicação de zoom. Ou: • É possível que a funcionalidade de rotação tenha sido adicionada devido ao problema que alguns devices Android têm depois que uma fotografia é realizada: a imagem é entregue invertida. Com os métodos de rotação seria simples resolver isso, porém na documentação não há nada informando o porquê da API de rotação. • A Interface OnSingleFlingListener quando em uso não trás nada diferente do que é conseguido com outras Interfaces da API PhotoView, Interfaces que têm um rótulo muito mais significativo em termos boa de leitura de código.
  • 30. Pontos positivos • Código muito simples para já conseguirmos a aplicação completa de zoom; • Possibilidade de atualização de níveis de escala e de duração do zoom; • Vários tipos de listeners que permitem o acionamento das mais variadas funções de acordo com o toque do usuário em View; • Possibilidade de trabalho com APIs de carregamento de imagens remotas.
  • 31. Conclusão Apesar do zoom ser uma funcionalidade simples e que desenvolvedores Android de primeira viagem possam imaginar já ser uma funcionalidade nativa no ImageView, por exemplo, na verdade não é. A API PhotoView faz o trabalho da melhor maneira possível: • Exigindo poucas linhas de código; • E entregando o zoom completo. Obviamente que sempre é possível obter ainda mais de APIs Android, mas a PhotoView tem realmente uma proposta de ser simples. Logo, seguindo as dicas da documentação, se você precisa de algo ainda mais robusto em termos de escala de imagem, tente a API Subsampling-Scale-Image-View.
  • 32. Fontes Conteúdo completo, em texto e em vídeo, no link a seguir: • https://www.thiengo.com.br/photoview-android-para-a-completa- implementacao-de-zoom Fonte: • https://github.com/chrisbanes/PhotoView
  • 33. Para estudo • Treinamento oficial: • Prototipagem Profissional de Aplicativos Android. • Meus livros: • Receitas Para Desenvolvedores Android; • Refatorando Para Programas Limpos. • Redes: • Udemy; • YouTube; • Facebook; • LinkedIn; • GitHub; • Twitter; • Google Plus. • Blog App.
  • 34. PhotoView Android Para a Completa Implementação de Zoom thiengo.com.br Vinícius Thiengo thiengocalopsita@gmail.com