WEBVTT

00:00:00.510 --> 00:00:04.480
Vejamos como é a implementação
de movimento instrutivo.

00:00:04.480 --> 00:00:06.990
Neste exemplo, temos uma
imagem sem margens

00:00:06.991 --> 00:00:08.489
e um conteúdo abaixo dela.

00:00:08.490 --> 00:00:12.000
Há uma tensão aqui. 
Queremos mostrar a imagem completa,

00:00:12.000 --> 00:00:15.470
mas também indicar que
há mais texto disponível.

00:00:15.470 --> 00:00:16.920
Podemos querer mostrar também

00:00:16.921 --> 00:00:19.419
um pouco do conteúdo 
imediatamente.

00:00:19.420 --> 00:00:23.060
Podemos começar com
toda a imagem visível

00:00:23.060 --> 00:00:24.570
e depois deslizar imediatamente

00:00:24.571 --> 00:00:27.369
um pouco do texto para indicar
que há mais conteúdo.

00:00:27.670 --> 00:00:29.190
Vejamos como implementar

00:00:29.190 --> 00:00:32.530
esta ótima e simples forma 
de movimento instrutivo.

00:00:33.130 --> 00:00:34.690
Vamos começar com layout.

00:00:34.690 --> 00:00:38.780
Nada sofisticado aqui, apenas o layout
da estrutura com uma imagem de altura fixa

00:00:38.780 --> 00:00:40.480
e uma scroll view na frente dela.

00:00:40.480 --> 00:00:42.520
O layout linear
na scroll view

00:00:42.520 --> 00:00:46.080
conterá o texto e
um plano de fundo branco.

00:00:46.380 --> 00:00:49.590
Daremos ao layout linear uma
pequena elevação para tornar claro

00:00:49.590 --> 00:00:52.040
que é uma superfície distinta.

00:00:52.040 --> 00:00:55.040
Na posição de rolagem padrão,
vê-se a imagem completa,

00:00:55.040 --> 00:00:57.520
mas pouco conteúdo de texto.

00:00:57.520 --> 00:01:00.740
Precisamos animar a
posição de rolagem

00:01:00.740 --> 00:01:02.310
porque a tela abre-se primeiro

00:01:02.311 --> 00:01:06.509
para a posição que mostra
mais do conteúdo do texto.

00:01:06.610 --> 00:01:08.650
Aqui usamos um ObjectAnimator

00:01:08.650 --> 00:01:12.180
para animar a propriedade scrollY
da scroll view.

00:01:12.480 --> 00:01:16.030
Podemos usar o método smoothScrollTo
da scroll view,

00:01:16.030 --> 00:01:19.250
mas isso nos dá mais controle
sobre a animação.

00:01:19.250 --> 00:01:23.250
Começamos a animação dentro do
onEnterAnimationComplete

00:01:23.250 --> 00:01:25.310
para garantir que
a transição de janela

00:01:25.311 --> 00:01:27.909
termine primeiro, antes de começar
a animação.

00:01:27.910 --> 00:01:31.100
Isto só está disponível no
Android 5.0 e posterior,

00:01:31.100 --> 00:01:33.020
mas pode ser simulado
em versões anteriores

00:01:33.021 --> 00:01:34.919
com um atraso de início.

00:01:34.920 --> 00:01:38.090
Obtém-se uma visualização da
imagem

00:01:38.090 --> 00:01:39.520
antes de iniciar a leitura do texto.

00:01:39.720 --> 00:01:42.440
Rapidamente você percebe
que pode rolar para cima

00:01:42.540 --> 00:01:45.950
e ver a imagem completa novamente
ou para baixo e ler o texto.