Mastering Coordinator Layout

If you ever used Collapsing Toolbar you also had to use Coordinator Layout. But, did you know that Coordinator Layout can be used to implement custom advanced View interactions? We are going to go through a real-life example and see how awesome Coordinator Layout is.

Transcript

1. Coordinator Layout in depth DOMAGOJ KORMAN
2. 01 COORDINATOR LAYOUT?
3. COORDINATOR LAYOUT Super-powered FrameLayout
4. BEHAVIOR Implements interactions on child views
5. // React on view changes layoutDependsOn(); onDependentViewChanged(); // Touch events onInterceptTouchEvent(); onTouchEvent(); // Scroll events onNestedPreScroll(); onNestedScroll(); // Fling events onNestedPreFling(); onNestedFling();
6. val avatarViewLp = avatarView.layoutParams as CoordinatorLayout.LayoutParams avatarViewLp.behavior = AvatarBehavior()
7. 02 REAL LIFE EXAMPLE
9. 03 PREPARE LAYOUT
10. DEPENDENCIES
11. layoutDependsOn(); onMeasureChild(); onDependentViewChanged();
12. fun layoutDependsOn( parent: CoordinatorLayout?, child: ImageView?, dependency: View?) : Boolean { return R.id.toolbar == dependency?.id }
13. AVATAR TOOLBAR NAME RECYCLER F T F fun layoutDependsOn( parent: CoordinatorLayout?, child: ImageView?, dependency: View?) : Boolean { return R.id.toolbar == dependency?.id }
14. fun layoutDependsOn( parent: CoordinatorLayout?, child: ImageView?, dependency: View?) : Boolean { return R.id.toolbar == dependency?.id }
15. RESIZE RECYCLER
16. layoutDependsOn(); onMeasureChild(); onDependentViewChanged();
17. override fun onMeasureChild( parent: CoordinatorLayout?, child: RecyclerView?, parentWidthMeasureSpec: Int, widthUsed: Int, parentHeightMeasureSpec: Int, heightUsed: Int): Boolean { //Calculate new view height ... parent.onMeasureChild(child, parentWidthMeasureSpec, widthUsed, newHeightMeasureSpec, heightUsed) return true }
18. TRANSLATE RECYCLER
19. OFFSET WHOLE LAYOUT
20. POSITION AVATAR AND NAME
21. layoutDependsOn(); onMeasureChild(); onDependentViewChanged();
22. override fun onDependentViewChanged( parent: CoordinatorLayout?, child: ImageView?, dependency: View?): Boolean { // MATH SKILLS! child.layoutParams = lp child.y = newY child.x = newX return true }
23. 04 REACT TO SCROLL
24. override fun onStartNestedScroll(…): Boolean { return true }
25. override fun onNestedPreScroll( coordinatorLayout: CoordinatorLayout, child: RecyclerView, target: View, dx: Int, dy: Int, consumed: IntArray, type: Int) { //Animate layout changes based on DY scroll(coordinatorLayout, child, dy) }
27. 05 LET’S FIX IT
28. override fun onNestedPreScroll( coordinatorLayout: CoordinatorLayout, child: RecyclerView, target: View, dx: Int, dy: Int, consumed: IntArray, type: Int) { //Animate layout changes based on DY consumed[1] = scroll(coordinatorLayout, child, dy) }
30. 06 WHAT ABOUT FLING?
32. override fun onNestedPreFling( coordinatorLayout: CoordinatorLayout, child: RecyclerView, target: View, velocityX: Float, velocityY: Float): Boolean override fun onNestedFling( coordinatorLayout: CoordinatorLayout, child: RecyclerView, target: View, velocityX: Float, velocityY: Float, consumed: Boolean): Boolean
33. override fun onNestedPreScroll( coordinatorLayout: CoordinatorLayout, child: RecyclerView, target: View, dx: Int, dy: Int, consumed: IntArray, type: Int) { //Animate layout changes based on DY consumed[1] = scroll(coordinatorLayout, child, dy) }
34. 07 BACK TO THE START
35. override fun onInterceptTouchEvent( parent: CoordinatorLayout, child: RecyclerView, ev: MotionEvent?): Boolean override fun onTouchEvent( parent: CoordinatorLayout, child: RecyclerView, ev: MotionEvent?): Boolean
36. SCROLLER Allows you to manually handle Fling gesture
37. SCROLLER void fling(...) boolean computeScrollOffset() int getCurrY() boolean isFinished()
38. SCROLLER void fling(...) boolean computeScrollOffset() int getCurrY() boolean isFinished()
39. SCROLLER void fling(...) boolean computeScrollOffset() int getCurrY() boolean isFinished()
40. SCROLLER void fling(...) boolean computeScrollOffset() int getCurrY() boolean isFinished()
41. GESTURE DETECTOR Easily detect User gestures - Scroll, Fling
42. override fun onDown(e: MotionEvent): Boolean { return true }
43. override fun onScroll( e1: MotionEvent, e2: MotionEvent, distanceX: Float, distanceY: Float): Boolean { isScrolling = true scroll(distanceY.toInt()) return true }
44. override fun onFling( e1: MotionEvent, e2: MotionEvent, velocityX: Float, velocityY: Float): Boolean { fling(velocityY) return true }
45. override fun onInterceptTouchEvent(...): Boolean { gestureDetector.onTouchEvent(ev) return isScrolling } override fun onTouchEvent(...): Boolean { val eventConsumed = detector.onTouchEvent(ev) if (ev?.action == MotionEvent.ACTION_UP) { isScrolling = false } return eventConsumed }
46. override fun onInterceptTouchEvent(...): Boolean { gestureDetector.onTouchEvent(ev) return isScrolling } override fun onTouchEvent(...): Boolean { val eventConsumed = detector.onTouchEvent(ev) if (ev?.action == MotionEvent.ACTION_UP) { isScrolling = false } return eventConsumed }
47. override fun onInterceptTouchEvent(...): Boolean { gestureDetector.onTouchEvent(ev) return isScrolling } override fun onTouchEvent(...): Boolean { val eventConsumed = detector.onTouchEvent(ev) if (ev?.action == MotionEvent.ACTION_UP) { isScrolling = false } return eventConsumed }
48. override fun onInterceptTouchEvent(...): Boolean { gestureDetector.onTouchEvent(ev) return isScrolling } override fun onTouchEvent(...): Boolean { val eventConsumed = detector.onTouchEvent(ev) if (ev?.action == MotionEvent.ACTION_UP) { isScrolling = false } return eventConsumed }
50. 08 CONCLUSION
51. COORDINATOR LAYOUT IS AWESOME • Dynamically react to dependant View change • Allows implementation of custom Animations
 • Multiple approaches when creating Animations
52. REFERENCE https://github.com/domagojkorman/CoordinatorLayoutExample
53. Visit infinum.co or find us on social networks: infinum.co infinumco infinumco infinum Any questions?