YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Portuguese, Brazilian subtitles

← Implementing Instructive Motion

Get Embed Code
6 Languages

Showing Revision 8 created 06/20/2016 by Udacity Robot.

  1. Vejamos como é a implementação
    de movimento instrutivo.
  2. Neste exemplo, temos uma
    imagem sem margens
  3. e um conteúdo abaixo dela.
  4. Há uma tensão aqui.
    Queremos mostrar a imagem completa,
  5. mas também indicar que
    há mais texto disponível.
  6. Podemos querer mostrar também
  7. um pouco do conteúdo
    imediatamente.
  8. Podemos começar com
    toda a imagem visível
  9. e depois deslizar imediatamente
  10. um pouco do texto para indicar
    que há mais conteúdo.
  11. Vejamos como implementar
  12. esta ótima e simples forma
    de movimento instrutivo.
  13. Vamos começar com layout.
  14. Nada sofisticado aqui, apenas o layout
    da estrutura com uma imagem de altura fixa
  15. e uma scroll view na frente dela.
  16. O layout linear
    na scroll view
  17. conterá o texto e
    um plano de fundo branco.
  18. Daremos ao layout linear uma
    pequena elevação para tornar claro
  19. que é uma superfície distinta.
  20. Na posição de rolagem padrão,
    vê-se a imagem completa,
  21. mas pouco conteúdo de texto.
  22. Precisamos animar a
    posição de rolagem
  23. porque a tela abre-se primeiro
  24. para a posição que mostra
    mais do conteúdo do texto.
  25. Aqui usamos um ObjectAnimator
  26. para animar a propriedade scrollY
    da scroll view.
  27. Podemos usar o método smoothScrollTo
    da scroll view,
  28. mas isso nos dá mais controle
    sobre a animação.
  29. Começamos a animação dentro do
    onEnterAnimationComplete
  30. para garantir que
    a transição de janela
  31. termine primeiro, antes de começar
    a animação.
  32. Isto só está disponível no
    Android 5.0 e posterior,
  33. mas pode ser simulado
    em versões anteriores
  34. com um atraso de início.
  35. Obtém-se uma visualização da
    imagem
  36. antes de iniciar a leitura do texto.
  37. Rapidamente você percebe
    que pode rolar para cima
  38. e ver a imagem completa novamente
    ou para baixo e ler o texto.