Browse Source

Basic hide show collapsing header

might want to tweak the hide show values later
Guy Carmeli 8 years ago
parent
commit
863abb28f4

+ 7
- 1
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTopBar.java View File

73
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) CollapsingTopBarBackground.MAX_HEIGHT);
73
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) CollapsingTopBarBackground.MAX_HEIGHT);
74
             titleBarAndContextualMenuContainer.addView(collapsingTopBarBackground, lp);
74
             titleBarAndContextualMenuContainer.addView(collapsingTopBarBackground, lp);
75
         }
75
         }
76
+        if (params.hasReactView()) {
77
+
78
+        }
76
     }
79
     }
77
 
80
 
78
     private void createReactView(CollapsingTopBarParams params) {
81
     private void createReactView(CollapsingTopBarParams params) {
79
         if (params.hasReactView()) {
82
         if (params.hasReactView()) {
80
             header = new CollapsingTopBarReactHeader(getContext(),
83
             header = new CollapsingTopBarReactHeader(getContext(),
81
-                    params.reactViewId,
84
+                    params,
82
                     new NavigationParams(Bundle.EMPTY),
85
                     new NavigationParams(Bundle.EMPTY),
83
                     scrollListener);
86
                     scrollListener);
84
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) ViewUtils.convertDpToPixel(params.reactViewHeight));
87
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) ViewUtils.convertDpToPixel(params.reactViewHeight));
117
         if (collapsingTopBarBackground != null) {
120
         if (collapsingTopBarBackground != null) {
118
             collapsingTopBarBackground.collapse(amount.get());
121
             collapsingTopBarBackground.collapse(amount.get());
119
         }
122
         }
123
+        if (header != null) {
124
+            header.collapse(amount.get());
125
+        }
120
     }
126
     }
121
 
127
 
