Korean subtitles

← 02-12 Fixing_Overdraw_with_Canvas_API

02-12 Fixing_Overdraw_with_Canvas_API

Get Embed Code
13 Languages

Showing Revision 12 created 05/08/2016 by nc_translator1.

  1. 좋아요
    Android Studio로 돌아왔어요
  2. DroidCardsView의 소스 코드를 검토 중입니다
  3. DroidCardsView는 커스텀 뷰라는 점 다시 말씀드립니다
  4. 전에 말씀드렸다시피
    바로 이 커스텀 뷰에서 카드를 쌓고 있습니다
  5. 다시 말해 각 카드는 고유의 비트맵이 있어요
  6. 그리고 onDraw() 메소드를 오버라이딩해서 화면에 카드를 그립니다
  7. 기억해주세요
    onDraw() 메소드를 오버라이딩하면
  8. 안드로이드는 이 뷰의 렌더링을 최적화하지 못해요
  9. 그래서 여러분께서 직접 카드들의 clipping을 해주어야 해요
  10. 카드의 최종 모습을 파악해
    불필요한 overdraw를 방지하기 위해서 말이죠
  11. 다행히 Canvas API는
  12. 저희가 카드를 더 효율적으로 그리는데
    필요한 메소드를 제공해줍니다
  13. 참조 문서를 봐주세요
  14. Canvas.clipRect() 메소드로 코드를 개선해볼게요
  15. 4개의 부동 소수점 값을 매개 변수로 받는 유형을 사용할 거예요
  16. Android Studio로 돌아왔습니다
  17. 각 카드가 그려지는 방법을 수정해서 overdraw를 줄여보겠습니다
  18. Android Studio에 있는 비교 창 기능을 켜놓을게요
  19. 비교 창을 통해 코드의 수정 전과 후를 비교하실 수 있어요
  20. 지금 보이시는 게 비교 창입니다
  21. 그럼 저희가 오버라이딩하는
    onDraw() 메소드를 집중적으로 볼게요
  22. 수정하기 전 for 루프는 왼쪽에 있습니다
  23. 하지만 수정할 코드는 오른쪽에 있으니 여기에 집중할게요
  24. 이제 카드 생성을 한 번씩 반복할 때마다 개선된 점을 볼 거예요
  25. 첫째로 카드의 위치를 파악합니다
  26. 다음 canvas.save() 함수를 호출해요
  27. 현재 canvas의 상태를 저장하는 함수죠
  28. 다시 말해
  29. clipRect API를 적용하기 전의 화면의 상태를 보관하는 겁니다
  30. 그리고 여기 이 clipRect() 메소드를 부르면
  31. 단순하게 설명드리자면 테두리를 설정하는 거예요
  32. 이 매개 변수들을 시스템에게 전달해
  33. 카드에서 저희가 보고 싶은 부분만 그리라고 알려주는 거예요
  34. 선택하지 않은 부분은 당연히 보이지 않겠죠
  35. 그럼 카드에서 저희가 제한한
    구역 안에 있는 부분만 출력됩니다
  36. 마지막으로 canvas.restore()을 호출합니다
  37. Canvas.restore()는 canvas를
    clipping하기 전 상태로 되돌립니다
  38. 쉽게 말해서
  39. clipRect를 선언했을 때 설정한 제한 구역을 풀어주는 거예요
  40. 가장 위에 있는 카드를 제외한
    나머지 카드에 대해서 루프를 돌려요
  41. 가장 위에 있는 마지막 카드는
    다른 카드들과 다른 방식으로 처리됩니다
  42. 마지막 카드는 clipping이 필요하지 않으니
  43. 카드 전체를 그릴 겁니다
  44. 여기 문장을 보시면 아시겠죠
  45. 좋아요 수정한 코드를 빌드하고
  46. overdraw가 줄었는지 한번 볼게요
  47. 멋지네요
  48. 보시다시피 overdraw가 많이 줄었어요
  49. 커스텀 뷰를 사용할 때 Canvas API를 사용하면
  50. 간단한 방법으로 렌더링 효율성을 향상시킬 수 있다는 점을
    이해하셨길 바라요
  51. 그리고 혹시 Canvas API를 더 배우고 싶으시면
  52. Instructor Notes에 제공된 참조 문서 원본을 꼭 확인하세요
  53. 이런 뷰는 특별하고 주목을 이끄는 UX를 만들 때 매우 좋아요
  54. 하지만 시스템에게 힌트를 줘야 한다는 점 잊지 마세요
  55. 그래야지 안드로이드가 여러분의 뷰를
    효율적으로 렌더링 할 수 있으니까요
  56. 커스텀 뷰를 사용하실 땐 꼭 overdraw를 확인하시고
  57. 여러분의 친구인 clipRect() 메소드를 꼭 찾아주세요
  58. 좋아요
    수고 많으셨어요
  59. 이제 콜트와 성능에 대해 더 배워볼게요