대구 SWCC 에서 발표한 자료입니다.

1. Android

2. Custom

3. View
Staggered View, Facebook Custom View
오픈소스를 활용한

4. 오늘 할 이야기는..?
2 Yongbin, Cha
Android

5. Custom

6. View
다양한 Android Custom View 사례
Custom View Open Source 소개
Custom View - (2) Pinterest View
Custom View - (1) Facebook View
2015 Daegu SWCC Seminar

7. Android Custom ListView
3 Yongbin, Cha
그냥.. Android Custom ListView라고 했을때..
이런 뷰만 알고 있었다면..?
2015 Daegu SWCC Seminar

8. 다양한 Android Custom View 사례
4 Yongbin, Cha2015 Daegu SWCC Seminar

9. 5 Yongbin, Cha
“이미지를 카드 형식으로 보여주는 View”
2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

10. 6 Yongbin, Cha2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

11. 7 Yongbin, Cha
“직접 컨텐츠 사진을 제작하여 Custom 하게 보여주는 View”
2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

12. 8 Yongbin, Cha2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

13. 9 Yongbin, Cha
“사진의 사이즈들을 적당하게 조절하여 잘라 보여주는 View”
2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

14. 10 Yongbin, Cha2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

15. 11 Yongbin, Cha
“사진의 비율에 맞게 리스트를 구성하는 View”
2015 Daegu SWCC Seminar
다양한 Android Custom View 사례

16. 12 Yongbin, Cha
Custom View Open Source 소개
https://github.com/etsy/AndroidStaggeredGrid
2015 Daegu SWCC Seminar

17. 13 Yongbin, Cha
https://github.com/etsy/AndroidStaggeredGrid
2015 Daegu SWCC Seminar
“ support v7에서 StaggeredGridLayoutManager
제공으로 라이브러리 지원이 중지 ”
Custom View Open Source 소개

18. 14 Yongbin, Cha
https://github.com/lucasr/twoway-view/
List Gird
Spannable GirdStaggered
2015 Daegu SWCC Seminar
Custom View Open Source 소개

19. 15 Yongbin, Cha
https://github.com/lucasr/twoway-view/
List Gird
Spannable GirdStaggered
2015 Daegu SWCC Seminar
“ Recylerview를 이용한 다양한 레이아웃 관리”
Custom View Open Source 소개

20. 16 Yongbin, Cha
Custom View - (1) Facebook View
Facebook Custom View
- 리스트 하나에 많은 사진
- 적절한 사진 비율도 유지
2015 Daegu SWCC Seminar

21. 17 Yongbin, Cha2015 Daegu SWCC Seminar
Linear Layout
Profile Pic
Text View
Link Text
Image
Attachment
Profile Name
Timestamp
Status Message
Linear Layout
사진 수에 따라
어떻게 보여줄까?
사진 수가 하나일 경우
사진 수가 두 개일 경우
사진 수가 세 개 이상일 경우
3
Custom View - (1) Facebook View

22. 18 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View

23. 19 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View

24. 20 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View

25. 21 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View

26. 22 Yongbin, Cha2015 Daegu SWCC Seminar
Text View
Custom View - (1) Facebook View

27. 23 Yongbin, Cha2015 Daegu SWCC Seminar
Text View
Custom View - (1) Facebook View

28. 24 Yongbin, Cha2015 Daegu SWCC Seminar
Text View
Custom View - (1) Facebook View

29. 25 Yongbin, Cha2015 Daegu SWCC Seminar
Text View
Custom View - (1) Facebook View

30. 26 Yongbin, Cha2015 Daegu SWCC Seminar
Text View
Open Source 라이브러리를 이용해 여러 사진에 대한 대응을 하자
Custom View - (1) Facebook View

31. 27 Yongbin, Cha2015 Daegu SWCC Seminar
Text View
Custom View - (1) Facebook View

32. 28 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View
items 를 배치할 영역을 설정
어떤 Layout Manager 를 사용할 건지 결정