122
     public void onScrollViewAdded(ScrollView scrollView) {
128
     public void onScrollViewAdded(ScrollView scrollView) {

+ 27
- 13
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTopBarReactHeader.java View File

10
 import com.facebook.react.uimanager.UIManagerModule;
10
 import com.facebook.react.uimanager.UIManagerModule;
11
 import com.facebook.react.uimanager.events.EventDispatcher;
11
 import com.facebook.react.uimanager.events.EventDispatcher;
12
 import com.reactnativenavigation.NavigationApplication;
12
 import com.reactnativenavigation.NavigationApplication;
13
+import com.reactnativenavigation.params.CollapsingTopBarParams;
13
 import com.reactnativenavigation.params.NavigationParams;
14
 import com.reactnativenavigation.params.NavigationParams;
15
+import com.reactnativenavigation.utils.ViewUtils;
14
 import com.reactnativenavigation.views.ContentView;
16
 import com.reactnativenavigation.views.ContentView;
15
 
17
 
16
 public class CollapsingTopBarReactHeader extends ContentView {
18
 public class CollapsingTopBarReactHeader extends ContentView {
19
     private int mTouchSlop;
21
     private int mTouchSlop;
20
     private int touchDown = -1;
22
     private int touchDown = -1;
21
     private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
23
     private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
24
+    private CollapsingTopBarReactHeaderAnimator visibilityAnimator;
22
 
25
 
23
-    public CollapsingTopBarReactHeader(Context context, String screenId, NavigationParams navigationParams, ScrollListener scrollListener) {
24
-        super(context, screenId, navigationParams);
26
+    public CollapsingTopBarReactHeader(Context context, CollapsingTopBarParams params, NavigationParams navigationParams, ScrollListener scrollListener) {
27
+        super(context, params.reactViewId, navigationParams);
25
         listener = scrollListener;
28
         listener = scrollListener;
26
         ViewConfiguration vc = ViewConfiguration.get(context);
29
         ViewConfiguration vc = ViewConfiguration.get(context);
27
         mTouchSlop = vc.getScaledTouchSlop();
30
         mTouchSlop = vc.getScaledTouchSlop();
31
+        visibilityAnimator = createVisibilityAnimator(params.reactViewHeight);
32
+    }
33
+
34
+    private CollapsingTopBarReactHeaderAnimator createVisibilityAnimator(int reactViewHeight) {
35
+        float height = ViewUtils.convertDpToPixel(reactViewHeight);
36
+        return new CollapsingTopBarReactHeaderAnimator(this, height / 2, height / 2);
37
+    }
38
+
39
+    public void collapse(float amount) {
40
+        visibilityAnimator.collapse(amount);
28
     }
41
     }
29
 
42
 
30
     @Override
43
     @Override
56
         return false;
69
         return false;
57
     }
70
     }
58
 
71
 
59
-    private void onTouchDown(MotionEvent ev) {
60
-        if (touchDown == -1) {
61
-            touchDown = (int) ev.getRawY();
62
-        }
63
-        dispatchTouchEventToJs(ev);
64
-    }
65
-
66
-    private int calculateDistanceY(MotionEvent ev) {
67
-        return (int) Math.abs(ev.getRawY() - touchDown);
68
-    }
69
-
70
     @Override
72
     @Override
71
     public boolean onTouchEvent(MotionEvent ev) {
73
     public boolean onTouchEvent(MotionEvent ev) {
72
         listener.onTouch(ev);
74
         listener.onTouch(ev);
76
                 releaseScroll(ev);
78
                 releaseScroll(ev);
77
                 break;
79
                 break;
78
             case MotionEvent.ACTION_MOVE:
80
             case MotionEvent.ACTION_MOVE:
81
+
79
                 break;
82
                 break;
80
             default:
83
             default:
81
                 break;
84
                 break;
83
         return super.onTouchEvent(ev);
86
         return super.onTouchEvent(ev);
84
     }
87
     }
85
 
88
 
89
+    private void onTouchDown(MotionEvent ev) {
90
+        if (touchDown == -1) {
91
+            touchDown = (int) ev.getRawY();
92
+        }
93
+        dispatchTouchEventToJs(ev);
94
+    }
95
+
96
+    private int calculateDistanceY(MotionEvent ev) {
97
+        return (int) Math.abs(ev.getRawY() - touchDown);
98
+    }
99
+
86
     private void releaseScroll(MotionEvent ev) {
100
     private void releaseScroll(MotionEvent ev) {
87
         mIsScrolling = false;
101
         mIsScrolling = false;
88
         touchDown = -1;
102
         touchDown = -1;

+ 56
- 0
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTopBarReactHeaderAnimator.java View File

1
+package com.reactnativenavigation.views.collapsingToolbar;
2
+
3
+import android.view.animation.DecelerateInterpolator;
4
+import android.view.animation.Interpolator;
5
+
6
+import static com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBarReactHeaderAnimator.State.Invisible;
7
+import static com.reactnativenavigation.views.collapsingToolbar.CollapsingTopBarReactHeaderAnimator.State.Visible;
8
+
9
+public class CollapsingTopBarReactHeaderAnimator {
10
+    enum State {Visible, Invisible}
11
+
12
+    private State state = Invisible;
13
+    private CollapsingTopBarReactHeader header;
14
+    private final float hideThreshold;
15
+    private float showThreshold;
16
+    private final static int ANIMATION_DURATION = 360;
17
+    private final Interpolator interpolator = new DecelerateInterpolator();
18
+
19
+    public CollapsingTopBarReactHeaderAnimator(CollapsingTopBarReactHeader header, float hideThreshold, float showThreshold) {
20
+        this.header = header;
21
+        this.hideThreshold = hideThreshold;
22
+        this.showThreshold = showThreshold;
23
+    }
24
+
25
+    public void collapse(float collapse) {
26
+        if (shouldShow(collapse)) {
27
+            show();
28
+        } else if (shouldHide(collapse)) {
29
+            hide();
30
+        }
31
+    }
32
+
33
+    private boolean shouldShow(float collapse) {
34
+        return Math.abs(collapse) < showThreshold && state == Invisible;
35
+    }
36
+
37
+    private boolean shouldHide(float collapse) {
38
+        return Math.abs(collapse) >= hideThreshold && state == Visible;
39
+    }
40
+
41
+    private void show() {
42
+        state = State.Visible;
43
+        header.animate()
44
+                .alpha(1)
45
+                .setDuration(ANIMATION_DURATION)
46
+                .setInterpolator(interpolator);
47
+    }
48
+
49
+    private void hide() {
50
+        state = State.Invisible;
51
+        header.animate()
52
+                .alpha(0)
53
+                .setDuration(ANIMATION_DURATION)
54
+                .setInterpolator(interpolator);
55
+    }
56
+}