From 9d9e4d350d9bf4376f8e64e55e0776884b76dc91 Mon Sep 17 00:00:00 2001 From: Martin Yankov Date: Wed, 29 Aug 2018 16:10:32 +0300 Subject: [PATCH] add safe area support to flexbox --- .../action-bar/flexboxlayout-col-page.xml | 10 ++++++ .../app/flexboxlayout/flexboxlayout-page.xml | 2 ++ .../fragments/flexboxlayout-col-fragment.xml | 11 ++++++ .../fragments/flexboxlayout-row-fragment.xml | 14 ++++---- .../no-action-bar/flexboxlayout-col-page.xml | 7 ++++ e2e/safe-area/app/home/home-page.xml | 3 +- .../flexbox-layout/flexbox-layout.ios.ts | 35 +++++++++---------- 7 files changed, 56 insertions(+), 26 deletions(-) create mode 100644 e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-col-page.xml create mode 100644 e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-col-fragment.xml create mode 100644 e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-col-page.xml diff --git a/e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-col-page.xml b/e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-col-page.xml new file mode 100644 index 000000000..cb6b29a6d --- /dev/null +++ b/e2e/safe-area/app/flexboxlayout/action-bar/flexboxlayout-col-page.xml @@ -0,0 +1,10 @@ + + + + + + + + + diff --git a/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml b/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml index 836f5867e..3a42df8ca 100644 --- a/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml +++ b/e2e/safe-area/app/flexboxlayout/flexboxlayout-page.xml @@ -8,10 +8,12 @@ + + diff --git a/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-col-fragment.xml b/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-col-fragment.xml new file mode 100644 index 000000000..c973c703f --- /dev/null +++ b/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-col-fragment.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml b/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml index 1fc2a40bc..76d5d7ebe 100644 --- a/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml +++ b/e2e/safe-area/app/flexboxlayout/fragments/flexboxlayout-row-fragment.xml @@ -1,11 +1,11 @@ + + + + + + - - - - - - - + diff --git a/e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-col-page.xml b/e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-col-page.xml new file mode 100644 index 000000000..3ce259ba5 --- /dev/null +++ b/e2e/safe-area/app/flexboxlayout/no-action-bar/flexboxlayout-col-page.xml @@ -0,0 +1,7 @@ + + + + + diff --git a/e2e/safe-area/app/home/home-page.xml b/e2e/safe-area/app/home/home-page.xml index c5198a4a1..925a5534c 100644 --- a/e2e/safe-area/app/home/home-page.xml +++ b/e2e/safe-area/app/home/home-page.xml @@ -1,4 +1,4 @@ - + @@ -20,6 +20,7 @@ + diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts index ee611fde7..45ef2bd29 100644 --- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts +++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts @@ -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;