Browse Source

Implement TopBar border

Ability to set a flat border under the TopBar. `topBarElevationShadowEnabled` should be set to true if using this feature.
Guy Carmeli 7 years ago
parent
commit
804e64a553

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

80
     public Color contextualMenuBackgroundColor;
80
     public Color contextualMenuBackgroundColor;
81
 
81
 
82
     public Color topBarColor;
82
     public Color topBarColor;
83
+    public Color topBarBorderColor;
84
+    public float topBarBorderWidth;
83
     public String topBarReactView;
85
     public String topBarReactView;
84
     public String topBarReactViewAlignment;
86
     public String topBarReactViewAlignment;
85
     public Bundle topBarReactViewInitialProps;
87
     public Bundle topBarReactViewInitialProps;

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

7
 import com.reactnativenavigation.params.Orientation;
7
 import com.reactnativenavigation.params.Orientation;
8
 import com.reactnativenavigation.params.StatusBarTextColorScheme;
8
 import com.reactnativenavigation.params.StatusBarTextColorScheme;
9
 import com.reactnativenavigation.params.StyleParams;
9
 import com.reactnativenavigation.params.StyleParams;
10
+import com.reactnativenavigation.utils.ViewUtils;
10
 
11
 
11
 public class StyleParamsParser {
12
 public class StyleParamsParser {
12
     private Bundle params;
13
     private Bundle params;
49
         result.topBarElevationShadowEnabled = getBoolean("topBarElevationShadowEnabled", getDefaultTopBarElevationShadowEnabled());
50
         result.topBarElevationShadowEnabled = getBoolean("topBarElevationShadowEnabled", getDefaultTopBarElevationShadowEnabled());
50
         result.titleBarTitleColor = getColor("titleBarTitleColor", getDefaultTitleBarColor());
51
         result.titleBarTitleColor = getColor("titleBarTitleColor", getDefaultTitleBarColor());
51
         result.topBarTranslucent = getBoolean("topBarTranslucent", getDefaultTopBarTranslucent());
52
         result.topBarTranslucent = getBoolean("topBarTranslucent", getDefaultTopBarTranslucent());
53
+        result.topBarBorderColor = getColor("topBarBorderColor", getDefaultTopBarBorderColor());
54
+        result.topBarBorderWidth = Float.parseFloat(params.getString("topBarBorderWidth", getDefaultTopBarBorderWidth()));
52
 
55
 
53
         result.titleBarSubtitleColor = getColor("titleBarSubtitleColor", getDefaultSubtitleBarColor());
56
         result.titleBarSubtitleColor = getColor("titleBarSubtitleColor", getDefaultSubtitleBarColor());
54
         result.titleBarButtonColor = getColor("titleBarButtonColor", getTitleBarButtonColor());
57
         result.titleBarButtonColor = getColor("titleBarButtonColor", getTitleBarButtonColor());
237
         return AppStyle.appStyle != null && AppStyle.appStyle.topBarTranslucent;
240
         return AppStyle.appStyle != null && AppStyle.appStyle.topBarTranslucent;
238
     }
241
     }
239
 
242
 
243
+    private StyleParams.Color getDefaultTopBarBorderColor() {
244
+        return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.topBarBorderColor;
245
+    }
246
+
247
+    private String getDefaultTopBarBorderWidth() {
248
+        return String.valueOf(AppStyle.appStyle == null ? ViewUtils.convertDpToPixel(1) : AppStyle.appStyle.topBarBorderWidth);
249
+    }
250
+
240
     private boolean getDefaultTitleBarHideOnScroll() {
251
     private boolean getDefaultTitleBarHideOnScroll() {
241
         return AppStyle.appStyle != null && AppStyle.appStyle.titleBarHideOnScroll;
252
         return AppStyle.appStyle != null && AppStyle.appStyle.titleBarHideOnScroll;
242
     }
253
     }

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

155
     }
155
     }
156
 
156
 
