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(ios): safe area handling in scrollview (#6561)

Browse Source
This commit is contained in:
Martin Yankov
2018-11-15 13:07:15 +00:00
committed by GitHub
parent 5c03abefba
commit 51a191f396
7 changed files with 197 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/ui-tests-app/issues/issue-6439.css Normal file
View File

@ -0,0 +1,8 @@
.hr-light {
height: 1;
background-color: gray;
}
.title {
height: 200;
}

38
apps/app/ui-tests-app/issues/issue-6439.xml Normal file
View File

@ -0,0 +1,38 @@
<Page>
<ActionBar title="issue-6439"></ActionBar>
<GridLayout>
<ScrollView>
<StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout>
<Label text="Play with NativeScript!" textWrap="true" class="title" />
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</GridLayout>
</Page>

35
apps/app/ui-tests-app/issues/issue-ng-repo-1599.css Normal file
View File

@ -0,0 +1,35 @@
.page {
padding: 20;
}
.title {
font-weight: bold;
}
.list-items {
border-radius: 10;
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
background-color: black;
margin-top: 20;
}
.item-title {
color: white;
vertical-align: bottom;
font-size: 30;
padding: 180 20 20;
font-weight: 600;
}
.list-item__row {
padding-left: 20;
}
.list-item {
border-radius: 4;
background-color: white;
margin: 0 10 20 0;
padding: 5 10;
}

109
apps/app/ui-tests-app/issues/issue-ng-repo-1599.xml Normal file
View File

@ -0,0 +1,109 @@
<Page>
<ActionBar title="issue-ng-repo-1599"></ActionBar>
<ScrollView>
<GridLayout rows="auto, *" columns="*" class="page page-content">
<!-- Banner -->
<StackLayout row="0" orientation="vertical">
<StackLayout>
<Label textWrap="true" text="My shopping lists" class="title"></Label>
</StackLayout>
</StackLayout>
<!-- Offer categories -->
<StackLayout row="1">
<!-- Shopping list 1 -->
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
<Label text="Shopping list 1" class="item-title" textWrap="true"></Label>
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="list-item__row">
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<!-- Shopping list 2 -->
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
<Label text="Shopping list 2" class="item-title" textWrap="true"></Label>
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="list-item__row">
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<!-- Shopping list 3 -->
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
<Label text="Shopping list 3" class="item-title" textWrap="true"></Label>
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="list-item__row">
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<!-- Shopping list 4 -->
<StackLayout class="list-items" backgroundImage="~/ui-tests-app/resources/images/woods.jpg">
<Label text="Shopping list 4" class="item-title" textWrap="true"></Label>
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="list-item__row">
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
<StackLayout class="list-item">
<Label text="Shop Item" textWrap="true" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>

2
apps/app/ui-tests-app/issues/main-page.ts
View File

@ -27,6 +27,8 @@ export function loadExamples() {
examples.set("3354-ios", "issues/issue-3354"); examples.set("3354-ios", "issues/issue-3354");
examples.set("4450", "issues/issue-4450"); examples.set("4450", "issues/issue-4450");
examples.set("5274", "issues/issue-5274"); examples.set("5274", "issues/issue-5274");
examples.set("ng-repo-1599", "issues/issue-ng-repo-1599");
examples.set("6439", "issues/issue-6439");
return examples; return examples;
} }

2
apps/app/ui-tests-app/scroll-view/safe-area-sub-element.xml
View File

@ -6,7 +6,7 @@
</Page.actionBar> </Page.actionBar>
<GridLayout> <GridLayout>
<ScrollView height="50" verticalAlignment="top"> <ScrollView>
<StackLayout> <StackLayout>
<GridLayout height="30" backgroundColor="red" /> <GridLayout height="30" backgroundColor="red" />
<GridLayout height="30" backgroundColor="yellow" /> <GridLayout height="30" backgroundColor="yellow" />

7
tns-core-modules/ui/core/view/view.ios.ts
View File

@ -798,11 +798,11 @@ export namespace ios {
} }
if (inWindowRight < fullscreenPosition.right && inWindowRight >= safeAreaPosition.right + fullscreenPosition.left) { if (inWindowRight < fullscreenPosition.right && inWindowRight >= safeAreaPosition.right + fullscreenPosition.left) {
adjustedPosition.right = fullscreenPosition.right - fullscreenPosition.left; adjustedPosition.right += fullscreenPosition.right - inWindowRight;
} }
if (inWindowBottom < fullscreenPosition.bottom && inWindowBottom >= safeAreaPosition.bottom + fullscreenPosition.top) { if (inWindowBottom < fullscreenPosition.bottom && inWindowBottom >= safeAreaPosition.bottom + fullscreenPosition.top) {
adjustedPosition.bottom = fullscreenPosition.bottom - fullscreenPosition.top; adjustedPosition.bottom += fullscreenPosition.bottom - inWindowBottom;
} }
const adjustedFrame = CGRectMake(layout.toDeviceIndependentPixels(adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.top), layout.toDeviceIndependentPixels(adjustedPosition.right - adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.bottom - adjustedPosition.top)); const adjustedFrame = CGRectMake(layout.toDeviceIndependentPixels(adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.top), layout.toDeviceIndependentPixels(adjustedPosition.right - adjustedPosition.left), layout.toDeviceIndependentPixels(adjustedPosition.bottom - adjustedPosition.top));
@ -853,7 +853,8 @@ export namespace ios {
if (parent.nativeViewProtected instanceof UIScrollView) { if (parent.nativeViewProtected instanceof UIScrollView) {
const nativeView = parent.nativeViewProtected; const nativeView = parent.nativeViewProtected;
safeArea = nativeView.safeAreaLayoutGuide.layoutFrame; const insets = nativeView.safeAreaInsets;
safeArea = CGRectMake(insets.left, insets.top, nativeView.contentSize.width - insets.left - insets.right, nativeView.contentSize.height - insets.top - insets.bottom);
fullscreen = CGRectMake(0, 0, nativeView.contentSize.width, nativeView.contentSize.height); fullscreen = CGRectMake(0, 0, nativeView.contentSize.width, nativeView.contentSize.height);
} else if (parent.viewController) { } else if (parent.viewController) {
const nativeView = parent.viewController.view; const nativeView = parent.viewController.view;