Browse Source

Add font family support on bottom tabs (#961)

* Add font family support on bottom tabs

* import missing classes

* import missing class

* update document
Jing Tai Piao 7 years ago
parent
commit
2273a0e86b

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

@@ -86,6 +86,7 @@ public class StyleParams {
86 86
     public boolean forceTitlesDisplay;
87 87
     public Color bottomTabBadgeTextColor;
88 88
     public Color bottomTabBadgeBackgroundColor;
89
+    public String bottomTabFontFamily;
89 90
 
90 91
     public Color navigationBarColor;
91 92
 }

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

@@ -73,6 +73,8 @@ public class StyleParamsParser {
73 73
         result.navigationBarColor = getColor("navigationBarColor", getDefaultNavigationColor());
74 74
         result.forceTitlesDisplay = getBoolean("forceTitlesDisplay", getDefaultForceTitlesDisplay());
75 75
 
76
+        result.bottomTabFontFamily = params.getString("bottomTabFontFamily", getDefaultBottomTabFontFamily());
77
+
76 78
         return result;
77 79
     }
78 80
 
@@ -225,6 +227,10 @@ public class StyleParamsParser {
225 227
         return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.statusBarColor;
226 228
     }
227 229
 
230
+    private String getDefaultBottomTabFontFamily() {
231
+        return AppStyle.appStyle == null ? "sans-serif" : AppStyle.appStyle.bottomTabFontFamily;
232
+    }
233
+
228 234
     private boolean getBoolean(String key, boolean defaultValue) {
229 235
         return params.containsKey(key) ? params.getBoolean(key) : defaultValue;
230 236
     }

+ 32
- 0
android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java View File

@@ -1,7 +1,9 @@
1 1
 package com.reactnativenavigation.views;
2 2
 
3 3
 import android.content.Context;
4
+import android.content.res.AssetManager;
4 5
 import android.graphics.Color;
6
+import android.graphics.Typeface;
5 7
 
6 8
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
7 9
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
@@ -11,6 +13,8 @@ import com.reactnativenavigation.params.ScreenParams;
11 13
 import com.reactnativenavigation.params.StyleParams;
12 14
 import com.reactnativenavigation.utils.ViewUtils;
13 15
 
16
+import java.io.IOException;
17
+import java.util.Arrays;
14 18
 import java.util.List;
15 19
 
16 20
 public class BottomTabs extends AHBottomNavigation {
@@ -23,6 +27,7 @@ public class BottomTabs extends AHBottomNavigation {
23 27
         setId(ViewUtils.generateViewId());
24 28
         createVisibilityAnimator();
25 29
         setStyle();
30
+        setFontFamily(context);
26 31
     }
27 32
 
28 33
     public void addTabs(List<ScreenParams> params, OnTabSelectedListener onTabSelectedListener) {
@@ -97,4 +102,31 @@ public class BottomTabs extends AHBottomNavigation {
97 102
     private boolean hasBadgeBackgroundColor() {
98 103
         return AppStyle.appStyle.bottomTabBadgeBackgroundColor != null && AppStyle.appStyle.bottomTabBadgeBackgroundColor.hasColor();
99 104
     }
105
+
106
+    private boolean hasBottomTabFontFamily() {
107
+        return AppStyle.appStyle.bottomTabFontFamily != null;
108
+    }
109
+
110
+    private void setFontFamily(Context context) {
111
+        if(hasBottomTabFontFamily()) {
112
+
113
+            AssetManager assetManager = context.getAssets();
114
+            String fontFamilyName = AppStyle.appStyle.bottomTabFontFamily;
115
+
116
+            Typeface typeFace = null;
117
+            try {
118
+                boolean hasAsset = Arrays.asList(assetManager.list("fonts")).contains(fontFamilyName);
119
+                typeFace = hasAsset ?
120
+                        Typeface.createFromAsset(assetManager, "fonts/".concat(fontFamilyName))
121
+                        :
122
+                        Typeface.create(fontFamilyName, Typeface.NORMAL);
123
+            } catch (IOException e) {
124
+                e.printStackTrace();
125
+            }
126
+
127
+            if(typeFace != null) {
128
+                setTitleTypeface(typeFace);
129
+            }
130
+        }
131
+    }
100 132
 }

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

@@ -18,6 +18,7 @@ Navigation.startTabBasedApp({
18 18
   tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
19 19
   tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
20 20
   tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
21
+  tabBarTextFontFamily: 'Avenir-Medium' //change the tab font family
21 22
 }
22 23
 ```
23 24
 
@@ -29,6 +30,7 @@ Navigation.startTabBasedApp({
29 30
     tabBarBackgroundColor: '#0f2362',
30 31
     tabBarButtonColor: '#ffffff',
31 32
     tabBarSelectedButtonColor: '#63d7cc'
33
+    tabFontFamily: 'Avenir-Medium.ttf'  // for asset file or use existing font family name
32 34
   },
33 35
 ...
34 36
 }

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

@@ -180,6 +180,7 @@ function convertStyleParams(originalStyleObject) {
180 180
     forceTitlesDisplay: originalStyleObject.forceTitlesDisplay,
181 181
     bottomTabBadgeTextColor: processColor(originalStyleObject.bottomTabBadgeTextColor),
182 182
     bottomTabBadgeBackgroundColor: processColor(originalStyleObject.bottomTabBadgeBackgroundColor),
183
+    bottomTabFontFamily: originalStyleObject.tabFontFamily,
183 184
 
184 185
     navigationBarColor: processColor(originalStyleObject.navigationBarColor)
185 186
   }