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

feat: add css for tabstripitem for bottom navigation ios (#7482)

Browse Source
This commit is contained in:
Martin Yankov
2019-07-10 09:59:04 +03:00
committed by GitHub
parent c0db22d5ee
commit c9a0b71c37
2 changed files with 100 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
View File

@ -1,9 +1,12 @@
// Types
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
//Requires
import { TabNavigationBase, itemsProperty, selectedIndexProperty } from "../tab-navigation-base/tab-navigation-base";
import { Font } from "../styling/font";
import { getTransformedText } from "../text-base";
import { Frame } from "../frame";
import { ios as iosView, View, CSSType } from "../core/view";
import { ios as iosUtils, layout } from "../../utils/utils";
@ -96,6 +99,15 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl
// "< More" cannot be visible after clicking on the main tab bar buttons.
let backToMoreWillBeVisible = false;
owner._handleTwoNavigationBars(backToMoreWillBeVisible);
if (tabBarController.viewControllers && tabBarController.viewControllers.containsObject(viewController)) {
const position = tabBarController.viewControllers.indexOfObject(viewController);
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
if (tabStripItems) {
tabStripItems[position]._emit(TabStripItem.tapEvent);
}
}
}
if ((<any>tabBarController).selectedViewController === viewController) {
@ -115,6 +127,17 @@ class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControl
const owner = this._owner.get();
if (owner) {
if (tabBarController.viewControllers && tabBarController.viewControllers.containsObject(viewController)) {
const position = tabBarController.viewControllers.indexOfObject(viewController);
const prevPosition = owner.selectedIndex;
const tabStripItems = owner.tabStrip && owner.tabStrip.items;
if (tabStripItems) {
tabStripItems[position]._emit(TabStripItem.selectEvent);
tabStripItems[prevPosition]._emit(TabStripItem.unselectEvent);
}
}
owner._onViewControllerShown(viewController);
}
@ -285,8 +308,68 @@ export class BottomNavigation extends TabNavigationBase {
this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
}
public setTabBarItemBackgroundColor(item: TabStripItem, value: UIColor | Color): void {
// TODO: implement for UITabBarItem
public getTabBarColor(): UIColor {
return this._ios.tabBar.tintColor;
}
public setTabBarColor(value: UIColor | Color): void {
this._ios.tabBar.tintColor = value instanceof Color ? value.ios : value;
const states = getTitleAttributesForStates(this.tabStrip);
this.tabStrip.items.forEach((tabStripItem) => {
applyStatesToItem(tabStripItem.nativeView, states);
});
}
public setTabBarItemBackgroundColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
let bgView = (<any>tabStripItem).bgView;
if (!bgView) {
const index = (<any>tabStripItem).index;
const width = this.tabStrip.nativeView.frame.size.width / this.tabStrip.items.length;
const frame = CGRectMake(width * index, 0, width, this.tabStrip.nativeView.frame.size.width);
bgView = UIView.alloc().initWithFrame(frame);
this.tabStrip.nativeView.insertSubviewAtIndex(bgView, 0);
(<any>tabStripItem).bgView = bgView;
}
bgView.backgroundColor = value instanceof Color ? value.ios : value;
}
public getTabBarItemColor(tabStripItem: TabStripItem): UIColor {
return this._ios.tabBar.tintColor;
}
public setTabBarItemColor(tabStripItem: TabStripItem, value: UIColor | Color): void {
const states = getTitleAttributesForStates(tabStripItem);
applyStatesToItem(tabStripItem.nativeView, states);
}
public getTabBarItemFontSize(tabStripItem: TabStripItem): number {
return null;
}
public setTabBarItemFontSize(tabStripItem: TabStripItem, value: number | { nativeSize: number }): void {
const states = getTitleAttributesForStates(tabStripItem);
applyStatesToItem(tabStripItem.nativeView, states);
}
public getTabBarItemFontInternal(tabStripItem: TabStripItem): Font {
return null;
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {
const states = getTitleAttributesForStates(tabStripItem);
applyStatesToItem(tabStripItem.nativeView, states);
}
public getTabBarItemTextTransform(tabStripItem: TabStripItem): TextTransform {
return null;
}
public setTabBarItemTextTransform(tabStripItem: TabStripItem, value: TextTransform): void {
const title = getTransformedText(tabStripItem.title, value);
tabStripItem.nativeView.title = title;
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
@ -417,6 +500,7 @@ export class BottomNavigation extends TabNavigationBase {
applyStatesToItem(tabBarItem, states);
controller.tabBarItem = tabBarItem;
(<any>tabStripItem).index = i;
tabStripItem.setNativeView(tabBarItem);
}
@ -501,21 +585,21 @@ interface TabStates {
selectedState?: any;
}
function getTitleAttributesForStates(tabView: BottomNavigation): TabStates {
function getTitleAttributesForStates(view: View): TabStates {
const result: TabStates = {};
const defaultTabItemFontSize = 10;
const tabItemFontSize = tabView.style.tabTextFontSize || defaultTabItemFontSize;
const font: UIFont = tabView.style.fontInternal.getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
const tabItemTextColor = tabView.style.tabTextColor;
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;
result.normalState = { [NSFontAttributeName]: font };
if (textColor) {
result.normalState[UITextAttributeTextColor] = textColor;
}
const tabSelectedItemTextColor = tabView.style.selectedTabTextColor;
const selectedTextColor = tabItemTextColor instanceof Color ? tabSelectedItemTextColor.ios : null;
const tabSelectedItemTextColor = view.style.color;
const selectedTextColor = tabSelectedItemTextColor instanceof Color ? tabSelectedItemTextColor.ios : null;
result.selectedState = { [NSFontAttributeName]: font };
if (selectedTextColor) {
result.selectedState[UITextAttributeTextColor] = selectedTextColor;

8
tns-core-modules/ui/tab-navigation-base/tab-strip-item/tab-strip-item.ts
View File

@ -47,6 +47,14 @@ export class TabStripItem extends View implements TabStripItemDefinition, AddChi
}
}
public requestLayout(): void {
// Default implementation for non View instances (like TabViewItem).
const parent = this.parent;
if (parent) {
parent.requestLayout();
}
}
@PseudoClassHandler("normal", "highlighted", "pressed", "active")
_updateTabStateChangeHandler(subscribe: boolean) {
if (subscribe) {