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(tab): add support for custom tabstrip (#7580)

Browse Source
This commit is contained in:
Martin Yankov
2019-08-14 17:34:18 +03:00
committed by GitHub
parent e2c3c8c084
commit acc3436d9f
16 changed files with 314 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
tns-core-modules/ui/bottom-navigation/bottom-navigation.android.ts
View File

@@ -315,7 +315,7 @@ export class BottomNavigation extends TabNavigationBase {
this._bottomNavigationBar = (<any>nativeView).bottomNavigationBar;
(<any>this._bottomNavigationBar).owner = this;
if (this.tabStrip) {
this.tabStrip.setNativeView(this._bottomNavigationBar);
}
@@ -362,8 +362,12 @@ export class BottomNavigation extends TabNavigationBase {
public onLoaded(): void {
super.onLoaded();
const items = this.tabStrip ? this.tabStrip.items : null;
this.setTabStripItems(items);
if (this.tabStrip) {
this.setTabStripItems(this.tabStrip.items);
} else {
// manually set the visibility, so that the grid layout remeasures
this._bottomNavigationBar.setVisibility(android.view.View.GONE);
}
if (this._attachedToWindow) {
this.changeTab(this.selectedIndex);
@@ -386,7 +390,9 @@ export class BottomNavigation extends TabNavigationBase {
public onUnloaded(): void {
super.onUnloaded();
this.setTabStripItems(null);
if (this.tabStrip) {
this.setTabStripItems(null);
}
const fragmentToDetach = this._currentFragment;
if (fragmentToDetach) {
@@ -637,7 +643,11 @@ export class BottomNavigation extends TabNavigationBase {
// traceWrite("TabView this._viewPager.setCurrentItem(" + value + ", " + smoothScroll + ");", traceCategory);
// }
this._bottomNavigationBar.setSelectedPosition(value);
if (this.tabStrip) {
this._bottomNavigationBar.setSelectedPosition(value);
} else {
this.changeTab(value);
}
}
[itemsProperty.getDefault](): TabContentItem[] {

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

@@ -243,6 +243,9 @@ export class BottomNavigation extends TabNavigationBase {
super.initNativeView();
this._delegate = UITabBarControllerDelegateImpl.initWithOwner(new WeakRef(this));
this._moreNavigationControllerDelegate = UINavigationControllerDelegateImpl.initWithOwner(new WeakRef(this));
if (!this.tabStrip) {
this.viewController.tabBar.hidden = true;
}
}
disposeNativeView() {

5
tns-core-modules/ui/tabs/tabs.android.ts
View File

@@ -493,7 +493,10 @@ export class Tabs extends TabsBase {
super.onLoaded();
this.setItems((<any>this.items));
this.setTabStripItems(this.tabStrip.items);
if (this.tabStrip) {
this.setTabStripItems(this.tabStrip.items);
}
// this.setAdapterItems(this.items);
}

83
tns-core-modules/ui/tabs/tabs.ios.ts
View File

@@ -76,24 +76,27 @@ class UIPageViewControllerImpl extends UIPageViewController {
public viewDidLoad(): void {
const owner = this._owner.get();
const tabBarItems = owner.tabBarItems;
const tabBar = MDCTabBar.alloc().initWithFrame(this.view.bounds);
if (tabBarItems && tabBarItems.length) {
tabBar.items = NSArray.arrayWithArray(tabBarItems);
if (owner.tabStrip) {
const tabBarItems = owner.tabBarItems;
const tabBar = MDCTabBar.alloc().initWithFrame(this.view.bounds);
if (tabBarItems && tabBarItems.length) {
tabBar.items = NSArray.arrayWithArray(tabBarItems);
}
tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner));
tabBar.tintColor = UIColor.blueColor;
tabBar.barTintColor = UIColor.whiteColor;
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
tabBar.alignment = MDCTabBarAlignment.Leading;
tabBar.sizeToFit();
this.tabBar = tabBar;
this.view.addSubview(tabBar);
}
tabBar.delegate = this.tabBarDelegate = MDCTabBarDelegateImpl.initWithOwner(new WeakRef(owner));
tabBar.tintColor = UIColor.blueColor;
tabBar.barTintColor = UIColor.whiteColor;
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Normal);
tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarItemState.Selected);
tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
tabBar.alignment = MDCTabBarAlignment.Leading;
tabBar.sizeToFit();
this.tabBar = tabBar;
this.view.addSubview(tabBar);
}
public viewWillAppear(animated: boolean): void {
@@ -116,40 +119,39 @@ class UIPageViewControllerImpl extends UIPageViewController {
return;
}
const tabsPosition = owner.tabsPosition;
const parent = owner.parent;
let scrollViewTop = 0;
let scrollViewHeight = this.view.bounds.size.height + this.view.safeAreaInsets.bottom;
let tabBarTop = this.view.safeAreaInsets.top;
let tabBarHeight = this.tabBar.frame.size.height;
let scrollViewTop = this.tabBar.frame.size.height;
let scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height;
if (owner.tabStrip) {
scrollViewTop = this.tabBar.frame.size.height;
scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + this.view.safeAreaInsets.bottom;
let tabBarTop = this.view.safeAreaInsets.top;
let tabBarHeight = this.tabBar.frame.size.height;
if (parent) {
// TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
tabBarTop = Math.max(this.view.safeAreaInsets.top, owner.parent.nativeView.safeAreaInsets.top);
const tabsPosition = owner.tabsPosition;
if (tabsPosition === "bottom") {
tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - this.view.safeAreaInsets.bottom;
scrollViewTop = this.view.frame.origin.y;
scrollViewHeight = this.view.frame.size.height - this.view.safeAreaInsets.bottom;
}
const parent = owner.parent;
if (parent) {
// TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
tabBarTop = Math.max(tabBarTop, owner.parent.nativeView.safeAreaInsets.top);
}
this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
}
if (tabsPosition === "bottom") {
tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - this.view.safeAreaInsets.bottom;
scrollViewTop = this.view.frame.origin.y;
scrollViewHeight = this.view.frame.size.height - this.view.safeAreaInsets.bottom;
}
this.tabBar.frame = CGRectMake(this.view.safeAreaInsets.left, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
const subViews: NSArray<UIView> = this.view.subviews;
let scrollView: UIScrollView = null;
let mdcBar: MDCTabBar = null;
for (let i = 0; i < subViews.count; i++) {
const view: UIView = subViews[i];
if (view instanceof UIScrollView) {
scrollView = <UIScrollView>view;
}
if (view instanceof MDCTabBar) {
mdcBar = <MDCTabBar>view;
}
}
if (scrollView) {
@@ -489,7 +491,10 @@ export class Tabs extends TabsBase {
// this.viewController = this._ios = <UIPageViewControllerImpl>UIPageViewControllerImpl.initWithOwner(new WeakRef(this)); // .alloc().initWithTransitionStyleNavigationOrientationOptions(UIPageViewControllerTransitionStyle.Scroll, UIPageViewControllerNavigationOrientation.Horizontal, null); // UITabBarControllerImpl.initWithOwner(new WeakRef(this));
this.viewController = this._ios = <UIPageViewControllerImpl>UIPageViewControllerImpl.initWithOwner(new WeakRef(this)); //alloc().initWithTransitionStyleNavigationOrientationOptions(UIPageViewControllerTransitionStyle.Scroll, UIPageViewControllerNavigationOrientation.Horizontal, null);;
this.nativeViewProtected = this._ios.view;
}
createNativeView() {
return this._ios.view;
}
initNativeView() {