javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-18 13:51:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #143 from NativeScript/feature/stack-padding-fix

Browse Source 
Fixed incorrect measure pass in when stack-layout has padding
This commit is contained in:
vakrilov
2015-03-06 15:39:17 +02:00
parent 424565249b 50916738fb
commit f66ed4ba94
10 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CrossPlatformModules.csproj
View File

@ -1461,4 +1461,4 @@
<UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
</VisualStudio>
</ProjectExtensions>
</Project>
</Project>

2
apps/template-settings/app.css
View File

@ -1,5 +1,5 @@
.content {
margin: 10;
padding: 10;
background-color: white;
}

4
apps/template-settings/main-page.xml
View File

@ -2,7 +2,7 @@
<StackLayout cssClass="content">
<!-- Profile sttings -->
<Label cssClass="header" text="Profile"/>
<GridLayout cssClass="field-group" columns="auto, 50, *" rows="36, 36, 36">
<GridLayout cssClass="field-group" columns="auto, 50, *" rows="auto, auto, auto">
<!-- Name -->
<Label cssClass="field" text="Name"/>
@ -21,7 +21,7 @@
<!-- Notifications settings -->
<Label cssClass="header" text="Notifications"/>
<GridLayout cssClass="field-group" columns="*, auto" rows="36, 36, 36">
<GridLayout cssClass="field-group" columns="*, auto" rows="auto, auto, auto">
<!-- Notifications -->
<Label cssClass="field" text="Vibrate"/>
<Switch cssClass="field-value" checked="{{ vibrateEnabled }}" col="1"/>

1
apps/tests/layouts/absolute-layout-tests.ts
View File

@ -73,6 +73,7 @@ export function test_padding() {
return absoluteLayout.isLayoutValid;
}, 1);
layoutHelper.assertMeasure(btn, 100, 100);
layoutHelper.assertLayout(btn, 25, 35, 100, 100);
});
}

1
apps/tests/layouts/dock-layout-tests.ts
View File

@ -191,6 +191,7 @@ export function test_padding() {
TKUnit.waitUntilReady(() => { return rootLayout.isLayoutValid; });
helper.assertMeasure(testBtn, 260, 240);
helper.assertLayout(testBtn, 10, 20, 260, 240);
}

1
apps/tests/layouts/grid-layout-tests.ts
View File

@ -492,6 +492,7 @@ export function test_GridLayout_padding() {
TKUnit.waitUntilReady(() => { return btn.isLayoutValid });
helper.assertMeasure(btn, 260, 240);
helper.assertLayout(btn, 10, 20, 260, 240);
}

9
apps/tests/layouts/layout-helper.ts
View File

@ -66,6 +66,15 @@ export class MyButton extends button.Button {
}
}
export function assertMeasure(btn: MyButton, width: number, height: number, name?: string) {
var density = utils.layout.getDisplayDensity();
name = name ? "[" + name + "]" : "";
TKUnit.assertAreClose(btn.measureWidth / density, width, DELTA, name + "width");
TKUnit.assertAreClose(btn.measureHeight / density, height, DELTA, name + "height");
}
export function assertLayout(btn: MyButton, left: number, top: number, width: number, height: number, name?: string): void {
var density = utils.layout.getDisplayDensity();

6
apps/tests/layouts/stack-layout-tests.ts
View File

@ -175,6 +175,9 @@ export function test_StackLayout_Padding_Vertical() {
return btn2.arranged;
}, ASYNC);
helper.assertMeasure(btn1, 260, 50);
helper.assertMeasure(btn1, 260, 50);
helper.assertLayout(btn1, 10, 20, 260, 50, "btn1");
helper.assertLayout(btn2, 10, 70, 260, 50, "btn2");
}
@ -196,6 +199,9 @@ export function test_StackLayout_Padding_Horizontal() {
return btn2.arranged;
}, ASYNC);
helper.assertMeasure(btn1, 50, 240);
helper.assertMeasure(btn1, 50, 240);
helper.assertLayout(btn1, 10, 20, 50, 240, "btn1");
helper.assertLayout(btn2, 60, 20, 50, 240, "btn2");
}

