javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 11:42:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'release'

Browse Source
This commit is contained in:
Vasko
2020-04-02 12:03:20 +03:00
parent e421129458 fc8f7696e6
commit c150b11bf1
20 changed files with 481 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -1,3 +1,12 @@
## [6.5.1](https://github.com/NativeScript/NativeScript/compare/6.5.0...6.5.1) (2020-03-30)
### Bug Fixes
* **tabs:** dynamic styling colors fixed ([#8460](https://github.com/NativeScript/NativeScript/issues/8460)) ([0a7bee6](https://github.com/NativeScript/NativeScript/commit/0a7bee6))
# [6.5.0](https://github.com/NativeScript/NativeScript/compare/6.4.2...6.5.0) (2020-03-18)

2
api-reports/NativeScript.api.md
View File

@ -2262,6 +2262,8 @@ export class TabNavigationBase extends View {
setTabBarIconColor(tabStripItem: TabStripItem, value: any): void
setTabBarIconSource(tabStripItem: TabStripItem, value: any): void
setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: any): void
setTabBarItemColor(tabStripItem: TabStripItem, value: any): void

28
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.css Normal file
View File

@ -0,0 +1,28 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
TabStripItem:active {
background-color: magenta;
}
.tabsClass0 {
}
.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;
un-selected-item-color: pink;
}

39
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.ts Normal file
View File

@ -0,0 +1,39 @@
import { View } from "tns-core-modules/ui/core/view";
import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
switch (bottomNavigation.tabStrip.className) {
case "tabsClass0":
bottomNavigation.tabStrip.className = "tabsClass1";
break;
case "tabsClass1":
bottomNavigation.tabStrip.className = "tabsClass2";
break;
case "tabsClass2":
bottomNavigation.tabStrip.className = "tabsClass0";
break;
}
}
export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const bottomNavigation = <BottomNavigation>(page.getViewById("bottomNavigation"));
const tabStripItem0 = bottomNavigation.tabStrip.items[0];
const tabStripItem1 = bottomNavigation.tabStrip.items[1];
const tabStripItem2 = bottomNavigation.tabStrip.items[2];
const iconSource0 = tabStripItem0.iconSource;
tabStripItem0.iconSource = tabStripItem1.iconSource;
tabStripItem1.iconClass = "font-awesome font-size";
tabStripItem1.iconSource = tabStripItem2.iconSource;
tabStripItem2.iconClass = "font-awesome font-size";
tabStripItem2.iconSource = iconSource0;
}

44
e2e/ui-tests-app/app/bottom-navigation/dynamic-color-change-page.xml Normal file
View File

@ -0,0 +1,44 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" id="bottomNavigation" >
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Favorites"></Label>
<Image src="res://add_to_fav"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Up"></Label>
<Image src="res://up"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Favorites Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Up Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</GridLayout>
</GridLayout>
</Page>

1
e2e/ui-tests-app/app/bottom-navigation/main-page.ts
View File

@ -27,6 +27,7 @@ export function loadExamples() {
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
examples.set("reselect", "bottom-navigation/reselect-page");
examples.set("item-color", "bottom-navigation/item-color-page");
examples.set("dynamic-color-change", "bottom-navigation/dynamic-color-change-page");
return examples;
}

28
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.css Normal file
View File

@ -0,0 +1,28 @@
.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
TabStripItem:active {
background-color: magenta;
}
.tabsClass0 {
}
.tabsClass1 {
background-color: #79d2a6;
highlight-color: green;
selected-item-color: yellow;
un-selected-item-color: blue;
}
.tabsClass2 {
background-color: orangered;
highlight-color: lightgreen;
selected-item-color: whitesmoke;
un-selected-item-color: pink;
}

39
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.ts Normal file
View File

