javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +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

31
e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.css Normal file
View File

@ -0,0 +1,31 @@
.custom-tabstrip {
height: 100;
vertical-align: bottom;
ios-overflow-safe-area-enabled: false;
}
.custom-tabstripitem {
height: 80;
width: 80;
vertical-align: center;
horizontal-align: center;
clip-path: circle(100% at 50% 50%);
}
.custom-title {
color: white;
vertical-align: center;
horizontal-align: center;
}
.skyblue {
background-color: skyblue;
}
.gold {
background-color: gold;
}
.olive {
background-color: olive;
}

24
e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.ts Normal file
View File

@ -0,0 +1,24 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
bottomNav.selectedIndex = 2;
}

41
e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.xml Normal file
View File

@ -0,0 +1,41 @@
<Page>
<ActionBar title="BottomNavigation Custom TabStrip" icon="" class="action-bar">
</ActionBar>
<GridLayout>
<GridLayout>
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="olive">
<Label text="Third View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation>
</GridLayout>
<GridLayout columns="*, *, *" class="custom-tabstrip">
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
<Label text="First" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
<Label text="Second" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
<Label text="Third" class="custom-title"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>

1
e2e/ui-tests-app/app/bottom-navigation/main-page.ts
View File

@ -23,6 +23,7 @@ export function loadExamples() {
examples.set("font-icons", "bottom-navigation/font-icons-page");
examples.set("fancy-fonts", "bottom-navigation/fancy-fonts-page");
examples.set("css-text-transform", "bottom-navigation/bottom-navigation-css-page");
examples.set("custom-tabstrip", "bottom-navigation/custom-tabstrip-page");
return examples;
}

31
e2e/ui-tests-app/app/tabs/custom-tabstrip-page.css Normal file
View File

@ -0,0 +1,31 @@
.custom-tabstrip {
height: 100;
vertical-align: bottom;
ios-overflow-safe-area-enabled: false;
}
.custom-tabstripitem {
height: 80;
width: 80;
vertical-align: center;
horizontal-align: center;
clip-path: circle(100% at 50% 50%);
}
.custom-title {
color: white;
vertical-align: center;
horizontal-align: center;
}
.skyblue {
background-color: skyblue;
}
.gold {
background-color: gold;
}
.olive {
background-color: olive;
}

24
e2e/ui-tests-app/app/tabs/custom-tabstrip-page.ts Normal file
View File

@ -0,0 +1,24 @@
import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Tabs } from "tns-core-modules/ui/tabs";
export function goToFirst(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 0;
}
export function goToSecond(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 1;
}
export function goToThird(args: EventData) {
const page = <Page>(<any>args.object).page;
const bottomNav = <Tabs>page.getViewById("tabsNav");
bottomNav.selectedIndex = 2;
}

41
e2e/ui-tests-app/app/tabs/custom-tabstrip-page.xml Normal file
View File

@ -0,0 +1,41 @@
<Page>
<ActionBar title="Tabs Custom TabStrip" icon="" class="action-bar">
</ActionBar>
<GridLayout>
<GridLayout>
<Tabs id="tabsNav" automationText="tabNavigation" >
<TabContentItem>
<GridLayout backgroundColor="skyblue">
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="gold">
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout backgroundColor="olive">
<Label text="Third View"/>
</GridLayout>
</TabContentItem>
</Tabs>
</GridLayout>
<GridLayout columns="*, *, *" class="custom-tabstrip">
<GridLayout automationText="first-tab" col="0" class="custom-tabstripitem skyblue" tap="goToFirst">
<Label text="First" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="second-tab" col="1" class="custom-tabstripitem gold" tap="goToSecond">
<Label text="Second" class="custom-title"></Label>
</GridLayout>
<GridLayout automationText="third-tab" col="2" class="custom-tabstripitem olive" tap="goToThird">
<Label text="Third" class="custom-title"></Label>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>

1
e2e/ui-tests-app/app/tabs/main-page.ts
View File

