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: apply insets to absolute layout

Browse Source
This commit is contained in:
Vasil Chimev
2018-08-23 14:05:04 +03:00
committed by Martin Yankov
parent 12a9c5181e
commit c02f062457
3 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
e2e/safe-area/app/absolutelayout/absolutelayout-page.xml Normal file
View File

@@ -0,0 +1,14 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<ActionBar>
<Label text="AbsoluteLayout Examples"></Label>
</ActionBar>
<AbsoluteLayout class="abs">
<Button text="Left: 10, Top: 5" left="10" top="5" backgroundColor="red" />
<Button text="Left: 30, Top: 80" left="30" top="80" backgroundColor="green" />
<Button text="Left: 150, Top: 25" left="150" top="25" backgroundColor="blue" />
<Button text="Left: 70, Top: 150" left="70" top="150" backgroundColor="yellow" />
</AbsoluteLayout>
</Page>

4
e2e/safe-area/app/app.css
View File

@@ -17,6 +17,10 @@ Page {
background-color: LightGreen; background-color: LightGreen;
} }
.abs {
background-color: Lavender;
}
.dock { .dock {
background-color: HoneyDew; background-color: HoneyDew;
} }

5
tns-core-modules/ui/layouts/absolute-layout/absolute-layout.ios.ts
View File

@@ -47,13 +47,14 @@ export class AbsoluteLayout extends AbsoluteLayoutBase {
public onLayout(left: number, top: number, right: number, bottom: number): void { public onLayout(left: number, top: number, right: number, bottom: number): void {
super.onLayout(left, top, right, bottom); super.onLayout(left, top, right, bottom);
const insets = this.getSafeAreaInsets();
this.eachLayoutChild((child, last) => { this.eachLayoutChild((child, last) => {
const childWidth = child.getMeasuredWidth(); const childWidth = child.getMeasuredWidth();
const childHeight = child.getMeasuredHeight(); const childHeight = child.getMeasuredHeight();
const childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + child.effectiveLeft; const childLeft = this.effectiveBorderLeftWidth + this.effectivePaddingLeft + child.effectiveLeft + insets.left;
const childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + child.effectiveTop; const childTop = this.effectiveBorderTopWidth + this.effectivePaddingTop + child.effectiveTop + insets.top;
const childRight = childLeft + childWidth + child.effectiveMarginLeft + child.effectiveMarginRight; const childRight = childLeft + childWidth + child.effectiveMarginLeft + child.effectiveMarginRight;
const childBottom = childTop + childHeight + child.effectiveMarginTop + child.effectiveMarginBottom; const childBottom = childTop + childHeight + child.effectiveMarginTop + child.effectiveMarginBottom;