33. 29 Yongbin, Cha2015 Daegu SWCC Seminar
어떻게 작동하는 걸까?
Custom View - (1) Facebook View

34. 30 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View
Data Model
Adapter
RecyclerView
SpannableGridLayoutManager
GridLayoutManager
StaggeredGridLayoutManager
ListLayoutManager

35. 31 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View

36. 32 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View
사진이 하나일 경우

37. 33 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View
사진이 두 개일 경우

38. 34 Yongbin, Cha2015 Daegu SWCC Seminar
Custom View - (1) Facebook View
사진이 세 개 이상일 경우

39. 352015 Daegu SWCC Seminar Yongbin, Cha
Staggered View 대표적인 예
- 사진 비율을 유지
- 리스트 하나에 사진 하나
Custom View - (2) Pinterest View

40. 362015 Daegu SWCC Seminar Yongbin, Cha
Android Support v7 RecyclerView
StaggeredGridLayoutManager
StaggeredGridLayoutManager?
http://developer.android.com/reference/android/
support/v7/widget/StaggeredGridLayoutManager.html

41. 372015 Daegu SWCC Seminar Yongbin, Cha
StaggeredGridLayoutManager?
RecyclerView Layout

42. 382015 Daegu SWCC Seminar Yongbin, Cha
StaggeredGridLayoutManager?
LinearLayoutManager GridLayoutManager StaggeredLayoutManager

43. 392015 Daegu SWCC Seminar Yongbin, Cha
StaggeredGridLayoutManager 를 이용한
Pinterest View
Custom View - (2) Pinterest View

44. 402015 Daegu SWCC Seminar Yongbin, Cha
Step 1 Adding the require Gradle dependencies
build.gradle
Custom View - (2) Pinterest View

45. 412015 Daegu SWCC Seminar Yongbin, Cha
Step 2 Adding Layout XML for Grid item
grid_item.xml
Image View
Text View
Custom View - (2) Pinterest View

46. 422015 Daegu SWCC Seminar Yongbin, Cha
Step 3 Adding Layout XML for Main Activity
activity_main.xml
Custom View - (2) Pinterest View

47. 432015 Daegu SWCC Seminar Yongbin, Cha
Step 4
PinterestAdapter.java
Add layout for EACH item in our list.
Custom View - (2) Pinterest View

48. 442015 Daegu SWCC Seminar Yongbin, Cha
Step 5 Create our RecyclerView’s adapter
PinterestAdapter.java
Custom View - (2) Pinterest View

49. 452015 Daegu SWCC Seminar Yongbin, Cha
Step 6 Attaching the Adapter
MainActivity.java
Custom View - (2) Pinterest View

50. 462015 Daegu SWCC Seminar Yongbin, Cha
Step 7 Staggered Grid Spacing Fix
SpacesItemDecoration.java
Custom View - (2) Pinterest View

51. 472015 Daegu SWCC Seminar Yongbin, Cha
Step 8 Add any value you wish for SpacesItemDecoration.
That value determines the amount of spacing.
MainActivity.java
Custom View - (2) Pinterest View

52. 482015 Daegu SWCC Seminar Yongbin, Cha
Step 9 Final Results
Custom View - (2) Pinterest View

53. Custom View - (2) Pinterest View
492015 Daegu SWCC Seminar Yongbin, Cha
Step 9 Final Results
DEMO

54. 50 Yongbin, Cha
https://github.com/ChaYongbin/customview
코드 전체를 보고 알고 싶다면..?
2015 Daegu SWCC Seminar
Custom View - (2) Pinterest View

55. 512015 Daegu SWCC Seminar Yongbin, Cha
Android Custom View - END
다양한 Android Custom View 사례 소개
Custom ListView Open Source 소개
Facebook Custom View 만들어 보기
StaggeredGrid View (Pinterest View) 만들어 보기
지금까지
에 대해서 알아보았습니다.

56. 522015 Daegu SWCC Seminar Yongbin, Cha
감사합니다~
Android Custom View - END