Bläddra i källkod

Collapsing react view header with top tabs

Add expendOnTopTabChange style property which defaults to true. Setting it to false
Guy Carmeli 8 år sedan
förälder
incheckning
074ec58c6c

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/CollapsingTopBarParams.java Visa fil

10
     public int reactViewHeight;
10
     public int reactViewHeight;
11
     public StyleParams.Color scrimColor;
11
     public StyleParams.Color scrimColor;
12
     public CollapseBehaviour collapseBehaviour;
12
     public CollapseBehaviour collapseBehaviour;
13
+    public boolean expendOnTopTabChange;
13
 
14
 
14
     public boolean hasBackgroundImage() {
15
     public boolean hasBackgroundImage() {
15
         return imageUri != null;
16
         return imageUri != null;

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/parsers/CollapsingTopBarParamsParser.java Visa fil

29
         result.imageUri = params.getString("collapsingToolBarImage", null);
29
         result.imageUri = params.getString("collapsingToolBarImage", null);
30
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
30
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
31
         result.reactViewHeight = params.getInt("collapsingToolBarComponentHeight");
31
         result.reactViewHeight = params.getInt("collapsingToolBarComponentHeight");
32
+        result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
32
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
33
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
33
         result.collapseBehaviour = getCollapseBehaviour();
34
         result.collapseBehaviour = getCollapseBehaviour();
34
         return result;
35
         return result;

+ 5
- 3
android/app/src/main/java/com/reactnativenavigation/screens/CollapsingViewPagerScreen.java Visa fil

43
     protected ViewPager createViewPager(Context context) {
43
     protected ViewPager createViewPager(Context context) {
44
         CollapsingViewPager viewPager = new CollapsingViewPager(context);
44
         CollapsingViewPager viewPager = new CollapsingViewPager(context);
45
         if (screenParams.styleParams.drawScreenBelowTopBar) {
45
         if (screenParams.styleParams.drawScreenBelowTopBar) {
46
-            viewPager.setViewMeasurer(new CollapsingViewMeasurer((CollapsingTopBar) topBar, this));
46
+            viewPager.setViewMeasurer(new CollapsingViewMeasurer((CollapsingTopBar) topBar, this, styleParams));
47
         }
47
         }
48
         return viewPager;
48
         return viewPager;
49
     }
49
     }
95
     public void onEvent(Event event) {
95
     public void onEvent(Event event) {
96
         super.onEvent(event);
96
         super.onEvent(event);
97
         if (ViewPagerScreenScrollStartEvent.TYPE.equals(event.getType()) || ViewPagerScreenChangedEvent.TYPE.equals(event.getType())) {
97
         if (ViewPagerScreenScrollStartEvent.TYPE.equals(event.getType()) || ViewPagerScreenChangedEvent.TYPE.equals(event.getType())) {
98
-            ((CollapsingView) topBar).collapse(new CollapseAmount(CollapseCalculator.Direction.Down));
99
-            ((CollapsingView) viewPager).collapse(new CollapseAmount(CollapseCalculator.Direction.Down));
98
+            if (screenParams.styleParams.collapsingTopBarParams.expendOnTopTabChange) {
99
+                ((CollapsingView) topBar).collapse(new CollapseAmount(CollapseCalculator.Direction.Down));
100
+                ((CollapsingView) viewPager).collapse(new CollapseAmount(CollapseCalculator.Direction.Down));
101
+            }
100
         }
102
         }
101
     }
103
     }
102
 
104
 

+ 4
- 0
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapseAmount.java Visa fil

20
         return amount != null || this != None;
20
         return amount != null || this != None;
21
     }
21
     }
22
 
22
 
23
+    boolean hasExactAmount() {
24
+        return amount != null;
25
+    }
26
+
23
     public boolean collapseToTop() {
27
     public boolean collapseToTop() {
24
         return direction == CollapseCalculator.Direction.Up;
28
         return direction == CollapseCalculator.Direction.Up;
25
     }
29
     }

+ 7
- 1
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTitleBar.java Visa fil

55
         }
55
         }
56
     }
56
     }
57
 
57
 
