Nested scrolling: living life on the edge (DevFest Tokyo 2016)

Transcript

1. NESTED SCROLLING LIVING LIFE ON THE EDGE +ChrisBanes @chrisbanes
2. User swipes up, collapsing the AppBarLayout and scrolling the list
3. User swipes down, scrolling the list
4. User needs to swipe down again, to expand the AppBarLayout
5. The problem: Flinging does not transfer left over velocity
6. The goal: Flinging transfers velocity when it reaches the end
7. > NESTED SCROLLING: LIVING LIFE ON THE EDGE Nested Scrolling NESTED SCROLLING
8. Nested scrolling views was difficult
9. Nested scrolling views was difficult <ScrollView> <LinearLayout> <!-- Some content --> <ListView> <!-- More content which scrolls --> </ListView> </LinearLayout> </ScrollView>
11. <ScrollView> <LinearLayout> 
 </LinearLayout> </ScrollView>
12. <ScrollView> <LinearLayout> <ImageView /> </LinearLayout> </ScrollView>
13. <ScrollView> <LinearLayout> <ImageView /> <ListView /> </LinearLayout> </ScrollView>
14. Nested scrolling was created to solve this
15. An event system where scroll events are dispatched up the view hierarchy
16. ScrollView LinearLayout ImageView ListView
17. void setNestedScrollingEnabled(boolean enabled); boolean isNestedScrollingEnabled(); boolean startNestedScroll(int axes); boolean hasNestedScrollingParent(); boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed,
 int[] offsetInWindow); boolean dispatchNestedScroll(int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow); boolean dispatchNestedPreFling(float velocityX, float velocityY); boolean dispatchNestedFling(float velocityX, float velocityY,
 boolean consumed); void stopNestedScroll(); Sending
18. void setNestedScrollingEnabled(boolean enabled); boolean isNestedScrollingEnabled(); boolean startNestedScroll(int axes); boolean hasNestedScrollingParent(); boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed,
 int[] offsetInWindow); boolean dispatchNestedScroll(int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow); boolean dispatchNestedPreFling(float velocityX, float velocityY); boolean dispatchNestedFling(float velocityX, float velocityY,
 boolean consumed); void stopNestedScroll(); Sending
19. boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed,
 int[] offsetInWindow); boolean dispatchNestedScroll(int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow); boolean dispatchNestedPreFling(float velocityX, float velocityY); boolean dispatchNestedFling(float velocityX, float velocityY,
 boolean consumed); Sending
20. boolean onStartNestedScroll(View child, View target,
 int nestedScrollAxes); void onNestedScrollAccepted(View child, View target,
 int nestedScrollAxes); void onStopNestedScroll(View target); int getNestedScrollAxes(); Receiving void onNestedPreScroll(View target, int dx, int dy, int[] consumed); void onNestedScroll(View target, int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed); boolean onNestedPreFling(View target, float velocityX,
 float velocityY); boolean onNestedFling(View target, float velocityX,
 float velocityY, boolean consumed);
21. boolean onStartNestedScroll(View child, View target,
 int nestedScrollAxes); void onNestedScrollAccepted(View child, View target,
 int nestedScrollAxes); void onStopNestedScroll(View target); int getNestedScrollAxes(); Receiving void onNestedPreScroll(View target, int dx, int dy, int[] consumed); void onNestedScroll(View target, int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed); boolean onNestedPreFling(View target, float velocityX,
 float velocityY); boolean onNestedFling(View target, float velocityX,
 float velocityY, boolean consumed);
22. Receiving void onNestedPreScroll(View target, int dx, int dy, int[] consumed); void onNestedScroll(View target, int dxConsumed, int dyConsumed,
 int dxUnconsumed, int dyUnconsumed); boolean onNestedPreFling(View target, float velocityX,
 float velocityY); boolean onNestedFling(View target, float velocityX,
 float velocityY, boolean consumed);