@ -0,0 +1,39 @@
import { View } from "tns-core-modules/ui/core/view";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";
export function onButtonTap(args) {
const page = <Page>(<View>args.object).page;
const tabs = <Tabs>(page.getViewById("tabs"));
switch (tabs.tabStrip.className) {
case "tabsClass0":
tabs.tabStrip.className = "tabsClass1";
break;
case "tabsClass1":
tabs.tabStrip.className = "tabsClass2";
break;
case "tabsClass2":
tabs.tabStrip.className = "tabsClass0";
break;
}
}
export function onChangeIconSourceTap(args) {
const page = <Page>(<View>args.object).page;
const tabs = <Tabs>(page.getViewById("tabs"));
const tabStripItem0 = tabs.tabStrip.items[0];
const tabStripItem1 = tabs.tabStrip.items[1];
const tabStripItem2 = tabs.tabStrip.items[2];
const iconSource0 = tabStripItem0.iconSource;
tabStripItem0.iconSource = tabStripItem1.iconSource;
tabStripItem1.iconClass = "font-awesome font-size";
tabStripItem1.iconSource = tabStripItem2.iconSource;
tabStripItem2.iconClass = "font-awesome font-size";
tabStripItem2.iconSource = iconSource0;
}

44
e2e/ui-tests-app/app/tabs/dynamic-color-change-page.xml Normal file
View File

@ -0,0 +1,44 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<GridLayout rows="auto,*">
<StackLayout row="0" >
<Button text="Change TabStrip styles dynamically" id="changeStyle" automationText="changeStyle" tap="onButtonTap" />
<Button text="Change Icon source dynamically" id="changeIconSource" automationText="changeIconSource" tap="onChangeIconSourceTap" />
</StackLayout>
<GridLayout row="1">
<Tabs automationText="tabNavigation" id="tabs" >
<TabStrip class="tabsClass0">
<TabStripItem>
<Label text="Home"></Label>
<Image src="font://&#xF10B;" class="font-awesome font-size"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Favorites"></Label>
<Image src="res://add_to_fav"></Image>
</TabStripItem>
<TabStripItem>
<Label text="Up"></Label>
<Image src="res://up"></Image>
</TabStripItem>
</TabStrip>
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Favorites Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Up Page" class="h2 text-center">
</Label>
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>
</GridLayout>
</Page>

1
e2e/ui-tests-app/app/tabs/main-page.ts
View File

@ -34,6 +34,7 @@ export function loadExamples() {
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
examples.set("frame-in-tabs", "tabs/frame-in-tabs");
examples.set("item-color", "tabs/item-color-page");
examples.set("dynamic-color-change", "tabs/dynamic-color-change-page");
return examples;
}

49
e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
View File

@ -319,4 +319,53 @@ describe(`${suite}-${spec}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-dynamic-color-change`, async function () {
await bottomNavigationBasePage.navigateToSample("dynamic-color-change");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
// go through the tabs and check that they are loaded
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
// change icon sources and check the result
const changeIconSource = await driver.waitForElement("changeIconSource");
await changeIconSource.click();
await driver.imageHelper.compareScreen();
const changeStyleBtn = await driver.waitForElement("changeStyle");
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
// change icon sources again
await changeIconSource.click();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await changeIconSource.click();
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
});

49
e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
View File

@ -318,4 +318,53 @@ describe(`${imagePrefix}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-dynamic-color-change`, async function () {
await tabsViewBasePage.navigateToSample("dynamic-color-change");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
// go through the tabs and check that they are loaded
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(0);
await driver.imageHelper.compareScreen();
// change icon sources and check the result
const changeIconSource = await driver.waitForElement("changeIconSource");
await changeIconSource.click();
await driver.imageHelper.compareScreen();
const changeStyleBtn = await driver.waitForElement("changeStyle");
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
// change icon sources again
await changeIconSource.click();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(2);
await driver.imageHelper.compareScreen();
await changeIconSource.click();
await driver.imageHelper.compareScreen();
// change style again
await changeStyleBtn.click();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
});

48
nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
View File

