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 listview support for safe area

Browse Source
This commit is contained in:
Martin Yankov
2018-07-26 16:19:05 +03:00
parent 28afd17bba
commit 77bba75564
26 changed files with 376 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@
<StackLayout>
<Button text="GridLayout Examples" tap="onNavigate" route="gridlayout/gridlayout-page"></Button>
<Button text="ScrollView Examples" tap="onNavigate" route="scrollview/scrollview-page"></Button>
<Button text="ListView Examples" tap="onNavigate" route="listview/listview-page" />
<Button text="Component Examples" tap="onNavigate" route="component/component-page"></Button>
<Button text="WrapLayout Examples" tap="onNavigate" route="wraplayout/wraplayout-page"></Button>
</StackLayout>

10
e2e/safe-area/app/listview/action-bar/grid-3x3-nested-listview-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-nested-grid-3x3-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-nested-hstack-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
</Page>

10
e2e/safe-area/app/listview/action-bar/listview-nested-vstack-page.xml Normal file
View File

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
</Page>

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

@@ -0,0 +1,10 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<fragments:listview-fragment></fragments:listview-fragment>
</Page>

8
e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

55
e2e/safe-area/app/listview/fragments/grid-3x3-nested-listview-fragment.xml Normal file
View File

@@ -0,0 +1,55 @@
<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="CadetBlue">
<ListView row="0" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="SkyBlue">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="0" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Indigo">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="0" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="Crimson">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="1" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="Chocolate">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="1" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Cornsilk">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="1" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="BurlyWood">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="2" col="0" items="{{ items }}" loaded="onLoaded" backgroundColor="GoldenRod">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="2" col="1" items="{{ items }}" loaded="onLoaded" backgroundColor="Khaki">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
<ListView row="2" col="2" items="{{ items }}" loaded="onLoaded" backgroundColor="IndianRed">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>
</GridLayout>

18
e2e/safe-area/app/listview/fragments/listview-fragment-view-model.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Observable } from "data/observable";
export class ListViewViewModel extends Observable {
items: Array<any>;
constructor() {
super();
this.items = [];
for (let i = 0; i < 50; i++) {
this.items.push({
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque enim mi, id ultrices felis maximus vel.",
shortText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
});
}
}
}

8
e2e/safe-area/app/listview/fragments/listview-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

5
e2e/safe-area/app/listview/fragments/listview-fragment.xml Normal file
View File

@@ -0,0 +1,5 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
<ListView.itemTemplate>
<Label text="{{ text }}"></Label>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

15
e2e/safe-area/app/listview/fragments/listview-nested-grid-3x3-fragment.xml Normal file
View File

@@ -0,0 +1,15 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="Olive">
<ListView.itemTemplate>
<GridLayout rows="*, *, *" columns="*, *, *" backgroundColor="Olive">
<Label row="0" col="0" text="overflowing text, overflowing text"></Label>
<Label row="0" col="1" text="overflowing text, overflowing text"></Label>
<Label row="0" col="2" text="overflowing text, overflowing text"></Label>
<Label row="1" col="0" text="overflowing text, overflowing text"></Label>
<Label row="1" col="1" text="overflowing text, overflowing text"></Label>
<Label row="1" col="2" text="overflowing text, overflowing text"></Label>
<Label row="2" col="0" text="overflowing text, overflowing text"></Label>
<Label row="2" col="1" text="overflowing text, overflowing text"></Label>
<Label row="2" col="2" text="overflowing text, overflowing text"></Label>
</GridLayout>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

9
e2e/safe-area/app/listview/fragments/listview-nested-hstack-fragment.xml Normal file
View File

@@ -0,0 +1,9 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
<ListView.itemTemplate>
<StackLayout orientation="horizontal" backgroundColor="Olive">
<Label text="{{ shortText }}"></Label>
<Label text="{{ shortText }}"></Label>
<Label text="{{ shortText }}"></Label>
</StackLayout>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.ts Normal file
View File

@@ -0,0 +1,8 @@
import { Page } from "ui/page";
import { ListViewViewModel } from "./listview-fragment-view-model";
export function onLoaded(args) {
const page = <Page>args.object;
page.bindingContext = new ListViewViewModel();
}

9
e2e/safe-area/app/listview/fragments/listview-nested-vstack-fragment.xml Normal file
View File

@@ -0,0 +1,9 @@
<ListView items="{{ items }}" loaded="onLoaded" backgroundColor="PowderBlue">
<ListView.itemTemplate>
<StackLayout backgroundColor="Olive">
<Label text="{{ text }}"></Label>
<Label text="{{ text }}"></Label>
<Label text="{{ text }}"></Label>
</StackLayout>
</ListView.itemTemplate>
</ListView>