@ -29,6 +29,7 @@ export function loadExamples() {
examples.set("font-icons", "tabs/font-icons-page");
examples.set("nested-layout", "tabs/nested-layout-page");
examples.set("nested-bottom-navigation", "tabs/nested-bottom-navigation-page");
examples.set("custom-tabstrip", "tabs/custom-tabstrip-page");
return examples;
}

26
e2e/ui-tests-app/e2e/suites/tab-navigation/bottom-navigation/bottom-navigation.e2e-spec.ts
View File

@ -40,6 +40,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-background-color`, async function () {
await bottomNavigationBasePage.navigateToSample("background-color");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -55,6 +56,7 @@ describe(`${suite}-${spec}-suite`, async function () {
*/
it(`${spec}-binding-add-items`, async function () {
await bottomNavigationBasePage.navigateToSample("binding");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
const addTabBtn = await driver.waitForElement("add-tab");
@ -83,6 +85,7 @@ describe(`${suite}-${spec}-suite`, async function () {
*/
it(`${spec}-binding-remove-items`, async function () {
await bottomNavigationBasePage.navigateToSample("binding");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
const removeTabBtn = await driver.waitForElement("remove-last-tab");
@ -115,6 +118,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-bottom-navigation`, async function () {
await bottomNavigationBasePage.navigateToSample("bottom-navigation");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
const goToSecondBtn = await driver.waitForElement("goToSecond");
@ -130,6 +134,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-color`, async function () {
await bottomNavigationBasePage.navigateToSample("color");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -141,6 +146,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fancy-fonts-select-tabs`, async function () {
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
for (let index = 1; index < 4; index++) {
@ -154,6 +160,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fancy-fonts-selected-index`, async function () {
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
await bottomNavigationBasePage.refreshTabItems();
let selectSecondTabFromCodeBehind = await driver.waitForElement("selectSecondTab");
logInfo(`Click on "select second tab button"`);
@ -186,6 +193,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fancy-fonts-change-orientation`, async function () {
await bottomNavigationBasePage.navigateToSample("fancy-fonts");
await bottomNavigationBasePage.refreshTabItems();
await driver.setOrientation(DeviceOrientation.LANDSCAPE);
await driver.imageHelper.compareScreen();
@ -212,6 +220,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-font-icons`, async function () {
await bottomNavigationBasePage.navigateToSample("font-icons");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -227,6 +236,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-icon-change`, async function () {
await bottomNavigationBasePage.navigateToSample("icon-change");
await bottomNavigationBasePage.refreshTabItems();
await bottomNavigationBasePage.tabOnItem(1);
await driver.imageHelper.compareScreen();
@ -240,6 +250,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-icon-title-placment`, async function () {
await bottomNavigationBasePage.navigateToSample("icon-title-placement");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
@ -247,6 +258,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-5470-issue`, async function () {
await bottomNavigationBasePage.navigateToSample("issue-5470");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -258,6 +270,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-text-transform`, async function () {
await bottomNavigationBasePage.navigateToSample("text-transform");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -269,6 +282,7 @@ describe(`${suite}-${spec}-suite`, async function () {
it(`${spec}-fonts`, async function () {
await bottomNavigationBasePage.navigateToSample("text-transform");
await bottomNavigationBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await bottomNavigationBasePage.tabOnItem(1);
@ -277,4 +291,16 @@ describe(`${suite}-${spec}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
it(`${spec}-custom-tabstrip`, async function () {
await bottomNavigationBasePage.navigateToSample("custom-tabstrip");
await driver.imageHelper.compareScreen();
const secondTab = await driver.waitForElement("second-tab");
await secondTab.tap();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await bottomNavigationBasePage.navigateBackToSuitMainPage();
});
});

1
e2e/ui-tests-app/e2e/suites/tab-navigation/tab-navigation-base-page.ts
View File

@ -21,7 +21,6 @@ export abstract class TabNavigationBasePage extends PageObjectBaseModel {
async navigateToSample(sample: string) {
await super.navigateToSample(sample);
await this.refreshTabItems();
}
async refreshTabItems() {

26
e2e/ui-tests-app/e2e/suites/tab-navigation/tabs/tabs-tests.e2e-spec.ts
View File

@ -39,6 +39,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-background-color`, async function () {
await tabsViewBasePage.navigateToSample("background-color");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
@ -52,6 +53,7 @@ describe(`${imagePrefix}-suite`, async function () {
// not all css is applied.
it(`${imagePrefix}-color`, async function () {
await tabsViewBasePage.navigateToSample("color");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
@ -63,6 +65,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-font`, async function () {
await tabsViewBasePage.navigateToSample("font");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
@ -78,6 +81,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-font-icons`, async function () {
await tabsViewBasePage.navigateToSample("font-icons");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
@ -98,6 +102,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-highlight-color`, async function () {
await tabsViewBasePage.navigateToSample("highlight-color");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
@ -110,6 +115,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-icon-change`, async function () {
await tabsViewBasePage.navigateToSample("icon-change");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
@ -126,6 +132,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-icon-title-placment`, async function () {
await tabsViewBasePage.navigateToSample("icon-title-placement");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
@ -133,6 +140,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-issue-5470`, async function () {
await tabsViewBasePage.navigateToSample("issue-5470");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.tabOnItem(1);
@ -144,6 +152,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-strip-item`, async function () {
await tabsViewBasePage.navigateToSample("strip-item");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
@ -155,6 +164,7 @@ describe(`${imagePrefix}-suite`, async function () {
this.skip();
}
await tabsViewBasePage.navigateToSample("swipe-disabled");
await tabsViewBasePage.refreshTabItems();
await tabsViewBasePage.swipeRightToLeft();
await driver.imageHelper.compareScreen();
@ -166,6 +176,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-swipe`, async function () {
await tabsViewBasePage.navigateToSample("tabs");
await tabsViewBasePage.refreshTabItems();
await tabsViewBasePage.swipeRightToLeft();
await driver.imageHelper.compareScreen();
@ -185,6 +196,7 @@ describe(`${imagePrefix}-suite`, async function () {
this.skip();
}
await tabsViewBasePage.navigateToSample("tabs-binding");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
const addTabBtn = await driver.waitForElement("add-tab");
@ -216,6 +228,7 @@ describe(`${imagePrefix}-suite`, async function () {
this.skip();
}
await tabsViewBasePage.navigateToSample("tabs-binding");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
const removeTabBtn = await driver.waitForElement("remove-last-tab");
@ -248,6 +261,7 @@ describe(`${imagePrefix}-suite`, async function () {
it(`${imagePrefix}-text-transform`, async function () {
await tabsViewBasePage.navigateToSample("text-transform");
await tabsViewBasePage.refreshTabItems();
await driver.imageHelper.compareScreen();
await tabsViewBasePage.refreshTabItems();
@ -257,4 +271,16 @@ describe(`${imagePrefix}-suite`, async function () {
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
it(`${imagePrefix}-custom-tabstrip`, async function () {
await tabsViewBasePage.navigateToSample("custom-tabstrip");
await driver.imageHelper.compareScreen();
const secondTab = await driver.waitForElement("second-tab");
await secondTab.tap();
await driver.imageHelper.compareScreen();
assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
await tabsViewBasePage.navigateBackToSuitMainPage();
});
});

2
tests/app/ui/bottom-navigation/bottom-navigation-tests.ts
View File

@ -230,6 +230,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
public test_when_selecting_tab_natively_selectedIndex_is_updated_properly = function () {
var tabView = this.testView;
tabView.items = this._createContentItems(2);
tabView.tabStrip = this._createTabStrip(2);
this.waitUntilTestElementIsLoaded();
var expectedValue = 1;
@ -245,6 +246,7 @@ export class BottomNavigationTest extends UITest<BottomNavigation> {
public test_when_selecting_tab_natively_selectedIndexChangedEvent_is_raised = function () {
var tabView = this.testView;
tabView.items = this._createContentItems(5);
tabView.tabStrip = this._createTabStrip(5);
this.waitUntilTestElementIsLoaded();
var expectedOldIndex = 3;

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

@ -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() {