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

add safe area support to flexbox

Browse Source
This commit is contained in:
Martin Yankov
2018-08-29 16:10:32 +03:00
parent 52b1822df5
commit 9d9e4d350d
7 changed files with 56 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-col-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="flexboxlayout/fragments">
<ActionBar>
<Label text="Action Bar"></Label>
</ActionBar>
<fragments:flexboxlayout-col-fragment></fragments:flexboxlayout-col-fragment>
</Page>

2
e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml
View File

@@ -8,10 +8,12 @@
<StackLayout>
<Label text="Pages w/ ActionBar"></Label>
<Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/action-bar/flexboxlayout-row-page"></Button>
<Button text="Flexbox Col" tap="onNavigate" route="flexboxlayout/action-bar/flexboxlayout-col-page"></Button>
</StackLayout>
<StackLayout>
<Label text="Pages w/o ActionBar"></Label>
<Button text="Flexbox Row" tap="onNavigate" route="flexboxlayout/no-action-bar/flexboxlayout-row-page"></Button>
<Button text="Flexbox Col" tap="onNavigate" route="flexboxlayout/no-action-bar/flexboxlayout-col-page"></Button>
</StackLayout>
</StackLayout>

11
e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-col-fragment.xml Normal file
View File

@@ -0,0 +1,11 @@
<FlexboxLayout flexDirection="column" class="flex">
<StackLayout backgroundColor="white">
<Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
</StackLayout>
<StackLayout flexGrow="1" backgroundColor="green">
<Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
</StackLayout>
<StackLayout backgroundColor="red">
<Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod fermentum erat, eu vehicula nunc scelerisque quis. Aenean consequat elit sed lacus aliquam consequat."></Label>
</StackLayout>
</FlexboxLayout>

14
e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml
View File

@@ -1,11 +1,11 @@
<FlexboxLayout flexDirection="row" class="flex">
<StackLayout backgroundColor="white">
<Label text="Lorem"></Label>
</StackLayout>
<StackLayout flexGrow="1" backgroundColor="green">
<Label text="Lorem"></Label>
</StackLayout>
<StackLayout backgroundColor="red">
<Label backgroundColor="#965251" text="Item"></Label>
</StackLayout>
<StackLayout flexGrow="1" class="stack">
<Label flexGrow="1" backgroundColor="#d2b29b" text="Flex-Grow 1"></Label>
</StackLayout>
<StackLayout backgroundColor="blue">
<Label backgroundColor="#F69256" text="Item"></Label>
<Label text="Lorem"></Label>
</StackLayout>
</FlexboxLayout>

7
e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-col-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="flexboxlayout/fragments"
actionBarHidden="true">
<fragments:flexboxlayout-col-fragment></fragments:flexboxlayout-col-fragment>
</Page>

3
e2e/safe-area/app/home/home-page.xml
View File

@@ -1,4 +1,4 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Page xmlns="http://schemas.nativescript.org/tns.xsd" actionBarHidden="true">
<ActionBar>
<Label text="Home"></Label>
@@ -20,6 +20,7 @@
<Button text="Expand Examples" tap="onNavigate" route="expand/expand-page"></Button>
<Button text="Repeater Examples" tap="onNavigate" route="repeater/repeater-page"></Button>
<Button text="WebView Examples" tap="onNavigate" route="webview/webview-page"></Button>
<Button text="Flexbox Examples" tap="onNavigate" route="flexboxlayout/flexboxlayout-page"></Button>
</StackLayout>
</ScrollView>

35
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
View File

@@ -944,44 +944,42 @@ export class FlexboxLayout extends FlexboxLayoutBase {
public onLayout(left: number, top: number, right: number, bottom: number) {
const insets = this.getSafeAreaInsets();
left += insets.left;
top += insets.top;
right -= insets.right;
bottom -= insets.bottom;
let isRtl;
switch (this.flexDirection) {
case FlexDirection.ROW:
isRtl = false;
this._layoutHorizontal(isRtl, left, top, right, bottom);
this._layoutHorizontal(isRtl, left, top, right, bottom, insets);
break;
case FlexDirection.ROW_REVERSE:
isRtl = true;
this._layoutHorizontal(isRtl, left, top, right, bottom);
this._layoutHorizontal(isRtl, left, top, right, bottom, insets);
break;
case FlexDirection.COLUMN:
isRtl = false;
if (this.flexWrap === FlexWrap.WRAP_REVERSE) {
isRtl = !isRtl;
}
this._layoutVertical(isRtl, false, left, top, right, bottom);
this._layoutVertical(isRtl, false, left, top, right, bottom, insets);
break;
case FlexDirection.COLUMN_REVERSE:
isRtl = false;
if (this.flexWrap === FlexWrap.WRAP_REVERSE) {
isRtl = !isRtl;
}
this._layoutVertical(isRtl, true, left, top, right, bottom);
this._layoutVertical(isRtl, true, left, top, right, bottom, insets);
break;
default:
throw new Error("Invalid flex direction is set: " + this.flexDirection);
}
}
private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number) {
private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number, insets: { left, top, right, bottom }) {
// include insets
let paddingLeft = this.effectivePaddingLeft + left;
let paddingRight = this.effectivePaddingRight + right;
let paddingLeft = this.effectivePaddingLeft + insets.left;
let paddingTop = this.effectivePaddingTop + insets.top;
let paddingRight = this.effectivePaddingRight + insets.right;
let paddingBottom = this.effectivePaddingBottom + insets.bottom;
let childLeft;
let currentViewIndex = 0;
@@ -990,8 +988,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let width = right - left;
// include insets
let childBottom = height - this.effectivePaddingBottom;
let childTop = this.effectivePaddingTop + top;
let childBottom = height - paddingBottom;
let childTop = paddingTop;
let childRight;
this._flexLines.forEach((flexLine, i) => {
@@ -1138,12 +1136,13 @@ export class FlexboxLayout extends FlexboxLayoutBase {
}
}
private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number) {
let paddingTop = this.effectivePaddingTop;
let paddingBottom = this.effectivePaddingBottom;
private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number, insets: { left, top, right, bottom }) {
let paddingLeft = this.effectivePaddingLeft + insets.left;
let paddingTop = this.effectivePaddingTop + insets.top;
let paddingRight = this.effectivePaddingRight + insets.right;
let paddingBottom = this.effectivePaddingBottom + insets.bottom;
let paddingRight = this.effectivePaddingRight;
let childLeft = this.effectivePaddingLeft;
let childLeft = paddingLeft;
let currentViewIndex = 0;
let width = right - left;