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

feat: new feature implementation in android

Browse Source 
Implemented selectedItemColor and unSelectedItemColor properties on TabStrip
This commit is contained in:
Vasko
2020-03-12 17:01:13 +02:00
parent 0069521fcc
commit 3a27fc36ef
4 changed files with 84 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -166,8 +166,6 @@ function initializeNativeClasses() {
if (prevPosition >= 0 && tabStripItems && tabStripItems[prevPosition]) {
tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
}
owner.selectedIndex = position;
}
public onTap(position: number): boolean {
@@ -249,6 +247,8 @@ export class BottomNavigation extends TabNavigationBase {
private _attachedToWindow = false;
public _originalBackground: any;
private _textTransform: TextTransform = "none";
private _selectedItemColor: Color;
private _unSelectedItemColor: Color;
constructor() {
super();
@@ -521,6 +521,7 @@ export class BottomNavigation extends TabNavigationBase {
}
this._currentFragment = fragment;
this.selectedIndex = position;
const tabItems = this.items;
const tabItem = tabItems ? tabItems[position] : null;
@@ -597,10 +598,11 @@ export class BottomNavigation extends TabNavigationBase {
tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
// COLOR
const color = titleLabel.style.color;
if (color) {
tabItemSpec.color = color.android;
let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
if (!color) {
color = titleLabel.style.color;
}
tabItemSpec.color = color && color.android;
// FONT
const fontInternal = titleLabel.style.fontInternal;
@@ -612,7 +614,7 @@ export class BottomNavigation extends TabNavigationBase {
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
const iconInfo = this.getIconInfo(tabStripItem);
const iconInfo = this.getIconInfo(tabStripItem, color);
if (iconInfo) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
@@ -629,7 +631,7 @@ export class BottomNavigation extends TabNavigationBase {
return tabItemSpec;
}
private getOriginalIcon(tabStripItem: TabStripItem): android.graphics.Bitmap {
private getOriginalIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.Bitmap {
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (!iconSource) {
return null;
@@ -640,7 +642,9 @@ export class BottomNavigation extends TabNavigationBase {
const fontIconCode = iconSource.split("//")[1];
const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
const font = target.style.fontInternal;
const color = target.style.color;
if (!color) {
color = target.style.color;
}
is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
} else {
is = ImageSource.fromFileOrResourceSync(iconSource);
@@ -666,8 +670,8 @@ export class BottomNavigation extends TabNavigationBase {
return new IconInfo();
}
private getIconInfo(tabStripItem: TabStripItem): IconInfo {
let originalIcon = this.getOriginalIcon(tabStripItem);
private getIconInfo(tabStripItem: TabStripItem, color?: Color): IconInfo {
let originalIcon = this.getOriginalIcon(tabStripItem, color);
return this.getDrawableInfo(originalIcon);
}
@@ -702,6 +706,22 @@ export class BottomNavigation extends TabNavigationBase {
}
}
public getTabBarSelectedItemColor(): Color {
return this._selectedItemColor;
}
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
}
public getTabBarUnSelectedItemColor(): Color {
return this._unSelectedItemColor;
}
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
}
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);
@@ -717,6 +737,14 @@ export class BottomNavigation extends TabNavigationBase {
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
const isSelected = (tabStripItem._index === this.selectedIndex);
if (isSelected) {
value = this._selectedItemColor || value;
} else {
value = this._unSelectedItemColor || value;
}
if (typeof value === "number") {
tabStripItem.nativeViewProtected.setTextColor(value);
} else {
@@ -728,7 +756,9 @@ export class BottomNavigation extends TabNavigationBase {
const index = tabStripItem._index;
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawableInfo = this.getIconInfo(tabStripItem);
const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
const drawableInfo = this.getIconInfo(tabStripItem, color);
imgView.setImageDrawable(drawableInfo.drawable);
}

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

@@ -257,7 +257,6 @@ export class BottomNavigation extends TabNavigationBase {
private _delegate: UITabBarControllerDelegateImpl;
private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
private _iconsCache = {};
private _selectedItemColor: Color;
private _unSelectedItemColor: Color;
@@ -743,6 +742,7 @@ export class BottomNavigation extends TabNavigationBase {
const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
let attributes: any = { [NSFontAttributeName]: font };
// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
if (!this._selectedItemColor && !this._unSelectedItemColor) {
if (textColor) {
attributes[UITextAttributeTextColor] = textColor;

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

@@ -374,6 +374,8 @@ export class Tabs extends TabsBase {
private _androidViewId: number = -1;
public _originalBackground: any;
private _textTransform: TextTransform = "uppercase";
private _selectedItemColor: Color;
private _unSelectedItemColor: Color;
constructor() {
super();
@@ -667,11 +669,13 @@ export class Tabs extends TabsBase {
tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
// COLOR
const color = nestedLabel.style.color;
if (color) {
tabItemSpec.color = color.android;
let color = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
if (!color) {
color = nestedLabel.style.color;
}
tabItemSpec.color = color && color.android;
// FONT
const fontInternal = nestedLabel.style.fontInternal;
if (fontInternal) {
@@ -682,7 +686,7 @@ export class Tabs extends TabsBase {
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
const icon = this.getIcon(tabStripItem);
const icon = this.getIcon(tabStripItem, color);
if (icon) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
@@ -698,7 +702,7 @@ export class Tabs extends TabsBase {
return tabItemSpec;
}
private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
private getIcon(tabStripItem: TabStripItem, color?: Color): android.graphics.drawable.BitmapDrawable {
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (!iconSource) {
return null;
@@ -709,7 +713,9 @@ export class Tabs extends TabsBase {
const fontIconCode = iconSource.split("//")[1];
const target = tabStripItem.image ? tabStripItem.image : tabStripItem;
const font = target.style.fontInternal;
const color = target.style.color;
if (!color) {
color = target.style.color;
}
is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
} else {
is = ImageSource.fromFileOrResourceSync(iconSource);
@@ -801,6 +807,22 @@ export class Tabs extends TabsBase {
this._tabsBar.setSelectedIndicatorColors([color]);
}
public getTabBarSelectedItemColor(): Color {
return this._selectedItemColor;
}
public setTabBarSelectedItemColor(value: Color) {
this._selectedItemColor = value;
}
public getTabBarUnSelectedItemColor(): Color {
return this._unSelectedItemColor;
}
public setTabBarUnSelectedItemColor(value: Color) {
this._unSelectedItemColor = value;
}
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);
@@ -816,6 +838,14 @@ export class Tabs extends TabsBase {
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: number | Color): void {
// if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
const isSelected = (tabStripItem._index === this.selectedIndex);
if (isSelected) {
value = this._selectedItemColor || value;
} else {
value = this._unSelectedItemColor || value;
}
if (typeof value === "number") {
tabStripItem.nativeViewProtected.setTextColor(value);
} else {
@@ -827,7 +857,9 @@ export class Tabs extends TabsBase {
const index = tabStripItem._index;
const tabBarItem = this._tabsBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawable = this.getIcon(tabStripItem);
const color = (tabStripItem._index === this.selectedIndex) ? this._selectedItemColor : this._unSelectedItemColor;
const drawable = this.getIcon(tabStripItem, color);
imgView.setImageDrawable(drawable);
}

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

@@ -461,7 +461,6 @@ export class Tabs extends TabsBase {
private _iconsCache = {};
private _backgroundIndicatorColor: UIColor;
public _defaultItemBackgroundColor: UIColor;
private _selectedItemColor: Color;
private _unSelectedItemColor: Color;
@@ -916,12 +915,9 @@ export class Tabs extends TabsBase {
public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
let image: UIImage;
if (!this._unSelectedItemColor && !this._selectedItemColor) {
image = this.getIcon(tabStripItem);
} else {
const isSelected = this.isSelectedAndHightlightedItem(tabStripItem);
image = this.getIcon(tabStripItem, isSelected ? this._selectedItemColor : this._unSelectedItemColor);
}
// 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;
image = this.getIcon(tabStripItem, tabStripColor);
tabStripItem.nativeView.image = image;
}