YouTube

Got a YouTube account?

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

Korean subtitles

← Implementing Instructive Motion

Get Embed Code
6 Languages

Showing Revision 3 created 05/04/2018 by UJeon Kim.

  1. 유익한 도구 모션이 어떻게 보이는지 확인해 봅시다.
  2. 이번 예시에서는 저희는 꽉 차있는 화면에 있는 내용을 보려고 합니다.
  3. 시각적인 긴장감이 느껴지군요 저희는 이미지가 전체화면으로 보이게 하고 싶지만
  4. 그 부분에 더 많은 텍스트가 보이도록 하고 싶기도 합니다.
  5. 어쩌면 저희가 그 텍스트 내용을 바로 보여주고 싶을지도 모르죠.
  6. 저희가 할 수 있는건 이미지가 크게 보이도록 하는 방법밖엔 없지만
  7. 그러면 바로 본문이 올라와서 내용이 더 많이 있다는것을 알려주게 되죠.
  8. 이런 간단한 형식을 어떻게 구현했는지 봅시다.
  9. 유용한 모션에서 말이죠.
  10. 먼저 레이아웃과 함께 시작하게 됩니다.
  11. 이미지의 고정된 크기를 지정한 기본 틀 레이아웃 외에는 특별한게 없습니다.
  12. 그리고 스크롤 뷰 가 있네요.
  13. 선형 방식의 스크롤 뷰는 본문에 포함이 될 것이고
  14. 배경은 흰색이 되겠네요.
  15. 저희는 더 깔끔하게 보이기 위해 선형 레이아웃의 높이를 약간 더 높였습니다.
  16. 그 부분을 독특하게 만들기 위해서죠.
  17. 이제, 기본 스크롤 위치에서 여러분은 전체 이미지를 볼 수 있습니다.
  18. 하지만 본문 내용은 너무나 적죠.
  19. 이 문제를 해결하려면 스크롤 위치에 동적인 부분을 추가해야 하죠.
  20. 첫 화면이 열리게 되고 그 화면은 더 많은 내용을 보이게 될 것입니다.
  21. 이 부분에선 스크롤 뷰 에서 scrollY 를 움직이게 하고자
  22. ObjectAnimator를 사용 했네요.
  23. 저희는 ScrollView 에 있는 smoothScrollTo 기능을 사용할 수 있었지만
  24. 이 방법은 여러분들이 스크롤 애니메이션을 보다 효과적으로 다룰 수 있도록 합니다.
  25. 저희는 그 부분을 onEnterAnimationComplete 의 내부에서 시작하도록 했습니다.
  26. 애니메이션을 시작하기 전에 화면 전환이 먼저 끝나도록 하기 위해서요.
  27. 이 기술은 안드로이드 버전 5.0이거나 이후의 버전에서만 사용 가능하지만
  28. 여러분들은 이전 버전에서도 시작 딜레이를 넣음으로써 비슷하게 구현할 수 있습니다.
  29. 이 방법의 효과는 여러분들이 이미지의 프리뷰를 볼 수 있다는 겁니다.
  30. 그 내용을 읽기도 전인데 말이죠.
  31. 그리고 여러분들은 아마도 깨닫게 될 것 입니다.
  32. 내용을 더 읽거나 전체 이미지를 보기 위해선 스크롤을 빠르게 올려야 한다는 사실을 말이죠.