6
apps/tests/layouts/wrap-layout-tests.ts
View File

@ -230,6 +230,9 @@ export function testPaddingRight() {
return wrapLayout.isLayoutValid;
});
layoutHelper.assertMeasure(btn1, 100, 50);
layoutHelper.assertMeasure(btn2, 80, 50);
// There should be no space left for the button on the first row,
// because fo the padding (200 - 100 - 30) = 70 button wants 80
layoutHelper.assertLayout(btn1, 0, 0, 100, 50, "button1");
@ -258,6 +261,9 @@ export function testPaddingBottom() {
return wrapLayout.isLayoutValid;
});
layoutHelper.assertMeasure(btn1, 50, 100);
layoutHelper.assertMeasure(btn2, 50, 80);
// There should be no space left for the button on the first row,
// because fo the padding (200 - 100 - 30) = 70 button wants 80
layoutHelper.assertLayout(btn1, 0, 0, 50, 100, "button1");

29
ui/layouts/stack-layout/stack-layout.ts
View File

@ -12,7 +12,7 @@ function validateOrientation(value: any): boolean {
export var orientationProperty = new dependencyObservable.Property(
"orientation",
"LinearLayout",
"StackLayout",
new proxy.PropertyMetadata(enums.Orientation.vertical,
dependencyObservable.PropertyMetadataSettings.AffectsLayout,
undefined,
@ -32,6 +32,7 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
var density = utils.layout.getDisplayDensity();
var measureWidth = 0;
var measureHeight = 0;
@ -43,6 +44,9 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
var isVertical = this.orientation === enums.Orientation.vertical;
var verticalPadding = (this.paddingTop + this.paddingBottom) * density;
var horizontalPadding = (this.paddingLeft + this.paddingRight) * density;
var count = this.getChildrenCount();
var measureSpec: number;
@ -56,7 +60,19 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
}
else {
measureSpec = utils.layout.AT_MOST;
remainingLength = isVertical ? height : width;
remainingLength = isVertical ? height - verticalPadding : width - horizontalPadding;
}
var childMeasureSpec: number;
if (isVertical) {
var childWidth = (widthMode === utils.layout.UNSPECIFIED) ? 0 : width - horizontalPadding;
childWidth = Math.max(0, childWidth);
childMeasureSpec = utils.layout.makeMeasureSpec(childWidth, widthMode)
}
else {
var childHeight = (heightMode === utils.layout.UNSPECIFIED) ? 0 : height - verticalPadding;
childHeight = Math.max(0, childHeight);
childMeasureSpec = utils.layout.makeMeasureSpec(childHeight, heightMode)
}
var childSize: { measuredWidth: number; measuredHeight: number };
@ -67,14 +83,14 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
}
if (isVertical) {
childSize = view.View.measureChild(this, child, widthMeasureSpec, utils.layout.makeMeasureSpec(remainingLength, measureSpec));
childSize = view.View.measureChild(this, child, childMeasureSpec, utils.layout.makeMeasureSpec(remainingLength, measureSpec));
measureWidth = Math.max(measureWidth, childSize.measuredWidth);
var viewHeight = childSize.measuredHeight;
measureHeight += viewHeight;
remainingLength = Math.max(0, remainingLength - viewHeight);
}
else {
childSize = view.View.measureChild(this, child, utils.layout.makeMeasureSpec(remainingLength, measureSpec), heightMeasureSpec);
childSize = view.View.measureChild(this, child, utils.layout.makeMeasureSpec(remainingLength, measureSpec), childMeasureSpec);
measureHeight = Math.max(measureHeight, childSize.measuredHeight);
var viewWidth = childSize.measuredWidth;
measureWidth += viewWidth;
@ -82,9 +98,8 @@ export class StackLayout extends layouts.Layout implements definition.StackLayou
}
}
var density = utils.layout.getDisplayDensity();
measureWidth += (this.paddingLeft + this.paddingRight) * density;
measureHeight += (this.paddingTop + this.paddingBottom) * density;
measureWidth += horizontalPadding;
measureHeight += verticalPadding;
measureWidth = Math.max(measureWidth, this.minWidth * density);
measureHeight = Math.max(measureHeight, this.minHeight * density);