23. Pre vs Non-Pre
24. Pre vs Non-Pre Pre-scroll events allow a parent to intercept and consume the event
25. Pre vs Non-Pre The view then scrolls the remainder Pre-scroll events allow a parent to intercept and consume the event
26. Pre vs Non-Pre Scroll events allow the parent to observe what the view scrolled The view then scrolls the remainder Pre-scroll events allow a parent to intercept and consume the event
27. Let’s see how it happens…
28. ACTION_DOWN
29. ACTION_DOWN // Initialise VelocityTracker and add event mVelocityTracker.addMovement(ev); int y = ev.getY(); // 1020 mInitialMotionY = y; mLastMotionY = y; startNestedScroll(SCROLL_AXIS_VERTICAL);
30. ACTION_DOWN startNestedScroll(SCROLL_AXIS_VERTICAL); // Initialise VelocityTracker and add event mVelocityTracker.addMovement(ev); int y = ev.getY(); // 1020 mInitialMotionY = y; mLastMotionY = y;
31. ACTION_DOWN startNestedScroll(SCROLL_AXIS_VERTICAL); @Override boolean onStartNestedScroll(View child, View target, int axes) { // child == LinearLayout // target == ListView // axes == SCROLL_AXIS_VERTICAL return true; }
32. ACTION_DOWN startNestedScroll(SCROLL_AXIS_VERTICAL); @Override void onNestedScrollAccepted(View child, View target, int axes) { // child == LinearLayout // target == ListView // axes == SCROLL_AXIS_VERTICAL }
33. ACTION_MOVE
34. ACTION_MOVE int[] mScrollConsumed = new int[2]; int y = ev.getY(); // 1010 int dy = mLastMotionY - y; // -10 if (dispatchNestedPreScroll(0, dy, mScrollConsumed, ...)) { dy -= mScrollConsumed[1]; } // INSERT Move children by remaining dy // TODO call dispatchNestedScroll()
35. ACTION_MOVE int[] mScrollConsumed = new int[2]; int y = ev.getY(); // 1010 int dy = mLastMotionY - y; // -10 if (dispatchNestedPreScroll(0, dy, mScrollConsumed, ...)) { dy -= mScrollConsumed[1]; } // INSERT Move children by remaining dy // TODO call dispatchNestedScroll()
36. ACTION_MOVE @Override void onNestedPreScroll(View target, int dx, int dy, int[] consumed) { // dx = 0, dy = -10, consumed = int[2] int amountWeConsume = doSomethingWithPreScroll(dy); // consumed[0] = y, consumed[1] = x consumed[1] = amountWeConsume; } dispatchNestedPreScroll(0, dy, mScrollConsumed, ...)
37. ACTION_MOVE @Override void onNestedPreScroll(View target, int dx, int dy, int[] consumed) { // dx = 0, dy = -10, consumed = int[2] int amountWeConsume = doSomethingWithPreScroll(dy); // consumed[0] = y, consumed[1] = x consumed[1] = amountWeConsume; } dispatchNestedPreScroll(0, dy, mScrollConsumed, ...) // -3
38. ACTION_MOVE int[] mScrollConsumed = new int[2]; int y = ev.getY(); // 1010 int dy = mLastMotionY - y; // -10 if (dispatchNestedPreScroll(0, dy, mScrollConsumed, ...)) { dy -= mScrollConsumed[1]; } // INSERT Move children by remaining dy // TODO call dispatchNestedScroll() // -3 remember // dy = -7
39. ACTION_MOVE int[] mScrollConsumed = new int[2]; int y = ev.getY(); // 1010 int dy = mLastMotionY - y; // -10 if (dispatchNestedPreScroll(0, dy, mScrollConsumed, ...)) { dy -= mScrollConsumed[1]; } // INSERT Move children by remaining dy // TODO call dispatchNestedScroll()
40. ACTION_MOVE // INSERT Move children by remaining dy dispatchNestedScroll(0, dy, 0, unconsumedY, ...) @Override void onNestedScroll(View target,
 int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { // Do something if you wish }
41. ACTION_UP
42. ACTION_UP float velY = ...; if (!dispatchNestedPreFling(0, velY)) { // Parent hasn't consumed fling, lets fling // and let the parent observe dispatchNestedFling(0, velY, ...); fling(velY); } stopNestedScroll();
43. ACTION_UP float velY = ...; if (!dispatchNestedPreFling(0, velY)) { // Parent hasn't consumed fling, lets fling // and let the parent observe dispatchNestedFling(0, velY, ...); fling(velY); } stopNestedScroll();
44. ACTION_UP dispatchNestedPreFling(0, velY); @Override boolean onNestedPreFling(View target, float velX, float velY) { // return true to consume the whole fling, // false to let the view handle it }
45. ACTION_UP float velY = ...; if (!dispatchNestedPreFling(0, velY)) { // Parent hasn't consumed fling, lets fling // and let the parent observe dispatchNestedFling(0, velY, ...); fling(velY); } stopNestedScroll();
46. ACTION_UP float velY = ...; if (!dispatchNestedPreFling(0, velY)) { // Parent hasn't consumed fling, lets fling // and let the parent observe dispatchNestedFling(0, velY, ...); fling(velY); } stopNestedScroll();
47. The problem: Flinging does not transfer left over velocity
48. The problem: Nested flinging does not allow interception like scrolling
49. > NESTED SCROLLING: LIVING LIFE ON THE EDGE Indirect Nested Scrolling INDIRECT NESTED SCROLLING Work in progress
50. Nested scrolling
51. Direct nested scrolling
52. Direct nested scrolling User directly touching screen
53. User not directly touching screen Indirect nested scrolling
54. Settling from fling Setting scroll position programmatically Scrolling from KeyEvents ?
55. API is mostly the same as nested scrolling
56. void setNestedIndirectScrollingEnabled(boolean enabled); boolean isNestedIndirectScrollingEnabled(); boolean startNestedIndirectScroll(int axes); boolean dispatchNestedIndirectPreScroll(int dx, int dy,
 int[] consumed); boolean dispatchNestedIndirectScroll(int dxConsumed,
 int dyConsumed, int dxUnconsumed, int dyUnconsumed); boolean hasNestedIndirectScrollingParent(); void stopNestedIndirectScroll(); Sending
57. boolean onStartNestedIndirectScroll(View child, View target,
 int axes); void onNestedIndirectScrollAccepted(View child, View target,
 int axes); void onNestedIndirectPreScroll(View target, int dx, int dy,
 int[] consumed); void onNestedIndirectScroll(View target, int dxConsumed,
 int dyConsumed, int dxUnconsumed, int dyUnconsumed); void onStopNestedIndirectScroll(View child); Receiving
58. Fling API is mostly the same as nested scrolling
59. Fling API is mostly the same as nested scrolling Works with nested scrolling
61. startNestedScroll(...) ACTION_DOWN
62. dispatchNestedPreScroll(...) dispatchNestedScroll(...) ACTION_MOVE
63. ACTION_MOVE
64. stopNestedScroll() ACTION_UP fling() startNestedIndirectScroll(...) ↳
65. dispatchNestedIndirectPreScroll(...) dispatchNestedIndirectScroll(...)
66. stopNestedIndirectScroll()
67. Full demo
68. Over and out… +ChrisBanes @chrisbanes