@ -169,13 +169,13 @@ function initializeNativeClasses() {
if (position >= 0 && tabStripItems && tabStripItems[position]) {
tabStripItems[position]._emit(TabStripItem.selectEvent);
owner._setItemColor(tabStripItems[position]);
}
if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
owner._setItemColor(tabStripItems[prevPosition]);
}
owner._setItemsColors(owner.tabStrip.items);
}
public onTap(position: number): boolean {
@ -711,8 +711,27 @@ export class BottomNavigation extends TabNavigationBase {
if (value instanceof Color) {
this._bottomNavigationBar.setBackgroundColor(value.android);
} else {
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
this._bottomNavigationBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
}
this.updateTabStripItems();
}
private updateTabStripItems(): void {
this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
if (tabStripItem.nativeView) {
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
}
});
}
public _setItemsColors(items: Array<TabStripItem>): void {
items.forEach((item) => {
if (item.nativeView) {
this._setItemColor(item);
}
});
}
public getTabBarSelectedItemColor(): Color {
@ -721,6 +740,7 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this._setItemsColors(this.tabStrip.items);
}
public getTabBarUnSelectedItemColor(): Color {
@ -729,20 +749,22 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this._setItemsColors(this.tabStrip.items);
}
private updateItem(tabStripItem: TabStripItem): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
}
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
this.updateItem(tabStripItem);
}
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
this.updateItem(tabStripItem);
}
public _setItemColor(tabStripItem: TabStripItem) {
@ -792,6 +814,10 @@ export class BottomNavigation extends TabNavigationBase {
this.setIconColor(tabStripItem);
}
public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
this.updateItem(tabStripItem);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
if (value.fontSize) {
tabStripItem.nativeViewProtected.setTextSize(value.fontSize);

43
nativescript-core/ui/bottom-navigation/bottom-navigation.ios.ts
View File

@ -359,6 +359,7 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
this.updateAllItemsColors();
}
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
@ -377,15 +378,35 @@ export class BottomNavigation extends TabNavigationBase {
this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
}
public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
if (!this._unSelectedItemColor && !this._selectedItemColor) {
const image = this.getIcon(tabStripItem);
private setItemColors(): void {
if (this._selectedItemColor) {
this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor.ios;
}
if (this._unSelectedItemColor) {
this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
}
}
private setIconColor(tabStripItem: TabStripItem, forceReload: boolean = false): void {
if (forceReload || (!this._unSelectedItemColor && !this._selectedItemColor)) {
// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
const tabStripColor = (this.selectedIndex === tabStripItem._index) ? this._selectedItemColor : this._unSelectedItemColor;
const image = this.getIcon(tabStripItem, tabStripColor);
tabStripItem.nativeView.image = image;
tabStripItem.nativeView.selectedImage = image;
}
}
public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
this.setIconColor(tabStripItem);
}
public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
this.updateItemColors(tabStripItem);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
this.setViewAttributes(tabStripItem.nativeView, tabStripItem.label);
}
@ -410,6 +431,7 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.updateAllItemsColors();
}
public getTabBarUnSelectedItemColor(): Color {
@ -418,6 +440,7 @@ export class BottomNavigation extends TabNavigationBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.updateAllItemsColors();
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
@ -577,6 +600,20 @@ export class BottomNavigation extends TabNavigationBase {
}
}
public updateAllItemsColors() {
this.setItemColors();
if (this.tabStrip && this.tabStrip.items) {
this.tabStrip.items.forEach(tabStripItem => {
this.updateItemColors(tabStripItem);
});
}
}
private updateItemColors(tabStripItem: TabStripItem): void {
updateBackgroundPositions(this.tabStrip, tabStripItem);
this.setIconColor(tabStripItem, true);
}
private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
let image: UIImage;
let title: string;

6
nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts vendored
View File

@ -210,6 +210,12 @@ export class TabNavigationBase extends View {
*/
setTabBarIconColor(tabStripItem: TabStripItem, value: any): void
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarIconSource(tabStripItem: TabStripItem, value: any): void
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"

4
nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts
View File

@ -203,6 +203,10 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// overridden by inheritors
}
public setTabBarIconSource(tabStripItem: TabStripItem, value: any): void {
// overridden by inheritors
}
public getTabBarItemFontSize(tabStripItem: TabStripItem): any {
// overridden by inheritors
return null;

2
nativescript-core/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
View File

@ -162,7 +162,7 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
const parent = <TabStrip>this.parent;
const tabStripParent = parent && <TabNavigationBase>parent.parent;
return tabStripParent && tabStripParent.setTabBarIconColor(this, args.value);
return tabStripParent && tabStripParent.setTabBarIconSource(this, args.value);
});
this.image.on("srcChange", this._imageSrcHandler);
}

2
nativescript-core/ui/tab-view/tab-view.android.ts
View File

@ -733,7 +733,7 @@ export class TabView extends TabViewBase {
if (value instanceof Color) {
this._tabLayout.setBackgroundColor(value.android);
} else {
this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
this._tabLayout.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
}
}

