Browse Source

More work towards collapsing react view in top bar

This commit contains various fixes and enhancements, mostly because I
was too lazy to commit small changes.

* Add topBarCollapseOnScroll style property which compliments
  navBarHideOnScroll. This property is needed when showing a
  collapsing topTabs screen. In this case the developer might to keep
  the titleBar bar when the screen is collapsed.
* Reduce collapse sensitivity by taking scaled touch slop into account
* Cancel touches when collapsing. This fix prevents buttons from
  responding to touch events when collapse ends.
Guy Carmeli 7 years ago
parent
commit
2391fd0ba9

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/StyleParams.java View File

40
 
40
 
41
     public Color topBarColor;
41
     public Color topBarColor;
42
     public CollapsingTopBarParams collapsingTopBarParams;
42
     public CollapsingTopBarParams collapsingTopBarParams;
43
+    public boolean topBarCollapseOnScroll;
43
     public boolean topBarHidden;
44
     public boolean topBarHidden;
44
     public boolean topBarElevationShadowEnabled;
45
     public boolean topBarElevationShadowEnabled;
45
     public boolean topTabsHidden;
46
     public boolean topTabsHidden;

+ 1
- 1
android/app/src/main/java/com/reactnativenavigation/params/parsers/CollapsingTopBarParamsParser.java View File

23
 
23
 