157
     public void setStyle(StyleParams styleParams) {
157
     public void setStyle(StyleParams styleParams) {
158
-        if (styleParams.topBarColor.hasColor()) {
158
+        if (styleParams.topBarBorderColor.hasColor()) {
159
+            setBackground(new TopBarBorder(styleParams));
160
+        } else if (styleParams.topBarColor.hasColor()) {
159
             setBackgroundColor(styleParams.topBarColor.getColor());
161
             setBackgroundColor(styleParams.topBarColor.getColor());
160
         }
162
         }
161
         if (styleParams.topBarTransparent) {
163
         if (styleParams.topBarTransparent) {

+ 71
- 0
android/app/src/main/java/com/reactnativenavigation/views/TopBarBorder.java View File

1
+package com.reactnativenavigation.views;
2
+
3
+import android.graphics.Canvas;
4
+import android.graphics.Color;
5
+import android.graphics.Paint;
6
+import android.graphics.Path;
7
+import android.graphics.Point;
8
+import android.graphics.drawable.ShapeDrawable;
9
+import android.graphics.drawable.shapes.RectShape;
10
+import android.graphics.drawable.shapes.Shape;
11
+
12
+import com.reactnativenavigation.params.StyleParams;
13
+
14
+class TopBarBorder extends ShapeDrawable {
15
+    private StyleParams.Color backgroundColor;
16
+    private final Paint pathPaint;
17
+    private Border border;
18
+
19
+    private class Border {
20
+        private Path path;
21
+        int width;
22
+        int height;
23
+
24
+        Border(int width, int height) {
25
+            this.width = width;
26
+            this.height = height;
27
+            path = createPath();
28
+        }
29
+
30
+        private Path createPath() {
31
+            Point a = new Point(0, height);
32
+            Point b = new Point(width, height);
33
+            Path path = new Path();
34
+            path.moveTo(a.x, a.y);
35
+            path.lineTo(b.x, b.y);
36
+            return path;
37
+        }
38
+
39
+        boolean dimensionsChanged(int width, int height) {
40
+            return this.width != width || this.height != height;
41
+        }
42
+    }
43
+
44
+    TopBarBorder(StyleParams styleParams) {
45
+        super(new RectShape());
46
+        backgroundColor = styleParams.topBarColor;
47
+        pathPaint = createPathPaint(styleParams.topBarBorderColor, styleParams.topBarBorderWidth);
48
+    }
49
+
50
+    private Paint createPathPaint(StyleParams.Color color, float strokeWidth) {
51
+        Paint res = new Paint();
52
+        res.setStyle(Paint.Style.STROKE);
53
+        res.setColor(color.getColor());
54
+        res.setStrokeWidth(strokeWidth);
55
+        return res;
56
+    }
57
+
58
+    @Override
59
+    protected void onDraw(Shape shape, Canvas canvas, Paint paint) {
60
+        super.onDraw(shape, canvas, paint);
61
+        createBorder(canvas);
62
+        paint.setColor(backgroundColor.getColor(Color.WHITE));
63
+        canvas.drawPath(border.path, pathPaint);
64
+    }
65
+
66
+    private void createBorder(Canvas canvas) {
67
+        if (border == null || border.dimensionsChanged(canvas.getWidth(), canvas.getHeight())) {
68
+            border = new Border(canvas.getWidth(), canvas.getHeight());
69
+        }
70
+    }
71
+}

+ 2
- 0
docs/styling-the-navigator.md View File

90
   navBarTextFontBold: false, // Optional. Set the title to bold.
90
   navBarTextFontBold: false, // Optional. Set the title to bold.
91
   navBarHeight: 70, // Optional, set the navBar height in pixels.
91
   navBarHeight: 70, // Optional, set the navBar height in pixels.
92
   topTabsHeight: 70, // Optional, set topTabs height in pixels.
92
   topTabsHeight: 70, // Optional, set topTabs height in pixels.
93
+  topBarBorderColor: 'red', Optional, set a flat border under the TopBar.
94
+  topBarBorderWidth: 5.5, // Optional, set the width of the border.
93
 }
95
 }
94
 ```
96
 ```
95
 
97
 

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

148
     topBarTranslucent: originalStyleObject.navBarTranslucent,
148
     topBarTranslucent: originalStyleObject.navBarTranslucent,
149
     topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
149
     topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
150
     topBarCollapseOnScroll: originalStyleObject.topBarCollapseOnScroll,
150
     topBarCollapseOnScroll: originalStyleObject.topBarCollapseOnScroll,
151
+    topBarBorderColor: processColor(originalStyleObject.topBarBorderColor),
152
+    topBarBorderWidth: originalStyleObject.topBarBorderWidth && `${originalStyleObject.topBarBorderWidth}`,
151
     collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
153
     collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
152
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
154
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
153
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
155
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
198
     bottomTabFontFamily: originalStyleObject.tabFontFamily,
200
     bottomTabFontFamily: originalStyleObject.tabFontFamily,
199
 
201
 
200
     navigationBarColor: processColor(originalStyleObject.navigationBarColor)
202
     navigationBarColor: processColor(originalStyleObject.navigationBarColor)
201
-  }
203
+  };
202
 
204
 
203
   if (originalStyleObject.collapsingToolBarImage) {
205
   if (originalStyleObject.collapsingToolBarImage) {
204
     if (_.isString(originalStyleObject.collapsingToolBarImage)) {
206
     if (_.isString(originalStyleObject.collapsingToolBarImage)) {