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
     public boolean forceTitlesDisplay;
86
     public boolean forceTitlesDisplay;
87
     public Color bottomTabBadgeTextColor;
87
     public Color bottomTabBadgeTextColor;
88
     public Color bottomTabBadgeBackgroundColor;
88
     public Color bottomTabBadgeBackgroundColor;
89
+    public String bottomTabFontFamily;
89
 
90
 
90
     public Color navigationBarColor;
91
     public Color navigationBarColor;
91
 }
92
 }

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

73
         result.navigationBarColor = getColor("navigationBarColor", getDefaultNavigationColor());
73
         result.navigationBarColor = getColor("navigationBarColor", getDefaultNavigationColor());
74
         result.forceTitlesDisplay = getBoolean("forceTitlesDisplay", getDefaultForceTitlesDisplay());
74
         result.forceTitlesDisplay = getBoolean("forceTitlesDisplay", getDefaultForceTitlesDisplay());
75
 
75
 
76
+        result.bottomTabFontFamily = params.getString("bottomTabFontFamily", getDefaultBottomTabFontFamily());
77
+
76
         return result;
78
         return result;
77
     }
79
     }
78
 
80
 
225
         return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.statusBarColor;
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
     private boolean getBoolean(String key, boolean defaultValue) {
234
     private boolean getBoolean(String key, boolean defaultValue) {
229
         return params.containsKey(key) ? params.getBoolean(key) : defaultValue;
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
 package com.reactnativenavigation.views;
1
 package com.reactnativenavigation.views;
2
 
2
 
3
 import android.content.Context;
3
 import android.content.Context;
4
+import android.content.res.AssetManager;
4
 import android.graphics.Color;
5
 import android.graphics.Color;
6
+import android.graphics.Typeface;
5
 
7
 
6
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
8
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
7
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
9
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
11
 import com.reactnativenavigation.params.StyleParams;
13
 import com.reactnativenavigation.params.StyleParams;
12
 import com.reactnativenavigation.utils.ViewUtils;
14
 import com.reactnativenavigation.utils.ViewUtils;
13
 
15
 
16
+import java.io.IOException;
17
+import java.util.Arrays;
14
 import java.util.List;
18
 import java.util.List;
15
 
19
 
16
 public class BottomTabs extends AHBottomNavigation {
20
 public class BottomTabs extends AHBottomNavigation {
23
         setId(ViewUtils.generateViewId());
27
         setId(ViewUtils.generateViewId());
24
         createVisibilityAnimator();
28
         createVisibilityAnimator();
25
         setStyle();
29
         setStyle();
30
+        setFontFamily(context);
26
     }
31
     }
27
 
32
 
28
     public void addTabs(List<ScreenParams> params, OnTabSelectedListener onTabSelectedListener) {
33
     public void addTabs(List<ScreenParams> params, OnTabSelectedListener onTabSelectedListener) {
97
     private boolean hasBadgeBackgroundColor() {
102
     private boolean hasBadgeBackgroundColor() {
98
         return AppStyle.appStyle.bottomTabBadgeBackgroundColor != null && AppStyle.appStyle.bottomTabBadgeBackgroundColor.hasColor();
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
   tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
18
   tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
19
   tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
19
   tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
20
   tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
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
     tabBarBackgroundColor: '#0f2362',
30
     tabBarBackgroundColor: '#0f2362',
30
     tabBarButtonColor: '#ffffff',
31
     tabBarButtonColor: '#ffffff',
31
     tabBarSelectedButtonColor: '#63d7cc'
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
     forceTitlesDisplay: originalStyleObject.forceTitlesDisplay,
180
     forceTitlesDisplay: originalStyleObject.forceTitlesDisplay,
181
     bottomTabBadgeTextColor: processColor(originalStyleObject.bottomTabBadgeTextColor),
181
     bottomTabBadgeTextColor: processColor(originalStyleObject.bottomTabBadgeTextColor),
182
     bottomTabBadgeBackgroundColor: processColor(originalStyleObject.bottomTabBadgeBackgroundColor),
182
     bottomTabBadgeBackgroundColor: processColor(originalStyleObject.bottomTabBadgeBackgroundColor),
183
+    bottomTabFontFamily: originalStyleObject.tabFontFamily,
183
 
184
 
184
     navigationBarColor: processColor(originalStyleObject.navigationBarColor)
185
     navigationBarColor: processColor(originalStyleObject.navigationBarColor)
185
   }
186
   }