24
     public CollapsingTopBarParams parse() {
24
     public CollapsingTopBarParams parse() {
25
         if (!validateParams()) {
25
         if (!validateParams()) {
26
-            return null;
26
+            return new CollapsingTopBarParams();
27
         }
27
         }
28
         CollapsingTopBarParams result = new CollapsingTopBarParams();
28
         CollapsingTopBarParams result = new CollapsingTopBarParams();
29
         result.imageUri = params.getString("collapsingToolBarImage", null);
29
         result.imageUri = params.getString("collapsingToolBarImage", null);

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/parsers/StyleParamsParser.java View File

27
         result.topBarColor = getColor("topBarColor", getDefaultTopBarColor());
27
         result.topBarColor = getColor("topBarColor", getDefaultTopBarColor());
28
         result.titleBarHideOnScroll = getBoolean("titleBarHideOnScroll", getDefaultTitleBarHideOnScroll());
28
         result.titleBarHideOnScroll = getBoolean("titleBarHideOnScroll", getDefaultTitleBarHideOnScroll());
29
         result.topBarTransparent = getBoolean("topBarTransparent", getDefaultTopBarHidden());
29
         result.topBarTransparent = getBoolean("topBarTransparent", getDefaultTopBarHidden());
30
+        result.topBarCollapseOnScroll = getBoolean("topBarCollapseOnScroll", false);
30
         result.drawScreenBelowTopBar = params.getBoolean("drawBelowTopBar", getDefaultScreenBelowTopBar());
31
         result.drawScreenBelowTopBar = params.getBoolean("drawBelowTopBar", getDefaultScreenBelowTopBar());
31
         if (result.topBarTransparent) {
32
         if (result.topBarTransparent) {
32
             result.drawScreenBelowTopBar = false;
33
             result.drawScreenBelowTopBar = false;

+ 5
- 2
android/app/src/main/java/com/reactnativenavigation/screens/CollapsingSingleScreen.java View File

1
 package com.reactnativenavigation.screens;
1
 package com.reactnativenavigation.screens;
2
 
2
 
3
 import android.support.v7.app.AppCompatActivity;
3
 import android.support.v7.app.AppCompatActivity;
4
+import android.view.MotionEvent;
4
 import android.widget.ScrollView;
5
 import android.widget.ScrollView;
5
 
6
 
7
+import com.facebook.react.uimanager.RootViewUtil;
6
 import com.reactnativenavigation.params.ScreenParams;
8
 import com.reactnativenavigation.params.ScreenParams;
7
 import com.reactnativenavigation.views.CollapsingContentView;
9
 import com.reactnativenavigation.views.CollapsingContentView;
8
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
10
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
31
 
33
 
32
     @Override
34
     @Override
33
     protected TopBar createTopBar() {
35
     protected TopBar createTopBar() {
34
-        final CollapsingTopBar topBar = new CollapsingTopBar(getContext(), styleParams.collapsingTopBarParams);
36
+        final CollapsingTopBar topBar = new CollapsingTopBar(getContext(), styleParams);
35
         topBar.setScrollListener(getScrollListener(topBar));
37
         topBar.setScrollListener(getScrollListener(topBar));
36
         return topBar;
38
         return topBar;
37
     }
39
     }
63
         return new ScrollListener(new CollapseCalculator(topBar, getCollapseBehaviour()),
65
         return new ScrollListener(new CollapseCalculator(topBar, getCollapseBehaviour()),
64
                 new OnScrollListener() {
66
                 new OnScrollListener() {
65
                     @Override
67
                     @Override
66
-                    public void onScroll(CollapseAmount amount) {
68
+                    public void onScroll(MotionEvent event, CollapseAmount amount) {
67
                         if (screenParams.styleParams.drawScreenBelowTopBar) {
69
                         if (screenParams.styleParams.drawScreenBelowTopBar) {
70
+                            RootViewUtil.getRootView(contentView).onChildStartedNativeGesture(event);
68
                             ((CollapsingView) contentView).collapse(amount);
71
                             ((CollapsingView) contentView).collapse(amount);
69
                         }
72
                         }
70
                         topBar.collapse(amount);
73
                         topBar.collapse(amount);

+ 5
- 2
android/app/src/main/java/com/reactnativenavigation/screens/CollapsingViewPagerScreen.java View File

4
 import android.content.Context;
4
 import android.content.Context;
5
 import android.support.v4.view.ViewPager;
5
 import android.support.v4.view.ViewPager;
6
 import android.support.v7.app.AppCompatActivity;
6
 import android.support.v7.app.AppCompatActivity;
7
+import android.view.MotionEvent;
7
 import android.widget.ScrollView;
8
 import android.widget.ScrollView;
8
 
9
 
10
+import com.facebook.react.uimanager.RootViewUtil;
9
 import com.reactnativenavigation.events.Event;
11
 import com.reactnativenavigation.events.Event;
10
 import com.reactnativenavigation.events.ViewPagerScreenChangedEvent;
12
 import com.reactnativenavigation.events.ViewPagerScreenChangedEvent;
11
 import com.reactnativenavigation.events.ViewPagerScreenScrollStartEvent;
13
 import com.reactnativenavigation.events.ViewPagerScreenScrollStartEvent;
35
 
37
 
36
     @Override
38
     @Override
37
     protected TopBar createTopBar() {
39
     protected TopBar createTopBar() {
38
-        final CollapsingTopBar topBar = new CollapsingTopBar(getContext(), styleParams.collapsingTopBarParams);
40
+        final CollapsingTopBar topBar = new CollapsingTopBar(getContext(), styleParams);
39
         topBar.setScrollListener(getScrollListener(topBar));
41
         topBar.setScrollListener(getScrollListener(topBar));
40
         return topBar;
42
         return topBar;
41
     }
43
     }
70
         return new ScrollListener(new CollapseCalculator(topBar, getCollapseBehaviour()),
72
         return new ScrollListener(new CollapseCalculator(topBar, getCollapseBehaviour()),
71
                 new OnScrollListener() {
73
                 new OnScrollListener() {
72
                     @Override
74
                     @Override
73
-                    public void onScroll(CollapseAmount amount) {
75
+                    public void onScroll(MotionEvent event, CollapseAmount amount) {
76
+                        RootViewUtil.getRootView(getCurrentPage()).onChildStartedNativeGesture(event);
74
                         topBar.collapse(amount);
77
                         topBar.collapse(amount);
75
                         ((CollapsingView) viewPager).collapse(amount);
78
                         ((CollapsingView) viewPager).collapse(amount);
76
                     }
79
                     }

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

194
         totalCollapse += collapse;
194
         totalCollapse += collapse;
195
         previousCollapseY = y;
195
         previousCollapseY = y;
196
         previousTouchEvent = MotionEvent.obtain(event);
196
         previousTouchEvent = MotionEvent.obtain(event);
197
-        return Math.abs(totalCollapse) < scaledTouchSlop ? CollapseAmount.None : new CollapseAmount(collapse);
197
+        final float delta = Math.abs(y - touchDownY);
198
+        return Math.abs(delta) < scaledTouchSlop ? CollapseAmount.None : new CollapseAmount(collapse);
198
     }
199
     }
199
 
200
 
200
     private float calculateCollapse(float y) {
201
     private float calculateCollapse(float y) {

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

9
 
9
 
10
 import com.reactnativenavigation.params.CollapsingTopBarParams;
10
 import com.reactnativenavigation.params.CollapsingTopBarParams;
11
 import com.reactnativenavigation.params.NavigationParams;
11
 import com.reactnativenavigation.params.NavigationParams;
12
+import com.reactnativenavigation.params.StyleParams;
12
 import com.reactnativenavigation.utils.ViewUtils;
13
 import com.reactnativenavigation.utils.ViewUtils;
13
 import com.reactnativenavigation.views.TitleBar;
14
 import com.reactnativenavigation.views.TitleBar;
14
 import com.reactnativenavigation.views.TopBar;
15
 import com.reactnativenavigation.views.TopBar;
21
     private CollapsingTopBarReactHeader header;
22
     private CollapsingTopBarReactHeader header;
22
     private ScrollListener scrollListener;
23
     private ScrollListener scrollListener;
23
     private float finalCollapsedTranslation;
24
     private float finalCollapsedTranslation;
24
-    private CollapsingTopBarParams params;
25
+    private final StyleParams styleParams;
26
+    private final CollapsingTopBarParams params;
25
     private final ViewCollapser viewCollapser;
27
     private final ViewCollapser viewCollapser;
26
     private final int topBarHeight;
28
     private final int topBarHeight;
27
     private String title;
29
     private String title;
28
 
30
 
29
-    public CollapsingTopBar(Context context, final CollapsingTopBarParams params) {
31
+    public CollapsingTopBar(Context context, final StyleParams params) {
30
         super(context);
32
         super(context);
31
-        this.params = params;
33
+        styleParams = params;
34
+        this.params = params.collapsingTopBarParams;
32
         topBarHeight = calculateTopBarHeight();
35
         topBarHeight = calculateTopBarHeight();
33
-        createBackgroundImage(params);
34
-        calculateFinalCollapsedTranslation(params);
36
+        createBackgroundImage();
37
+        calculateFinalCollapsedTranslation();
35
         viewCollapser = new ViewCollapser(this);
38
         viewCollapser = new ViewCollapser(this);
36
     }
39
     }
37
 
40
 
38
-    private void calculateFinalCollapsedTranslation(final CollapsingTopBarParams params) {
41
+    private void calculateFinalCollapsedTranslation() {
39
         ViewUtils.runOnPreDraw(this, new Runnable() {
42
         ViewUtils.runOnPreDraw(this, new Runnable() {
40
             @Override
43
             @Override
41
             public void run() {
44
             public void run() {
42
                 if (params.hasBackgroundImage() || params.hasReactView()) {
45
                 if (params.hasBackgroundImage() || params.hasReactView()) {
43
                     finalCollapsedTranslation = getCollapsedHeight() - getHeight();
46
                     finalCollapsedTranslation = getCollapsedHeight() - getHeight();
47
+                    if (styleParams.topBarCollapseOnScroll) {
48
+                        finalCollapsedTranslation += titleBar.getHeight();
49
+                    }
44
                 } else {
50
                 } else {
45
                     finalCollapsedTranslation = -titleBar.getHeight();
51
                     finalCollapsedTranslation = -titleBar.getHeight();
46
                 }
52
                 }
61
         }
67
         }
62
     }
68
     }
63
 
69
 
64
-    private void createBackgroundImage(CollapsingTopBarParams params) {
70
+    private void createBackgroundImage() {
65
         if (params.hasBackgroundImage()) {
71
         if (params.hasBackgroundImage()) {
66
             collapsingTopBarBackground = new CollapsingTopBarBackground(getContext(), params);
72
             collapsingTopBarBackground = new CollapsingTopBarBackground(getContext(), params);
67
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) CollapsingTopBarBackground.MAX_HEIGHT);
73
             LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, (int) CollapsingTopBarBackground.MAX_HEIGHT);

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

1
 package com.reactnativenavigation.views.collapsingToolbar;
1
 package com.reactnativenavigation.views.collapsingToolbar;
2
 
2
 
3
+import android.view.MotionEvent;
4
+
3
 public interface  OnScrollListener extends OnFlingListener {
5
 public interface  OnScrollListener extends OnFlingListener {
4
-    void onScroll(CollapseAmount amount);
6
+    void onScroll(MotionEvent event, CollapseAmount amount);
5
 }
7
 }

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

27
     boolean onTouch(MotionEvent event) {
27
     boolean onTouch(MotionEvent event) {
28
         CollapseAmount amount = collapseCalculator.calculate(event);
28
         CollapseAmount amount = collapseCalculator.calculate(event);
29
         if (amount.canCollapse()) {
29
         if (amount.canCollapse()) {
30
-            scrollListener.onScroll(amount);
30
+            scrollListener.onScroll(event, amount);
31
             return collapseBehaviour instanceof CollapseTopBarBehaviour;
31
             return collapseBehaviour instanceof CollapseTopBarBehaviour;
32
         }
32
         }
33
         return false;
33
         return false;

+ 1
- 0
src/deprecated/platformSpecificDeprecated.android.js View File

125
     topBarTransparent: originalStyleObject.navBarTransparent,
125
     topBarTransparent: originalStyleObject.navBarTransparent,
126
     topBarTranslucent: originalStyleObject.navBarTranslucent,
126
     topBarTranslucent: originalStyleObject.navBarTranslucent,
127
     topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
127
     topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
128
+    topBarCollapseOnScroll: originalStyleObject.topBarCollapseOnScroll,
128
     collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
129
     collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
129
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
130
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
130
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
131
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,