8
e2e/safe-area/app/listview/listview-page.ts Normal file
View File

@@ -0,0 +1,8 @@
import { View, EventData } from "tns-core-modules/ui/core/view";
export function onNavigate(args: EventData) {
const view = args.object as View;
const route = view["route"];
view.page.frame.navigate(route);
}

28
e2e/safe-area/app/listview/listview-page.xml Normal file
View File

@@ -0,0 +1,28 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
navigatingTo="onNavigatingTo">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="ListView Examples"></Label>
</ActionBar>
<StackLayout>
<StackLayout>
<Label text="Pages w/ ActionBar"></Label>
<Button text="ListView" tap="onNavigate" route="listview/action-bar/listview-page" />
<Button text="ListView Nested VStack" tap="onNavigate" route="listview/action-bar/listview-nested-vstack-page" />
<Button text="ListView Nested HStack" tap="onNavigate" route="listview/action-bar/listview-nested-hstack-page" />
<Button text="ListView Nested Grid 3x3" tap="onNavigate" route="listview/action-bar/listview-nested-grid-3x3-page" />
<Button text="Grid 3x3 Nested ListView" tap="onNavigate" route="listview/action-bar/grid-3x3-nested-listview-page" />
</StackLayout>
<StackLayout>
<Label text="Pages w/o ActionBar"></Label>
<Button text="ListView" tap="onNavigate" route="listview/no-action-bar/listview-page" />
<Button text="ListView Nested VStack" tap="onNavigate" route="listview/no-action-bar/listview-nested-vstack-page" />
<Button text="ListView Nested HStack" tap="onNavigate" route="listview/no-action-bar/listview-nested-hstack-page" />
<Button text="ListView Nested Grid 3x3" tap="onNavigate" route="listview/no-action-bar/listview-nested-grid-3x3-page" />
<Button text="Grid 3x3 Nested ListView" tap="onNavigate" route="listview/no-action-bar/grid-3x3-nested-listview-page" />
</StackLayout>
</StackLayout>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/grid-3x3-nested-listview-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:grid-3x3-nested-listview-fragment></fragments:grid-3x3-nested-listview-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-nested-grid-3x3-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-nested-grid-3x3-fragment></fragments:listview-nested-grid-3x3-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-nested-hstack-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-nested-hstack-fragment></fragments:listview-nested-hstack-fragment>
</Page>

7
e2e/safe-area/app/listview/no-action-bar/listview-nested-vstack-page.xml Normal file
View File

@@ -0,0 +1,7 @@
<Page class="page"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:fragments="listview/fragments"
actionBarHidden="true">
<fragments:listview-nested-vstack-fragment></fragments:listview-nested-vstack-fragment>
</Page>

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

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

49
tns-core-modules/ui/layouts/layout-base.ios.ts
View File

