refactor(bottom-navigation): strip item creation (#7477)

* feat(ios-tabs): tab bar item appearance

Implements https://github.com/NativeScript/NativeScript/issues/7436 and https://github.com/NativeScript/nativescript-angular/issues/1884.

* refactor(ios-tabs): move _hasImage and _hasTitle properties

* feat(ios-bottom-navigation): create tab bar from image nad label

Implements https://github.com/NativeScript/nativescript-angular/issues/1893 for iOS.

* feat(android-bottom-navigation): create tab item spec from image and label

Implements https://github.com/NativeScript/nativescript-angular/issues/1893 for Android.

* chore: remove console.logs
This commit is contained in:
Vasil Chimev
2019-07-10 17:37:45 +03:00
committed by Alexander Djenkov
parent c34a48ac77
commit eb1ed3e4ec
3 changed files with 34 additions and 28 deletions

View File

@ -12,6 +12,8 @@ import { CSSType, Color } from "../core/view";
import { Frame, View } from "../frame";
import { RESOURCE_PREFIX, ad, layout } from "../../utils/utils";
import { fromFileOrResource } from "../../image-source";
import * as application from "../../application";
// TODO: Impl trace
// import { isEnabled as traceEnabled, write as traceWrite } from "../../../trace";
@ -159,34 +161,35 @@ function initializeNativeClasses() {
}
function createTabItemSpec(tabStripItem: TabStripItem): org.nativescript.widgets.TabItemSpec {
const result = new org.nativescript.widgets.TabItemSpec();
result.title = tabStripItem.title;
let iconSource;
const tabItemSpec = new org.nativescript.widgets.TabItemSpec();
if (tabStripItem.backgroundColor instanceof Color) {
result.backgroundColor = tabStripItem.backgroundColor.android;
}
// Image and Label children of TabStripItem
// take priority over its `iconSource` and `title` properties
iconSource = tabStripItem.image ? tabStripItem.image.src : tabStripItem.iconSource;
tabItemSpec.title = tabStripItem.label ? tabStripItem.label.text : tabStripItem.title;
if (tabStripItem.iconSource) {
if (tabStripItem.iconSource.indexOf(RESOURCE_PREFIX) === 0) {
result.iconId = ad.resources.getDrawableId(tabStripItem.iconSource.substr(RESOURCE_PREFIX.length));
if (result.iconId === 0) {
if (iconSource) {
if (iconSource.indexOf(RESOURCE_PREFIX) === 0) {
tabItemSpec.iconId = ad.resources.getDrawableId(iconSource.substr(RESOURCE_PREFIX.length));
if (tabItemSpec.iconId === 0) {
// TODO:
// traceMissingIcon(tabStripItem.iconSource);
// traceMissingIcon(iconSource);
}
} else {
const is = fromFileOrResource(tabStripItem.iconSource);
if (is) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
// tslint:disable-next-line:deprecation
result.iconDrawable = new android.graphics.drawable.BitmapDrawable(is.android);
tabItemSpec.iconDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), is.android);
} else {
// TODO:
// traceMissingIcon(tabStripItem.iconSource);
// traceMissingIcon(iconSource);
}
}
}
return result;
return tabItemSpec;
}
function setElevation(grid: org.nativescript.widgets.GridLayout, bottomNavigationBar: org.nativescript.widgets.BottomNavigationBar) {
@ -471,7 +474,7 @@ export class BottomNavigation extends TabNavigationBase {
}
this._currentFragment = fragment;
const tabItems = this.items;
const tabItem = tabItems ? tabItems[position] : null;
if (tabItem) {

View File

@ -1,4 +1,4 @@
// Types
// Types
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
@ -500,15 +500,9 @@ export class BottomNavigation extends TabNavigationBase {
items.forEach((item, i) => {
const controller = this.getViewController(item);
let icon = null;
let title = "";
if (this.tabStrip && this.tabStrip.items && this.tabStrip.items[i]) {
const tabStripItem = <TabStripItem>this.tabStrip.items[i];
icon = this._getIcon(tabStripItem.iconSource);
title = tabStripItem.title;
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((title || ""), icon, i);
const tabBarItem = this.createTabBarItem(tabStripItem, i);
updateTitleAndIconPositions(tabStripItem, tabBarItem, controller);
applyStatesToItem(tabBarItem, states);
@ -528,6 +522,20 @@ export class BottomNavigation extends TabNavigationBase {
this._ios.moreNavigationController.delegate = this._moreNavigationControllerDelegate;
}
private createTabBarItem(item: TabStripItem, index: number): UITabBarItem {
let image: UIImage;
let title: string;
// Image and Label children of TabStripItem
// take priority over its `iconSource` and `title` properties
image = item.image ? this._getIcon(item.image.src) : this._getIcon(item.iconSource);
title = item.label ? item.label.text : item.title;
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index);
return tabBarItem;
}
private _getIconRenderingMode(): UIImageRenderingMode {
return UIImageRenderingMode.AlwaysOriginal;
}
@ -632,4 +640,4 @@ function applyStatesToItem(item: UITabBarItem, states: TabStates) {
item.setTitleTextAttributesForState(states.normalState, UIControlState.Normal);
item.setTitleTextAttributesForState(states.selectedState, UIControlState.Selected);
}
}

View File

@ -345,8 +345,6 @@ class UIPageViewControllerDelegateImpl extends NSObject implements UIPageViewCon
// } else {
// owner.selectedIndex++;
// }
console.log("test");
//
}
public pageViewControllerDidFinishAnimatingPreviousViewControllersTransitionCompleted(pageViewController: UIPageViewController, didFinishAnimating: boolean, previousViewControllers: NSArray<UIViewController>, transitionCompleted: boolean): void {
@ -364,9 +362,6 @@ class UIPageViewControllerDelegateImpl extends NSObject implements UIPageViewCon
owner.selectedIndex = nextViewControllerIndex;
owner._canSelectItem = true;
}
console.log("test");
//
}
}