Skip to content

Commit 12c0199

Browse files
PanayotCankovSvetoslavTsenov
PanayotCankov
authored and
SvetoslavTsenov
committed
UIScrollViews will now report 'scroll' events and the background in ios will adjust added layers (NativeScript#4762)
1 parent 3fd65cc commit 12c0199

18 files changed

+413
-22
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,6 @@ apps/lib/
5151
apps/hooks/
5252
apps/node_modules/
5353

54-
package-lock.json
54+
package-lock.json
55+
56+
.nsbuildinfo

‎apps/app/ui-tests-app/list-view/main-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export function loadExamples() {
1616
examples.set("bindings", "list-view/listview-binding");
1717
examples.set("listview-bg-separator-color", "list-view/listview-bg-separator-color");
1818
examples.set("csslv", "list-view/csslv");
19+
examples.set("scrolling-and-sizing", "list-view/scrolling-and-sizing");
1920

2021
return examples;
2122
}

‎apps/app/ui-tests-app/list-view/scrolling-and-sizing.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.p-10 {
2+
padding: 10 20 10 20;
3+
}
4+
5+
.m-b-10 {
6+
margin-bottom: 10;
7+
}
8+
9+
.page {
10+
background-color: #F2F2F2;
11+
}
12+
13+
TextView {
14+
background-color: #FFF;
15+
}
16+
17+
.bordered {
18+
border-width: 5;
19+
border-color: green;
20+
}
21+
22+
.fixed-height {
23+
height: 55;
24+
}
25+
26+
.border-radius {
27+
border-radius: 15;
28+
}
29+
30+
.border-radius-nonuniform {
31+
border-radius: 10 20 30 40;
32+
}
33+
34+
.bordered-nonuniform {
35+
border-top-color: red;
36+
border-right-color: green;
37+
border-bottom-color: blue;
38+
border-left-color: purple;
39+
border-top-width: 5;
40+
border-right-width: 10;
41+
border-bottom-width: 15;
42+
border-left-width: 20;
43+
}
44+
45+
.body {
46+
font-size: 11;
47+
}

‎apps/app/ui-tests-app/list-view/scrolling-and-sizing.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function onNavigatingTo(args) {
2+
const page = args.object;
3+
page.bindingContext = ["The quick", "brown fox", "jumped over", "the", "lazy dog."];
4+
}

‎apps/app/ui-tests-app/list-view/scrolling-and-sizing.xml

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
2+
3+
<Page.actionBar>
4+
<ActionBar title="My App" icon="" class="action-bar">
5+
</ActionBar>
6+
</Page.actionBar>
7+
8+
<StackLayout>
9+
<StackLayout class="p-10" row="0">
10+
<Label text="Default style = scrolls out of container" class="body m-b-10" />
11+
<ListView items="{{ $value }}" height="40">
12+
<ListView.itemTemplate>
13+
<Label text="{{ $value }}" />
14+
</ListView.itemTemplate>
15+
</ListView>
16+
</StackLayout>
17+
18+
<StackLayout class="p-10" row="1">
19+
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
20+
<ListView items="{{ $value }}" height="40" class="bordered">
21+
<ListView.itemTemplate>
22+
<Label text="{{ $value }}" />
23+
</ListView.itemTemplate>
24+
</ListView>
25+
</StackLayout>
26+
27+
<StackLayout class="p-10" row="2">
28+
<Label text="border-radius" class="body m-b-10" />
29+
<ListView items="{{ $value }}" class="bordered fixed-height border-radius">
30+
<ListView.itemTemplate>
31+
<Label text="{{ $value }}" />
32+
</ListView.itemTemplate>
33+
</ListView>
34+
</StackLayout>
35+
36+
<StackLayout class="p-10" row="2">
37+
<Label text="border-radius = weird" class="body m-b-10" />
38+
<ListView items="{{ $value }}" class="bordered fixed-height border-radius-nonuniform">
39+
<ListView.itemTemplate>
40+
<Label text="{{ $value }}" />
41+
</ListView.itemTemplate>
42+
</ListView>
43+
</StackLayout>
44+
45+
<StackLayout class="p-10" row="3">
46+
<Label text="border-width = weird" class="body m-b-10" />
47+
<ListView items="{{ $value }}" class="bordered-nonuniform fixed-height">
48+
<ListView.itemTemplate>
49+
<Label text="{{ $value }}" />
50+
</ListView.itemTemplate>
51+
</ListView>
52+
</StackLayout>
53+
54+
</StackLayout>
55+
</Page>

‎apps/app/ui-tests-app/main-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export function pageLoaded(args: EventData) {
2525
examples.set("modalview", "modal-view/modal-view");
2626
examples.set("page", "page/main-page");
2727
examples.set("perf", "perf/main-page");
28+
examples.set("scroll-view", "scroll-view/main-page");
2829
examples.set("segStyle", "segmented-bar/all");
2930
examples.set("search-bar", "search-bar/main-page");
3031
examples.set("tab-view", "tab-view/main-page");

‎apps/app/ui-tests-app/scroll-view/main-page.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { SubMainPageViewModel } from "../sub-main-page-view-model";
3+
import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
4+
import { Page } from "tns-core-modules/ui/page";
5+
6+
export function pageLoaded(args: EventData) {
7+
const page = <Page>args.object;
8+
const wrapLayout = <WrapLayout>page.getViewById("wrapLayoutWithExamples");
9+
page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
10+
}
11+
12+
export function loadExamples() {
13+
const examples = new Map<string, string>();
14+
examples.set("scrolling-and-sizing", "scroll-view/scrolling-and-sizing");
15+
return examples;
16+
}

‎apps/app/ui-tests-app/scroll-view/main-page.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Page loaded="pageLoaded">
3+
<ScrollView orientation="vertical" row="1">
4+
<WrapLayout id="wrapLayoutWithExamples"/>
5+
</ScrollView>
6+
</Page>

‎apps/app/ui-tests-app/scroll-view/scrolling-and-sizing.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.p-10 {
2+
padding: 10 20 10 20;
3+
}
4+
5+
.m-b-10 {
6+
margin-bottom: 10;
7+
}
8+
9+
.page {
10+
background-color: #F2F2F2;
11+
}
12+
13+
ScrollView {
14+
background-color: #FFF;
15+
}
16+
17+
.bordered {
18+
border-width: 5;
19+
border-color: green;
20+
}
21+
22+
.fixed-height {
23+
height: 55;
24+
}
25+
26+
.border-radius {
27+
border-radius: 15;
28+
}
29+
30+
.border-radius-nonuniform {
31+
border-radius: 10 20 30 40;
32+
}
33+
34+
.bordered-nonuniform {
35+
border-top-color: red;
36+
border-right-color: green;
37+
border-bottom-color: blue;
38+
border-left-color: purple;
39+
border-top-width: 5;
40+
border-right-width: 10;
41+
border-bottom-width: 15;
42+
border-left-width: 20;
43+
}
44+
45+
.body {
46+
font-size: 11;
47+
}

‎apps/app/ui-tests-app/scroll-view/scrolling-and-sizing.xml

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
2+
3+
<Page.actionBar>
4+
<ActionBar title="My App" icon="" class="action-bar">
5+
</ActionBar>
6+
</Page.actionBar>
7+
8+
<StackLayout>
9+
<StackLayout class="p-10" row="0">
10+
<Label text="Default style = scrolls out of container" class="body m-b-10" />
11+
<ScrollView height="40">
12+
<StackLayout>
13+
<GridLayout width="30" height="30" backgroundColor="red" />
14+
<GridLayout width="30" height="30" backgroundColor="yellow" />
15+
<GridLayout width="30" height="30" backgroundColor="green" />
16+
</StackLayout>
17+
</ScrollView>
18+
</StackLayout>
19+
20+
<StackLayout class="p-10" row="1">
21+
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
22+
<ScrollView class="bordered" height="40">
23+
<StackLayout>
24+
<GridLayout width="30" height="30" backgroundColor="red" />
25+
<GridLayout width="30" height="30" backgroundColor="yellow" />
26+
<GridLayout width="30" height="30" backgroundColor="green" />
27+
</StackLayout>
28+
</ScrollView>
29+
</StackLayout>
30+
31+
<StackLayout class="p-10" row="2">
32+
<Label text="border-radius" class="body m-b-10" />
33+
<ScrollView class="bordered fixed-height border-radius">
34+
<StackLayout>
35+
<GridLayout width="30" height="30" backgroundColor="red" />
36+
<GridLayout width="30" height="30" backgroundColor="yellow" />
37+
<GridLayout width="30" height="30" backgroundColor="green" />
38+
</StackLayout>
39+
</ScrollView>
40+
</StackLayout>
41+
42+
<StackLayout class="p-10" row="2">
43+
<Label text="border-radius = weird" class="body m-b-10" />
44+
<ScrollView class="bordered fixed-height border-radius-nonuniform">
45+
<StackLayout>
46+
<GridLayout width="30" height="30" backgroundColor="red" />
47+
<GridLayout width="30" height="30" backgroundColor="yellow" />
48+
<GridLayout width="30" height="30" backgroundColor="green" />
49+
</StackLayout>
50+
</ScrollView>
51+
</StackLayout>
52+
53+
<StackLayout class="p-10" row="3">
54+
<Label text="border-width = weird" class="body m-b-10" />
55+
<ScrollView class="bordered-nonuniform fixed-height">
56+
<StackLayout>
57+
<GridLayout width="30" height="30" backgroundColor="red" />
58+
<GridLayout width="30" height="30" backgroundColor="yellow" />
59+
<GridLayout width="30" height="30" backgroundColor="green" />
60+
</StackLayout>
61+
</ScrollView>
62+
</StackLayout>
63+
64+
</StackLayout>
65+
</Page>

‎apps/app/ui-tests-app/text-view/main-page.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ export function loadExamples() {
1414
examples.set("text-view-border", "text-view/text-view-border");
1515
examples.set("text-view-hint-color", "text-view/text-view-hint-color");
1616
examples.set("hint-text-color", "text-view/hint-text-color");
17+
examples.set("scrolling-and-sizing", "text-view/scrolling-and-sizing");
1718
return examples;
1819
}

‎apps/app/ui-tests-app/text-view/scrolling-and-sizing.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.p-10 {
2+
padding: 10 20 10 20;
3+
}
4+
5+
.m-b-10 {
6+
margin-bottom: 10;
7+
}
8+
9+
.page {
10+
background-color: #F2F2F2;
11+
}
12+
13+
TextView {
14+
background-color: #FFF;
15+
}
16+
17+
.bordered {
18+
border-width: 5;
19+
border-color: green;
20+
}
21+
22+
.fixed-height {
23+
height: 55;
24+
}
25+
26+
.border-radius {
27+
border-radius: 15;
28+
}
29+
30+
.border-radius-nonuniform {
31+
border-radius: 10 20 30 40;
32+
}
33+
34+
.bordered-nonuniform {
35+
border-top-color: red;
36+
border-right-color: green;
37+
border-bottom-color: blue;
38+
border-left-color: purple;
39+
border-top-width: 5;
40+
border-right-width: 10;
41+
border-bottom-width: 15;
42+
border-left-width: 20;
43+
}
44+
45+
.body {
46+
font-size: 11;
47+
}

‎apps/app/ui-tests-app/text-view/scrolling-and-sizing.xml

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
2+
3+
<Page.actionBar>
4+
<ActionBar title="My App" icon="" class="action-bar">
5+
</ActionBar>
6+
</Page.actionBar>
7+
8+
<StackLayout>
9+
<StackLayout class="p-10" row="0">
10+
<Label text="Default style = scrolls out of container" class="body m-b-10" />
11+
<TextView hint="Add your comment..." />
12+
</StackLayout>
13+
14+
<StackLayout class="p-10" row="1">
15+
<Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
16+
<TextView hint="Add your comment..." class="bordered" />
17+
</StackLayout>
18+
19+
<StackLayout class="p-10" row="2">
20+
<Label text="border-radius" class="body m-b-10" />
21+
<TextView hint="Add your comment..." class="bordered fixed-height border-radius" />
22+
</StackLayout>
23+
24+
<StackLayout class="p-10" row="2">
25+
<Label text="border-radius = weird" class="body m-b-10" />
26+
<TextView hint="Add your comment..." class="bordered fixed-height border-radius-nonuniform" />
27+
</StackLayout>
28+
29+
<StackLayout class="p-10" row="3">
30+
<Label text="border-width = weird" class="body m-b-10" />
31+
<TextView hint="Add your comment..." class="bordered-nonuniform fixed-height" />
32+
</StackLayout>
33+
34+
</StackLayout>
35+
</Page>

‎tns-core-modules/ui/core/view/view.ios.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -437,7 +437,10 @@ export class View extends ViewCommon {
437437

438438
_setNativeClipToBounds() {
439439
let backgroundInternal = this.style.backgroundInternal;
440-
this.nativeViewProtected.clipsToBounds = backgroundInternal.hasBorderWidth() || backgroundInternal.hasBorderRadius();
440+
this.nativeViewProtected.clipsToBounds =
441+
this.nativeViewProtected instanceof UIScrollView ||
442+
backgroundInternal.hasBorderWidth() ||
443+
backgroundInternal.hasBorderRadius();
441444
}
442445
}
443446
View.prototype._nativeBackgroundState = "unset";

‎tns-core-modules/ui/list-view/list-view.ios.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { ItemEventData } from ".";
1+
import { ScrollEventData } from "../scroll-view";
2+
import { ItemEventData } from ".";
23
import {
34
ListViewBase, View, KeyedTemplate, Length, Observable, Color,
45
separatorColorProperty, itemTemplatesProperty, layout, EventData

0 commit comments

Comments
 (0)