@@ -7,7 +7,7 @@ const majorVersion = iosUtils.MajorVersion;
export class LayoutBase extends LayoutBaseCommon {
nativeViewProtected: UIView;
public addChild(child: View): void {
super.addChild(child);
this.requestLayout();
@@ -33,26 +33,28 @@ export class LayoutBase extends LayoutBaseCommon {
public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
// if (!CGRectEqualToRect(nativeView.frame, frame)) {
// if (traceEnabled()) {
// traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
// }
// this._cachedFrame = frame;
// if (this._hasTransfrom) {
// // Always set identity transform before setting frame;
// const transform = nativeView.transform;
// nativeView.transform = CGAffineTransformIdentity;
// nativeView.frame = frame;
// nativeView.transform = transform;
// }
// else {
// nativeView.frame = frame;
// }
// if (traceEnabled()) {
// traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
// }
// this._cachedFrame = frame;
// if (this._hasTransfrom) {
// // Always set identity transform before setting frame;
// const transform = nativeView.transform;
// nativeView.transform = CGAffineTransformIdentity;
// nativeView.frame = frame;
// nativeView.transform = transform;
// }
// else {
// nativeView.frame = frame;
// }
nativeView.frame = frame;
nativeView.frame = frame;
const locationOnScreen = this.getLocationInWindow();
if (locationOnScreen) {
const safeArea = this.getSafeArea();
const fullscreen = this.getFullscreenArea();
const locationOnScreen = this.getLocationInWindow();
const onScreenLeft = layout.toDevicePixels(layout.round(locationOnScreen.x));
const onScreenTop = layout.toDevicePixels(layout.round(locationOnScreen.y));
@@ -88,6 +90,7 @@ export class LayoutBase extends LayoutBaseCommon {
const frameNew = CGRectMake(layout.toDeviceIndependentPixels(newLeft), layout.toDeviceIndependentPixels(newTop), layout.toDeviceIndependentPixels(newWidth), layout.toDeviceIndependentPixels(newHeight));
nativeView.frame = frameNew;
}
}
// if (leftInset || topInset) {
// const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset));
@@ -96,14 +99,14 @@ export class LayoutBase extends LayoutBaseCommon {
// nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
// }
// else {
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
// }
// }
return nativeView.frame;
// }
return nativeView.frame;
}
[clipToBoundsProperty.getDefault](): boolean {
return false;
}

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

@@ -7,6 +7,7 @@ import { StackLayout } from "../layouts/stack-layout";
import { ProxyViewContainer } from "../proxy-view-container";
import { profile } from "../../profiling";
import * as trace from "../../trace";
import { ios as iosUtils } from "../../utils/utils";
export * from "./list-view-common";
@@ -22,6 +23,7 @@ interface ViewItemIndex {
}
type ItemView = View & ViewItemIndex;
const majorVersion = iosUtils.MajorVersion;
class ListViewCell extends UITableViewCell {
public static initWithEmptyBackground(): ListViewCell {
@@ -378,6 +380,81 @@ export class ListView extends ListViewBase {
});
}
public _setNativeViewFrame(nativeView: UIView, frame: CGRect) {
// if (!CGRectEqualToRect(nativeView.frame, frame)) {
// if (traceEnabled()) {
// traceWrite(this + ", Native setFrame: = " + NSStringFromCGRect(frame), traceCategories.Layout);
// }
// this._cachedFrame = frame;
// if (this._hasTransfrom) {
// // Always set identity transform before setting frame;
// const transform = nativeView.transform;
// nativeView.transform = CGAffineTransformIdentity;
// nativeView.frame = frame;
// nativeView.transform = transform;
// }
// else {
// nativeView.frame = frame;
// }
nativeView.frame = frame;
const safeArea = this.getSafeArea();
const fullscreen = this.getFullscreenArea();
const locationOnScreen = this.getLocationInWindow();
const onScreenLeft = layout.toDevicePixels(layout.round(locationOnScreen.x));
const onScreenTop = layout.toDevicePixels(layout.round(locationOnScreen.y));
let left = layout.toDevicePixels(frame.origin.x);
let top = layout.toDevicePixels(frame.origin.y);
let width = layout.toDevicePixels(frame.size.width);
let height = layout.toDevicePixels(frame.size.height);
if (majorVersion > 10) {
// this._ios.insetsContentViewsToSafeArea = false;
let newLeft = left;
let newTop = top;
let newWidth = width;
let newHeight = height;
if (left !== 0 && onScreenLeft <= layout.toDevicePixels(safeArea.origin.x)) {
newLeft = layout.toDevicePixels(fullscreen.origin.x);
newWidth = width + onScreenLeft;
}
if (top !== 0 && onScreenTop <= layout.toDevicePixels(safeArea.origin.y)) {
newTop = layout.toDevicePixels(fullscreen.origin.y);
newHeight = height + onScreenTop;
}
if (width && width < layout.toDevicePixels(fullscreen.size.width) && onScreenLeft + width >= layout.toDevicePixels(safeArea.origin.x) + layout.toDevicePixels(safeArea.size.width)) {
newWidth = newWidth + (layout.toDevicePixels(fullscreen.size.width) - (onScreenLeft + width));
}
if (height && height < layout.toDevicePixels(fullscreen.size.height) && onScreenTop + height >= layout.toDevicePixels(safeArea.origin.y) + layout.toDevicePixels(safeArea.size.height)) {
newHeight = newHeight + (layout.toDevicePixels(fullscreen.size.height) - (onScreenTop + height));
}
const frameNew = CGRectMake(layout.toDeviceIndependentPixels(newLeft), layout.toDeviceIndependentPixels(newTop), layout.toDeviceIndependentPixels(newWidth), layout.toDeviceIndependentPixels(newHeight));
nativeView.frame = frameNew;
}
// if (leftInset || topInset) {
// const frameNew = CGRectMake(layout.toDeviceIndependentPixels(left), layout.toDeviceIndependentPixels(top), layout.toDeviceIndependentPixels(right - left + leftInset), layout.toDeviceIndependentPixels(bottom - top + topInset));
// nativeView.frame = frameNew;
// const boundsOrigin = nativeView.bounds.origin;
// nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, frameNew.size.width, frameNew.size.height);
// }
// else {
const boundsOrigin = nativeView.bounds.origin;
nativeView.bounds = CGRectMake(boundsOrigin.x, boundsOrigin.y, nativeView.frame.size.width, nativeView.frame.size.height);
// }
// }
return nativeView.frame;
}
private _layoutCell(cellView: View, indexPath: NSIndexPath): number {
if (cellView) {
const rowHeight = this._effectiveRowHeight;