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(bottom-nav): adding new properties

Browse Source
This commit is contained in:
Vasko
2020-03-12 14:21:15 +02:00
parent c60b35d590
commit 40a8fb9c2d
5 changed files with 161 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -258,6 +258,9 @@ export class BottomNavigation extends TabNavigationBase {
private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
private _iconsCache = {};
private _selectedItemColor: Color;
private _unSelectedItemColor: Color;
constructor() {
super();
@@ -372,18 +375,20 @@ export class BottomNavigation extends TabNavigationBase {
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label, this.viewController.tabBar);
this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label);
}
public setTabBarIconColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
const image = this.getIcon(tabStripItem);
if (!this._unSelectedItemColor && !this._selectedItemColor) {
const image = this.getIcon(tabStripItem);
tabStripItem.nativeView.image = image;
tabStripItem.nativeView.selectedImage = image;
tabStripItem.nativeView.image = image;
tabStripItem.nativeView.selectedImage = image;
}
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label, this.viewController.tabBar);
this.setViewTextAttributes(tabStripItem.nativeView, tabStripItem.label);
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
@@ -400,6 +405,22 @@ export class BottomNavigation extends TabNavigationBase {
this._ios.tabBar.tintColor = nativeColor;
}
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 onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
@@ -521,7 +542,7 @@ export class BottomNavigation extends TabNavigationBase {
const tabBarItem = this.createTabBarItem(tabStripItem, i);
updateTitleAndIconPositions(tabStripItem, tabBarItem, controller);
setViewTextAttributes(tabBarItem, tabStripItem.label, this.viewController.tabBar);
this.setViewTextAttributes(tabBarItem, tabStripItem.label);
controller.tabBarItem = tabBarItem;
tabStripItem._index = i;
@@ -531,6 +552,8 @@ export class BottomNavigation extends TabNavigationBase {
controllers.addObject(controller);
});
this._setItemImages();
this._ios.viewControllers = controllers;
this._ios.customizableViewControllers = null;
@@ -538,6 +561,23 @@ export class BottomNavigation extends TabNavigationBase {
this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate;
}
private _setItemImages() {
if (this._selectedItemColor || this._unSelectedItemColor) {
if (this.tabStrip && this.tabStrip.items) {
this.tabStrip.items.forEach(item => {
if (this._unSelectedItemColor && item.nativeView) {
item.nativeView.image = this.getIcon(item, this._unSelectedItemColor);
item.nativeView.tintColor = this._unSelectedItemColor;
}
if (this._selectedItemColor && item.nativeView) {
item.nativeView.selectedImage = this.getIcon(item, this._selectedItemColor);
item.nativeView.tintColor = this._selectedItemColor;
}
});
}
}
}
private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
let image: UIImage;
let title: string;
@@ -569,7 +609,7 @@ export class BottomNavigation extends TabNavigationBase {
}
}
private getIcon(tabStripItem: TabStripItem): UIImage {
private getIcon(tabStripItem: TabStripItem, color?: Color): UIImage {
// Image and Label children of TabStripItem
// take priority over its `iconSource` and `title` properties
const iconSource = tabStripItem.image && tabStripItem.image.src;
@@ -579,7 +619,9 @@ export class BottomNavigation extends TabNavigationBase {
const target = tabStripItem.image;
const font = target.style.fontInternal;
const color = target.style.color;
if (!color) {
color = target.style.color;
}
const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");
let isFontIcon = false;
@@ -688,33 +730,39 @@ export class BottomNavigation extends TabNavigationBase {
this.setViewControllers(this.items);
selectedIndexProperty.coerce(this);
}
}
function setViewTextAttributes(item: UITabBarItem, view: View, tabBar: UITabBar): any {
if (!view) {
return null;
}
private setViewTextAttributes(item: UITabBarItem, view: View): any {
if (!view) {
return null;
}
const defaultTabItemFontSize = 10;
const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize;
const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
const tabItemTextColor = view.style.color;
const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
let attributes: any = { [NSFontAttributeName]: font };
if (textColor) {
attributes[UITextAttributeTextColor] = textColor;
attributes[NSForegroundColorAttributeName] = textColor;
}
const defaultTabItemFontSize = 10;
const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize;
const font: UIFont = view.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
const tabItemTextColor = view.style.color;
const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
let attributes: any = { [NSFontAttributeName]: font };
item.setTitleTextAttributesForState(attributes, UIControlState.Selected);
item.setTitleTextAttributesForState(attributes, UIControlState.Normal);
if (!this._selectedItemColor && !this._unSelectedItemColor) {
if (textColor) {
attributes[UITextAttributeTextColor] = textColor;
attributes[NSForegroundColorAttributeName] = textColor;
}
} else {
this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor && this._unSelectedItemColor.ios;
this.viewController.tabBar.selectedImageTintColor = this._selectedItemColor && this._selectedItemColor.ios;
}
// there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip
// https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor
// to fix the above issue we are applying the selected fix only for the case, when there is no background set
// in that case we have the following known issue:
// we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items
if (!tabBar.barTintColor && attributes[UITextAttributeTextColor] && (majorVersion > 9)) {
tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor];
item.setTitleTextAttributesForState(attributes, UIControlState.Selected);
item.setTitleTextAttributesForState(attributes, UIControlState.Normal);
// there's a bug when setting the item color on ios 13 if there's no background set to the tabstrip
// https://books.google.bg/books?id=99_BDwAAQBAJ&q=tabBar.unselectedItemTintColor
// to fix the above issue we are applying the selected fix only for the case, when there is no background set
// in that case we have the following known issue:
// // we will set the color to all unselected items, so you won't be able to set different colors for the different not selected items
if (!this.viewController.tabBar.barTintColor && attributes[UITextAttributeTextColor] && (majorVersion > 9)) {
this.viewController.tabBar.unselectedItemTintColor = attributes[UITextAttributeTextColor];
}
}
}

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

@@ -4,7 +4,7 @@
*/ /** */
import {
View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData
View, ViewBase, Property, CoercibleProperty, isIOS, AddArrayFromBuilder, AddChildFromBuilder, EventData, Color
} from "../../core/view";
import { TabStrip } from "../tab-strip";
import { TabStripItem } from "../tab-strip-item";
@@ -150,6 +150,30 @@ export class TabNavigationBase extends View {
*/
setTabBarHighlightColor(value: any)
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
getTabBarSelectedItemColor(): any
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarSelectedItemColor(value: any)
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
getTabBarUnSelectedItemColor(): any
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"
*/
setTabBarUnSelectedItemColor(value: any)
/**
* @private
* Method is intended to be overridden by inheritors and used as "protected"

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

@@ -150,6 +150,22 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
// overridden by inheritors
}
public getTabBarSelectedItemColor(): any {
// overridden by inheritors
}
public setTabBarSelectedItemColor(value: any) {
// overridden by inheritors
}
public getTabBarUnSelectedItemColor(): any {
// overridden by inheritors
}
public setTabBarUnSelectedItemColor(value: any) {
// overridden by inheritors
}
public getTabBarColor(): any {
// overridden by inheritors
return null;

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

@@ -32,6 +32,16 @@ export class TabStrip extends View {
*/
highlightColor: Color;
/**
* Gets or sets the color of the selected item in the tab strip.
*/
selectedItemColor: Color;
/**
* Gets or sets the color of the non-selected items in the tab strip.
*/
unSelectedItemColor: Color;
/**
* @private
*/
@@ -73,3 +83,5 @@ export interface TabStripItemEventData extends EventData {
export const iosIconRenderingModeProperty: Property<TabStrip, "automatic" | "alwaysOriginal" | "alwaysTemplate">;
export const isIconSizeFixedProperty: Property<TabStrip, boolean>;
export const selectedItemColorProperty: Property<TabStrip, Color>;
export const unSelectedItemColorProperty: Property<TabStrip, Color>;

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

@@ -17,6 +17,8 @@ export const traceCategory = "TabView";
// Place this on top because the webpack ts-loader doesn't work when export
// is after reference
export const highlightColorProperty = new Property<TabStrip, Color>({ name: "highlightColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
export const selectedItemColorProperty = new Property<TabStrip, Color>({ name: "selectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
export const unSelectedItemColorProperty = new Property<TabStrip, Color>({ name: "unSelectedItemColor", equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
@CSSType("TabStrip")
export class TabStrip extends View implements TabStripDefinition, AddChildFromBuilder, AddArrayFromBuilder {
@@ -25,6 +27,8 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
public isIconSizeFixed: boolean;
public iosIconRenderingMode: "automatic" | "alwaysOriginal" | "alwaysTemplate";
public highlightColor: Color;
public selectedItemColor: Color;
public unSelectedItemColor: Color;
public _hasImage: boolean;
public _hasTitle: boolean;
@@ -127,6 +131,28 @@ export class TabStrip extends View implements TabStripDefinition, AddChildFromBu
return parent && parent.setTabBarHighlightColor(value);
}
[selectedItemColorProperty.getDefault](): Color {
const parent = <TabNavigationBase>this.parent;
return parent && parent.getTabBarSelectedItemColor();
}
[selectedItemColorProperty.setNative](value: Color) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarSelectedItemColor(value);
}
[unSelectedItemColorProperty.getDefault](): Color {
const parent = <TabNavigationBase>this.parent;
return parent && parent.getTabBarUnSelectedItemColor();
}
[unSelectedItemColorProperty.setNative](value: Color) {
const parent = <TabNavigationBase>this.parent;
return parent && parent.setTabBarUnSelectedItemColor(value);
}
}
export interface TabStrip {
@@ -150,3 +176,5 @@ export const isIconSizeFixedProperty = new Property<TabStrip, boolean>({
isIconSizeFixedProperty.register(TabStrip);
highlightColorProperty.register(TabStrip);
selectedItemColorProperty.register(TabStrip);
unSelectedItemColorProperty.register(TabStrip);