58
-    public void collapse(float collapse) {
58
+    public void collapse(CollapseAmount amount) {
59
+        if (amount.hasExactAmount()) {
60
+            collapse(amount.get());
61
+        }
62
+    }
63
+
64
+    private void collapse(float collapse) {
59
         if (params.hasBackgroundImage()) {
65
         if (params.hasBackgroundImage()) {
60
             title.setTranslationY(0);
66
             title.setTranslationY(0);
61
             title.collapseBy(collapse);
67
             title.collapseBy(collapse);

+ 4
- 4
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTopBar.java Visa fil

106
     public void collapse(CollapseAmount amount) {
106
     public void collapse(CollapseAmount amount) {
107
         viewCollapser.collapse(amount);
107
         viewCollapser.collapse(amount);
108
         if (titleBar instanceof CollapsingTitleBar) {
108
         if (titleBar instanceof CollapsingTitleBar) {
109
-            ((CollapsingTitleBar) titleBar).collapse(amount.get());
109
+            ((CollapsingTitleBar) titleBar).collapse(amount);
110
         }
110
         }
111
         if (collapsingTopBarBackground != null) {
111
         if (collapsingTopBarBackground != null) {
112
             collapsingTopBarBackground.collapse(amount.get());
112
             collapsingTopBarBackground.collapse(amount.get());
123
     }
123
     }
124
 
124
 
125
     public int getCollapsedHeight() {
125
     public int getCollapsedHeight() {
126
-        if (params.hasBackgroundImage()) {
126
+        if (topTabs != null) {
127
+            return topTabs.getHeight();
128
+        } else if (params.hasBackgroundImage()) {
127
             return topBarHeight;
129
             return topBarHeight;
128
         } else if (params.hasReactView()) {
130
         } else if (params.hasReactView()) {
129
             return topBarHeight;
131
             return topBarHeight;
130
-        } else if (topTabs != null) {
131
-            return topTabs.getHeight();
132
         } else {
132
         } else {
133
             return titleBar.getHeight();
133
             return titleBar.getHeight();
134
         }
134
         }

+ 8
- 9
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingViewMeasurer.java Visa fil

6
 import com.reactnativenavigation.views.utils.ViewMeasurer;
6
 import com.reactnativenavigation.views.utils.ViewMeasurer;
7
 
7
 
8
 public class CollapsingViewMeasurer extends ViewMeasurer {
8
 public class CollapsingViewMeasurer extends ViewMeasurer {
9
-
10
     int collapsedTopBarHeight;
9
     int collapsedTopBarHeight;
11
     private float finalCollapseValue;
10
     private float finalCollapseValue;
12
     int screenHeight;
11
     int screenHeight;
13
     int bottomTabsHeight = 0;
12
     int bottomTabsHeight = 0;
14
-    boolean bottomTabsHidden;
13
+    protected StyleParams styleParams;
15
 
14
 
16
-    public CollapsingViewMeasurer(CollapsingTopBar topBar, Screen screen, StyleParams styleParams) {
17
-        this(topBar, screen);
18
-        bottomTabsHidden = styleParams.bottomTabsHidden;
15
+    public CollapsingViewMeasurer(final CollapsingTopBar topBar, final Screen collapsingSingleScreen, StyleParams styleParams) {
16
+        this.styleParams = styleParams;
19
         bottomTabsHeight = (int) ViewUtils.convertDpToPixel(56);
17
         bottomTabsHeight = (int) ViewUtils.convertDpToPixel(56);
20
-    }
21
-
22
-    public CollapsingViewMeasurer(final CollapsingTopBar topBar, final Screen collapsingSingleScreen) {
23
         ViewUtils.runOnPreDraw(topBar, new Runnable() {
18
         ViewUtils.runOnPreDraw(topBar, new Runnable() {
24
             @Override
19
             @Override
25
             public void run() {
20
             public void run() {
42
 
37
 
43
     @Override
38
     @Override
44
     public int getMeasuredHeight(int heightMeasureSpec) {
39
     public int getMeasuredHeight(int heightMeasureSpec) {
45
-        return screenHeight - collapsedTopBarHeight + (bottomTabsHidden ? bottomTabsHeight : 0);
40
+        int height = screenHeight - collapsedTopBarHeight;
41
+        if (styleParams.bottomTabsHidden) {
42
+            height += bottomTabsHeight;
43
+        }
44
+        return height;
46
     }
45
     }
47
 }
46
 }

+ 5
- 1
android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingViewPagerContentViewMeasurer.java Visa fil

11
 
11
 
12
     @Override
12
     @Override
13
     public int getMeasuredHeight(int heightMeasureSpec) {
13
     public int getMeasuredHeight(int heightMeasureSpec) {
14
-        return screenHeight - collapsedTopBarHeight - (bottomTabsHidden ? 0 : bottomTabsHeight);
14
+        int height = screenHeight - collapsedTopBarHeight;
15
+//        if (styleParams.bottomTabsHidden) {
16
+            height -= bottomTabsHeight;
17
+//        }
18
+        return height;
15
     }
19
     }
16
 }
20
 }

+ 4
- 0
src/deprecated/platformSpecificDeprecated.android.js Visa fil

129
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
129
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
130
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
130
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
131
     collapsingToolBarCollapsedColor: processColor(originalStyleObject.collapsingToolBarCollapsedColor),
131
     collapsingToolBarCollapsedColor: processColor(originalStyleObject.collapsingToolBarCollapsedColor),
132
+    expendCollapsingToolBarOnTopTabChange: originalStyleObject.expendCollapsingToolBarOnTopTabChange,
132
     titleBarHidden: originalStyleObject.navBarHidden,
133
     titleBarHidden: originalStyleObject.navBarHidden,
133
     titleBarHideOnScroll: originalStyleObject.navBarHideOnScroll,
134
     titleBarHideOnScroll: originalStyleObject.navBarHideOnScroll,
134
     titleBarTitleColor: processColor(originalStyleObject.navBarTextColor),
135
     titleBarTitleColor: processColor(originalStyleObject.navBarTextColor),
176
       ret.collapsingToolBarImage = collapsingToolBarImage.uri;
177
       ret.collapsingToolBarImage = collapsingToolBarImage.uri;
177
     }
178
     }
178
   }
179
   }
180
+  if (_.isUndefined(ret.expendCollapsingToolBarOnTopTabChange)) {
181
+    ret.expendCollapsingToolBarOnTopTabChange = true;
182
+  }
179
   return ret;
183
   return ret;
180
 }
184
 }
181
 
185