diff --git a/apps/app/ui-tests-app/tab-view/all.xml b/apps/app/ui-tests-app/tab-view/all.xml index 84d342d3e..aa5243b0f 100644 --- a/apps/app/ui-tests-app/tab-view/all.xml +++ b/apps/app/ui-tests-app/tab-view/all.xml @@ -1,5 +1,5 @@ - + diff --git a/apps/app/ui-tests-app/tab-view/selected.xml b/apps/app/ui-tests-app/tab-view/selected.xml index 3a8a12f60..8618e21e4 100644 --- a/apps/app/ui-tests-app/tab-view/selected.xml +++ b/apps/app/ui-tests-app/tab-view/selected.xml @@ -1,5 +1,5 @@ - + diff --git a/apps/app/ui-tests-app/tab-view/tabsBackground.xml b/apps/app/ui-tests-app/tab-view/tabsBackground.xml index 9b74b46dc..be7ebf5e3 100644 --- a/apps/app/ui-tests-app/tab-view/tabsBackground.xml +++ b/apps/app/ui-tests-app/tab-view/tabsBackground.xml @@ -1,5 +1,5 @@ - + diff --git a/tns-core-modules/ui/tab-view/tab-view-common.ts b/tns-core-modules/ui/tab-view/tab-view-common.ts index fad893d70..16698c394 100644 --- a/tns-core-modules/ui/tab-view/tab-view-common.ts +++ b/tns-core-modules/ui/tab-view/tab-view-common.ts @@ -8,8 +8,6 @@ export * from "ui/core/view"; export const traceCategory = "TabView"; -// TODO: Change base class to ViewBase and use addView method to add it. -// This way we will support property and binding propagation automatically. export abstract class TabViewItemBase extends ViewBase implements TabViewItemDefinition, AddChildFromBuilder { private _title: string = ""; private _view: View; @@ -78,6 +76,27 @@ export class TabViewBase extends View implements TabViewDefinition, AddChildFrom public androidOffscreenTabLimit: number; public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate"; + get tabTextColor(): Color { + return this.style.tabTextColor; + } + set tabTextColor(value: Color) { + this.style.tabTextColor = value; + } + + get tabBackgroundColor(): Color { + return this.style.tabBackgroundColor; + } + set tabBackgroundColor(value: Color) { + this.style.tabBackgroundColor = value; + } + + get selectedTabTextColor(): Color { + return this.style.selectedTabTextColor; + } + set selectedTabTextColor(value: Color) { + this.style.selectedTabTextColor = value; + } + public _addArrayFromBuilder(name: string, value: Array) { if (name === "items") { this.items = value; diff --git a/tns-core-modules/ui/tab-view/tab-view.android.ts b/tns-core-modules/ui/tab-view/tab-view.android.ts index 24599da4b..b0d448781 100644 --- a/tns-core-modules/ui/tab-view/tab-view.android.ts +++ b/tns-core-modules/ui/tab-view/tab-view.android.ts @@ -16,6 +16,15 @@ const ACCENT_COLOR = "colorAccent"; const PRIMARY_COLOR = "colorPrimary"; const DEFAULT_ELEVATION = 4; +let defaultAccentColor: number = undefined; +function getDefaultAccentColor(context: android.content.Context): number { + if (defaultAccentColor === undefined) { + //Fallback color: https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html + defaultAccentColor = ad.resources.getPalleteColor(ACCENT_COLOR, context) || 0xFF33B5E5; + } + return defaultAccentColor; +} + export class TabViewItem extends TabViewItemBase { public nativeView: android.widget.TextView; public tabItemSpec: org.nativescript.widgets.TabItemSpec; @@ -62,17 +71,6 @@ export class TabViewItem extends TabViewItemBase { const result = getTransformedText(this.title, value); tv.setText(result); } - - get [tabTextColorProperty.native](): android.content.res.ColorStateList { - return this.nativeView.getTextColors(); - } - set [tabTextColorProperty.native](value: android.content.res.ColorStateList | Color) { - if (value instanceof Color) { - this.nativeView.setTextColor(value.android); - } else { - this.nativeView.setTextColor(value); - } - } } let PagerAdapterClass; @@ -279,7 +277,7 @@ export class TabView extends TabViewBase { this.setElevation(); - const accentColor = ad.resources.getPalleteColor(ACCENT_COLOR, this._context); + const accentColor = getDefaultAccentColor(this._context); if (accentColor) { this._tabLayout.setSelectedIndicatorColors([accentColor]); } @@ -370,28 +368,35 @@ export class TabView extends TabViewBase { this.setAdapter(value); } - get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable { - return this._tabLayout.getBackground(); + get [tabBackgroundColorProperty.native](): android.graphics.drawable.Drawable.ConstantState { + return this._tabLayout.getBackground().getConstantState(); } - set [tabBackgroundColorProperty.native](value: android.graphics.drawable.Drawable | Color) { + set [tabBackgroundColorProperty.native](value: android.graphics.drawable.Drawable.ConstantState | Color) { if (value instanceof Color) { this._tabLayout.setBackgroundColor(value.android); } else { - this._tabLayout.setBackground(value); + this._tabLayout.setBackground(value.newDrawable()); } } + get [tabTextColorProperty.native](): number { + return this._tabLayout.getTabTextColor(); + } + set [tabTextColorProperty.native](value: number | Color) { + let color = value instanceof Color ? value.android : value; + this._tabLayout.setTabTextColor(color); + } + get [selectedTabTextColorProperty.native](): number { return this._tabLayout.getSelectedTabTextColor(); } set [selectedTabTextColorProperty.native](value: number | Color) { let color = value instanceof Color ? value.android : value; - this._tabLayout.setTabTextColor(color); + this._tabLayout.setSelectedTabTextColor(color); } get [androidSelectedTabHighlightColorProperty.native](): number { - //from https://developer.android.com/samples/SlidingTabsColors/src/com.example.android.common/view/SlidingTabStrip.html - return 0xFF33B5E5; + return getDefaultAccentColor(this._context); } set [androidSelectedTabHighlightColorProperty.native](value: number | Color) { let tabLayout = this._tabLayout; diff --git a/tns-core-modules/ui/tab-view/tab-view.ios.ts b/tns-core-modules/ui/tab-view/tab-view.ios.ts index 385186122..fea61b49d 100644 --- a/tns-core-modules/ui/tab-view/tab-view.ios.ts +++ b/tns-core-modules/ui/tab-view/tab-view.ios.ts @@ -133,8 +133,7 @@ export class TabViewItem extends TabViewItemBase { // TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem. // Delete the repeating code. const states = getTitleAttributesForStates(parent); - tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); - tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected); + applyStatesToItem(tabBarItem, states); controller.tabBarItem = tabBarItem; } } @@ -256,8 +255,7 @@ export class TabView extends TabViewBase { if (!icon) { updateItemTitlePosition(tabBarItem); } - tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); - tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected); + applyStatesToItem(tabBarItem, states); newController.tabBarItem = tabBarItem; controllers.addObject(newController); @@ -360,9 +358,7 @@ export class TabView extends TabViewBase { const tabBar = this.ios.tabBar; const states = getTitleAttributesForStates(this); for (let i = 0; i < tabBar.items.count; i++) { - const item = tabBar.items[i]; - item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); - item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected); + applyStatesToItem(tabBar.items[i], states); } } @@ -402,6 +398,7 @@ export class TabView extends TabViewBase { return null; } set [tabTextColorProperty.native](value: UIColor) { + this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value; this._updateIOSTabBarColorsAndFonts(); } @@ -416,7 +413,6 @@ export class TabView extends TabViewBase { return this._ios.tabBar.tintColor; } set [selectedTabTextColorProperty.native](value: UIColor) { - this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value; this._updateIOSTabBarColorsAndFonts(); } @@ -428,24 +424,6 @@ export class TabView extends TabViewBase { this._updateIOSTabBarTextTransform(value); } - // private static getNativeFontValue(v: view.View) { - // var tabBar = v.ios.tabBar; - // let currentFont; - - // if (tabBar.items.count > 0) { - // let currentAttrs = tabBar.items[0].titleTextAttributesForState(UIControlState.Normal); - // if (currentAttrs) { - // currentFont = currentAttrs.objectForKey(NSFontAttributeName); - // } - // } - - // if (!currentFont) { - // currentFont = UIFont.systemFontOfSize(getter(UIFont, UIFont.labelFontSize)); - // } - - // return currentFont; - // } - // TODO: Move this to TabViewItem get [fontInternalProperty.native](): Font { return null; @@ -472,28 +450,35 @@ export class TabView extends TabViewBase { } } -function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } { - const normalState = {}; - if (tabView.color instanceof Color) { - normalState[UITextAttributeTextColor] = tabView.color.ios; - } +interface TabStates { + normalState?: any; + selectedState?: any; +} - const selectedState = {}; +function getTitleAttributesForStates(tabView: TabView): TabStates { + const result: TabStates = { }; + + const font = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(10)); let tabItemTextColor = tabView.style.tabTextColor; if (tabItemTextColor instanceof Color) { - selectedState[UITextAttributeTextColor] = tabItemTextColor.ios; - } - else { - selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor; + result.normalState = { + [UITextAttributeTextColor]: tabItemTextColor.ios, + [NSFontAttributeName]: font + } } - const defaultFont = UIFont.systemFontOfSize(10); - const font = tabView.style.fontInternal.getUIFont(defaultFont); - normalState[NSFontAttributeName] = font; - selectedState[NSFontAttributeName] = font; + const tabSelectedItemTextColor = tabView.style.selectedTabTextColor; + if (tabSelectedItemTextColor instanceof Color) { + result.selectedState = { + [UITextAttributeTextColor]: tabSelectedItemTextColor.ios, + [NSFontAttributeName]: font + } + } - return { - normalState: normalState, - selectedState: selectedState - }; + return result; } + +function applyStatesToItem(item: UITabBarItem, states: TabStates) { + item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal); + item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected); +} \ No newline at end of file