44
nativescript-core/ui/tabs/tabs.android.ts
View File

@ -794,8 +794,19 @@ export class Tabs extends TabsBase {
if (value instanceof Color) {
this._tabsBar.setBackgroundColor(value.android);
} else {
this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources));
this._tabsBar.setBackground(tryCloneDrawable(value, this.nativeViewProtected.getResources()));
}
this.updateTabStripItems();
}
private updateTabStripItems(): void {
this.tabStrip.items.forEach((tabStripItem: TabStripItem) => {
if (tabStripItem.nativeView) {
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItem._index, tabItemSpec);
}
});
}
public getTabBarHighlightColor(): number {
@ -807,12 +818,21 @@ export class Tabs extends TabsBase {
this._tabsBar.setSelectedIndicatorColors([color]);
}
private setItemsColors(items: Array<TabStripItem>): void {
items.forEach((item) => {
if (item.nativeView) {
this._setItemColor(item);
}
});
}
public getTabBarSelectedItemColor(): Color {
return this._selectedItemColor;
}
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
}
public getTabBarUnSelectedItemColor(): Color {
@ -821,20 +841,22 @@ export class Tabs extends TabsBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.setItemsColors(this.tabStrip.items);
}
private updateItem(tabStripItem: TabStripItem): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
}
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
this.updateItem(tabStripItem);
}
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: android.graphics.drawable.Drawable | Color): void {
// TODO: Should figure out a way to do it directly with the the nativeView
const tabStripItemIndex = this.tabStrip.items.indexOf(tabStripItem);
const tabItemSpec = this.createTabItemSpec(tabStripItem);
this.updateAndroidItemAt(tabStripItemIndex, tabItemSpec);
this.updateItem(tabStripItem);
}
public _setItemColor(tabStripItem: TabStripItem) {
@ -884,6 +906,10 @@ export class Tabs extends TabsBase {
this.setIconColor(tabStripItem);
}
public setTabBarIconSource(tabStripItem: TabStripItem, value: number | Color): void {
this.updateItem(tabStripItem);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
if (value.fontSize) {
tabStripItem.nativeViewProtected.setTextSize(value.fontSize);

26
nativescript-core/ui/tabs/tabs.ios.ts
View File

@ -550,12 +550,12 @@ export class Tabs extends TabsBase {
if (tabStripItems) {
if (tabStripItems[newIndex]) {
tabStripItems[newIndex]._emit(TabStripItem.selectEvent);
this.setIconColor(tabStripItems[newIndex]);
this.updateItemColors(tabStripItems[newIndex]);
}
if (tabStripItems[oldIndex]) {
tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent);
this.setIconColor(tabStripItems[oldIndex]);
this.updateItemColors(tabStripItems[oldIndex]);
}
}
@ -751,6 +751,21 @@ export class Tabs extends TabsBase {
}
}
private updateAllItemsColors() {
this._defaultItemBackgroundColor = null;
this.setItemColors();
if (this.tabStrip && this.tabStrip.items) {
this.tabStrip.items.forEach(tabStripItem => {
this.updateItemColors(tabStripItem);
});
}
}
private updateItemColors(tabStripItem: TabStripItem): void {
updateBackgroundPositions(this.tabStrip, tabStripItem);
this.setIconColor(tabStripItem, true);
}
private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
let image: UIImage;
let title: string;
@ -870,6 +885,7 @@ export class Tabs extends TabsBase {
public setTabBarBackgroundColor(value: UIColor | Color): void {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
this.updateAllItemsColors();
}
public setTabBarItemTitle(tabStripItem: TabStripItem, value: string): void {
@ -966,6 +982,10 @@ export class Tabs extends TabsBase {
this.setIconColor(tabStripItem, true);
}
public setTabBarIconSource(tabStripItem: TabStripItem, value: UIColor | Color): void {
this.updateItemColors(tabStripItem);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
this.setViewTextAttributes(tabStripItem.label);
}
@ -1030,6 +1050,7 @@ export class Tabs extends TabsBase {
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
this.updateAllItemsColors();
}
public getTabBarUnSelectedItemColor(): Color {
@ -1038,6 +1059,7 @@ export class Tabs extends TabsBase {
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
this.updateAllItemsColors();
}
private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {