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

fix(tabs): ios safeArea calculation (#9089)

Browse Source 
* fix(tabs): ios safeArea calculation

* feat(tabs): respect iosOverflowSafeArea value
This commit is contained in:
Igor Randjelovic
2020-12-28 13:38:28 +01:00
committed by GitHub
parent 51b383fe85
commit 9391b44996
4 changed files with 44 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml
View File

@ -1,3 +1,12 @@
<Page class="page" > <Page class="page" >
<GridLayout rows="*, auto">
<Label text="Inner label 1" backgroundColor="blue"/> <Label text="Inner label 1" backgroundColor="blue"/>
<Label text="Inner Bottom label 1"
textAlignment="center"
verticalAlignment="middle"
padding="10"
backgroundColor="crimson"
row="1"/>
</GridLayout>
</Page> </Page>

24
apps/ui/src/tabs/frame-in-tabs-overflow.xml Normal file
View File

@ -0,0 +1,24 @@
<Page class="page">
<StackLayout>
<Tabs iosOverflowSafeArea="true" highlightColor="red" offscreenTabLimit="1" automationText="tabNavigation">
<TabStrip highlightColor="green" itemTap="onItemTap">
<TabStripItem title="1"></TabStripItem>
<TabStripItem title="2"></TabStripItem>
<TabStripItem title="3"></TabStripItem>
<TabStripItem title="4"></TabStripItem>
</TabStrip>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-1"></Frame>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-2"></Frame>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-3"></Frame>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="tabs/frame-in-tabs-inner-page-4"></Frame>
</TabContentItem>
</Tabs>
</StackLayout>
</Page>

1
apps/ui/src/tabs/main-page.ts
View File

@ -31,6 +31,7 @@ export function loadExamples() {
examples.set('nested-bottom-navigation', 'tabs/nested-bottom-navigation-page'); examples.set('nested-bottom-navigation', 'tabs/nested-bottom-navigation-page');
examples.set('custom-tabstrip', 'tabs/custom-tabstrip-page'); examples.set('custom-tabstrip', 'tabs/custom-tabstrip-page');
examples.set('frame-in-tabs', 'tabs/frame-in-tabs'); examples.set('frame-in-tabs', 'tabs/frame-in-tabs');
examples.set('frame-in-tabs-overflow', 'tabs/frame-in-tabs-overflow');
examples.set('item-color', 'tabs/item-color-page'); examples.set('item-color', 'tabs/item-color-page');
examples.set('dynamic-color-change', 'tabs/dynamic-color-change-page'); examples.set('dynamic-color-change', 'tabs/dynamic-color-change-page');

14
packages/core/ui/tabs/index.ios.ts
View File

@ -172,20 +172,22 @@ class UIPageViewControllerImpl extends UIPageViewController {
safeAreaInsetsTop = this.topLayoutGuide.length; safeAreaInsetsTop = this.topLayoutGuide.length;
} }
let conditionalSafeAreaBottom = owner.iosOverflowSafeArea ? safeAreaInsetsBottom : 0;
let scrollViewTop = 0; let scrollViewTop = 0;
let scrollViewHeight = this.view.bounds.size.height + safeAreaInsetsBottom; let scrollViewHeight = this.view.bounds.size.height + conditionalSafeAreaBottom;
if (owner.tabStrip) { if (owner.tabStrip) {
scrollViewTop = this.tabBar.frame.size.height;
scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + safeAreaInsetsBottom;
let tabBarTop = safeAreaInsetsTop;
const tabBarHeight = this.tabBar.frame.size.height; const tabBarHeight = this.tabBar.frame.size.height;
let tabBarTop = safeAreaInsetsTop;
scrollViewTop = tabBarHeight;
scrollViewHeight = this.view.bounds.size.height - tabBarHeight + conditionalSafeAreaBottom;
const tabsPosition = owner.tabsPosition; const tabsPosition = owner.tabsPosition;
if (tabsPosition === 'bottom') { if (tabsPosition === 'bottom') {
tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - safeAreaInsetsBottom; tabBarTop = this.view.frame.size.height - tabBarHeight - safeAreaInsetsBottom;
scrollViewTop = this.view.frame.origin.y; scrollViewTop = this.view.frame.origin.y;
scrollViewHeight = this.view.frame.size.height - safeAreaInsetsBottom; scrollViewHeight = this.view.frame.size.height - tabBarHeight;
} }
let parent = owner.parent; let parent = owner.parent;