diff --git a/apps/ui-tests-app/font/tab-view.xml b/apps/ui-tests-app/font/tab-view.xml new file mode 100644 index 000000000..d52ed3ef7 --- /dev/null +++ b/apps/ui-tests-app/font/tab-view.xml @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + diff --git a/ui/styling/style.ts b/ui/styling/style.ts index 1a0c3ceb4..acd771cb5 100644 --- a/ui/styling/style.ts +++ b/ui/styling/style.ts @@ -417,6 +417,13 @@ export class Style extends DependencyObservable implements styling.Style { this._setShorthandProperty("font", value); } + get _fontInternal(): font.Font { + return this._getValue(fontInternalProperty); + } + set _fontInternal(value: font.Font) { + this._setValue(fontInternalProperty, value); + } + get textAlignment(): string { return this._getValue(textAlignmentProperty); } diff --git a/ui/styling/stylers.android.ts b/ui/styling/stylers.android.ts index 42d03f21a..4405d5492 100644 --- a/ui/styling/stylers.android.ts +++ b/ui/styling/stylers.android.ts @@ -533,7 +533,7 @@ function setTextDecoration(view: android.widget.TextView, value: string) { view.setPaintFlags(flags); } else { view.setPaintFlags(0); - } + } } function setTextTransform(view: android.widget.TextView, value: string) { @@ -1016,11 +1016,72 @@ export class TabViewStyler implements definition.stylers.Styler { } } + // font + private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) { + var tab = view; + var fontValue = newValue; + var typeface = fontValue.getAndroidTypeface(); + + if (tab.items && tab.items.length > 0) { + var tabLayout = tab._getAndroidTabView(); + + for (var i = 0; i < tab.items.length; i++) { + let tv = tabLayout.getTextViewForItemAt(i); + if (typeface) { + tv.setTypeface(typeface); + } + else { + tv.setTypeface(nativeValue.typeface); + } + + if (fontValue.fontSize) { + tv.setTextSize(fontValue.fontSize); + } + else { + tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size); + } + } + } + } + + private static resetFontInternalProperty(view: view.View, nativeValue: any) { + var tab = view; + + if (tab.items && tab.items.length > 0) { + var tabLayout = tab._getAndroidTabView(); + + for (var i = 0; i < tab.items.length; i++) { + let tv = tabLayout.getTextViewForItemAt(i); + tv.setTypeface(nativeValue.typeface); + tv.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, nativeValue.size); + } + } + } + + private static getNativeFontInternalValue(view: view.View): any { + var tab = view; + var tv: android.widget.TextView = tab._getAndroidTabView().getTextViewForItemAt(0); + if (tv) { + return { + typeface: tv.getTypeface(), + size: tv.getTextSize() + } + } + else { + return null; + } + } + public static registerHandlers() { style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( TabViewStyler.setColorProperty, TabViewStyler.resetColorProperty, TabViewStyler.getColorProperty), "TabView"); + + style.registerHandler(style.fontInternalProperty, new stylersCommon.StylePropertyChangedHandler( + TabViewStyler.setFontInternalProperty, + TabViewStyler.resetFontInternalProperty, + TabViewStyler.getNativeFontInternalValue), "TabView"); } } diff --git a/ui/styling/stylers.ios.ts b/ui/styling/stylers.ios.ts index e30105666..8c01210f0 100644 --- a/ui/styling/stylers.ios.ts +++ b/ui/styling/stylers.ios.ts @@ -921,18 +921,53 @@ export class TabViewStyler implements definition.stylers.Styler { // color private static setColorProperty(view: view.View, newValue: any) { var tab = view; - tab._updateIOSTabBarColors(); + tab._updateIOSTabBarColorsAndFonts(); } private static resetColorProperty(view: view.View, nativeValue: any) { var tab = view; - tab._updateIOSTabBarColors(); + tab._updateIOSTabBarColorsAndFonts(); + } + + // font + private static setFontInternalProperty(view: view.View, newValue: any, nativeValue: any) { + var tab = view; + tab._updateIOSTabBarColorsAndFonts(); + } + + private static resetFontInternalProperty(view: view.View, nativeValue: any) { + var tab = view; + tab._updateIOSTabBarColorsAndFonts(); + } + + private static getNativeFontValue(view: view.View) { + var tab = view; + + let currentFont; + + if (tab.ios && tab.ios.items && tab.ios.items.length > 0) { + let currentAttrs = tab.ios.items[0].titleTextAttributesForState(UIControlState.UIControlStateNormal); + if (currentAttrs) { + currentFont = currentAttrs.objectForKey(NSFontAttributeName); + } + } + + if (!currentFont) { + currentFont = UIFont.systemFontOfSize(UIFont.labelFontSize()); + } + + return currentFont; } public static registerHandlers() { style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler( TabViewStyler.setColorProperty, TabViewStyler.resetColorProperty), "TabView"); + + style.registerHandler(style.fontInternalProperty, new stylersCommon.StylePropertyChangedHandler( + TabViewStyler.setFontInternalProperty, + TabViewStyler.resetFontInternalProperty, + TabViewStyler.getNativeFontValue), "TabView"); } } diff --git a/ui/tab-view/tab-view-common.ts b/ui/tab-view/tab-view-common.ts index 00736e749..04d4dbe30 100644 --- a/ui/tab-view/tab-view-common.ts +++ b/ui/tab-view/tab-view-common.ts @@ -274,7 +274,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr return undefined; } - public _updateIOSTabBarColors(): void { + public _updateIOSTabBarColorsAndFonts(): void { // iOS sepcific } } \ No newline at end of file diff --git a/ui/tab-view/tab-view.d.ts b/ui/tab-view/tab-view.d.ts index c19169fae..2a0d71224 100644 --- a/ui/tab-view/tab-view.d.ts +++ b/ui/tab-view/tab-view.d.ts @@ -101,7 +101,7 @@ declare module "ui/tab-view" { //@private _getAndroidTabView(): any /* org.nativescript.widgets.TabLayout */; - _updateIOSTabBarColors(): void; + _updateIOSTabBarColorsAndFonts(): void; //@endprivate } } diff --git a/ui/tab-view/tab-view.ios.ts b/ui/tab-view/tab-view.ios.ts index 54038e1e9..fd75b46b2 100644 --- a/ui/tab-view/tab-view.ios.ts +++ b/ui/tab-view/tab-view.ios.ts @@ -101,7 +101,7 @@ export class TabViewItem extends common.TabViewItem { function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) { var tabView = data.object; - tabView._updateIOSTabBarColors(); + tabView._updateIOSTabBarColorsAndFonts(); } (common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged; @@ -322,14 +322,14 @@ export class TabView extends common.TabView { (heightMode === utils.layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : height)); } - public _updateIOSTabBarColors(): void { + public _updateIOSTabBarColorsAndFonts(): void { if (!this.items) { return; } var tabBar = this.ios.tabBar; - tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null; + tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null; var states = getTitleAttributesForStates(this); for (var i = 0; i < this.items.length; i++) { @@ -354,8 +354,13 @@ function getTitleAttributesForStates(tabView: TabView): { normalState: any, sele selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor; } + var defaultFont = UIFont.systemFontOfSize(UIFont.labelFontSize()); + var font = (tabView.style)._fontInternal.getUIFont(defaultFont); + normalState[NSFontAttributeName] = font; + selectedState[NSFontAttributeName] = font; + return { normalState: normalState, selectedState: selectedState }; -} +} \ No newline at end of file