javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 11:01:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2924 from NativeScript/zhecheva/percent-margin

Browse Source 
Support of percentage margins for certain elements - frame, page, contentview.
This commit is contained in:
Maya Zhecheva
2016-10-20 12:02:11 +03:00
committed by GitHub
parent ffc611c23d 75cab33f8f
commit 036bb10b25
13 changed files with 243 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
tests/app/ui/frame/frame-tests.ts
View File

@ -3,8 +3,89 @@ import frameModule = require("ui/frame");
var topmost = frameModule.topmost();
// << frame-require
import platform = require("platform");
import labelModule = require("ui/label");
import pagesModule = require("ui/page");
import testModule = require("../../ui-test");
import TKUnit = require("../../TKUnit");
import {widthProperty, heightProperty} from "ui/styling/style"
var uiUtils;
if (platform.isIOS) {
uiUtils = require("ui/utils");
}
export class FrameTest extends testModule.UITest<frameModule.Frame> {
public create(): frameModule.Frame {
return new frameModule.Frame();
}
public test_percent_width_and_height_set_to_page_support() {
let topFrame = frameModule.topmost();
let currentPage = topFrame.currentPage;
(<any>currentPage).width = "50%";
(<any>currentPage).height = "50%";
this.waitUntilTestElementLayoutIsValid();
let topFrameWidth = topFrame.getMeasuredWidth();
let topFrameHeight = topFrame.getMeasuredHeight();
let currentPageWidth = currentPage.getMeasuredWidth();
let currentPageHeight = currentPage.getMeasuredHeight()
TKUnit.assertEqual(currentPageWidth, Math.round(topFrameWidth / 2), "Current page MeasuredWidth incorrect");
TKUnit.assertEqual(currentPageHeight, Math.round(topFrameHeight / 2), "Current page MeasuredHeight incorrect");
//reset values.
(<any>currentPage.style)._resetValue(heightProperty);
(<any>currentPage.style)._resetValue(widthProperty);
TKUnit.assert(isNaN(currentPage.width), "width");
TKUnit.assert(isNaN(currentPage.height), "height");
}
public test_percent_margin_set_to_page_support() {
let topFrame = frameModule.topmost();
let currentPage = topFrame.currentPage;
currentPage.margin = "10%";
this.waitUntilTestElementLayoutIsValid();
let topFrameWidth = topFrame.getMeasuredWidth();
let topFrameHeight = topFrame.getMeasuredHeight();
let currentPageWidth = currentPage.getMeasuredWidth();
let currentPageHeight = currentPage.getMeasuredHeight()
let marginLeft = topFrameWidth * 0.1;
let marginTop;
if (uiUtils) {
marginTop = topFrameHeight * 0.1 + uiUtils.ios.getStatusBarHeight();
} else {
marginTop = topFrameHeight * 0.1;
}
let bounds = currentPage._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, Math.round(marginLeft), "Current page LEFT position incorrect");
TKUnit.assertEqual(bounds.top, Math.round(marginTop), "Current page TOP position incorrect");
TKUnit.assertEqual(bounds.right, Math.round(marginLeft + currentPageWidth), "Current page RIGHT position incorrect");
TKUnit.assertEqual(bounds.bottom, Math.round(marginTop + currentPageHeight), "Current page BOTTOM position incorrect");
//reset values.
currentPage.margin = "0";
TKUnit.assertEqual(currentPage.marginLeft, 0, "marginLeft");
TKUnit.assertEqual(currentPage.marginTop, 0, "marginTop");
TKUnit.assertEqual(currentPage.marginRight, 0, "marginRight");
TKUnit.assertEqual(currentPage.marginBottom, 0, "marginBottom");
}
}
export var ignore_test_DummyTestForSnippetOnly0 = function () {
// >> frame-navigating
@ -40,4 +121,8 @@ export var ignore_test_DummyTestForSnippetOnly3 = function () {
// >> frame-back
topmost.goBack();
// << frame-back
}
}
export function createTestCase(): FrameTest {
return new FrameTest();
}

2
tests/app/ui/layouts/absolute-layout-tests.ts
View File

@ -82,7 +82,7 @@ export class AbsoluteLayoutTest extends testModule.UITest<absoluteLayoutModule.A
layoutHelper.assertLayout(btn, 25, 35, 100, 100);
}
public test_percent_support() {
public test_percent_children_support() {
let layout = this.testView;
layout.width = layoutHelper.dp(200);
layout.height = layoutHelper.dp(200);

2
tests/app/ui/layouts/common-layout-tests.ts
View File

@ -74,7 +74,7 @@ export function percent_support_nativeLayoutParams_are_correct(test: testModule.
TKUnit.assertEqual(lp.bottomMarginPercent, -1, "bottomMarginPercent");
}
export function percent_support_test(test: testModule.UITest<LayoutBase>) {
export function percent_support_children_test(test: testModule.UITest<LayoutBase>) {
let layout: LayoutBase = test.testView;
layout.removeChildren();
layout.width = layoutHelper.dp(200);

4
tests/app/ui/layouts/dock-layout-tests.ts
View File

@ -165,8 +165,8 @@ export class DockLayoutTest extends testModule.UITest<DockLayout> {
// << dock-layout-setdocl
}
public test_percent_support() {
commonTests.percent_support_test(this);
public test_percent_children_support() {
commonTests.percent_support_children_test(this);
}
public test_percent_support_nativeLayoutParams_are_correct() {

4
tests/app/ui/layouts/grid-layout-tests.ts
View File

@ -633,10 +633,6 @@ export class GridLayoutTest extends testModule.UITest<RemovalTrackingGridLayout>
// << grid-layout-add-rowscols
}
public test_percent_support() {
commonTests.percent_support_test(this);
}
public test_percent_support_nativeLayoutParams_are_correct() {
commonTests.percent_support_nativeLayoutParams_are_correct(this);
}

2
tests/app/ui/layouts/wrap-layout-tests.ts
View File

@ -262,7 +262,7 @@ export class WrapLayoutTest extends testModule.UITest<wrapLayoutModule.WrapLayou
layoutHelper.assertLayout(btn2, 50, 0, 50, 80, "button2");
}
public test_percent_support() {
public test_percent_children_support() {
let layout = this.testView;
layout.removeChildren();
layout.width = layoutHelper.dp(200);

56
tests/app/ui/page/page-tests-common.ts
View File

@ -20,6 +20,7 @@ import observable = require("data/observable");
import {Page, ShownModallyData, NavigatedData} from "ui/page";
import {Label} from "ui/label";
import {EventData} from "data/observable";
import {widthProperty} from "ui/styling/style"
import platform = require("platform");
export function addLabelToPage(page: Page, text?: string) {
@ -536,6 +537,61 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
}
export function test_percent_width_and_height_support() {
let testPage = new Page();
testPage.id = "test_percent_width_and_height_support";
let stackLayout = new StackLayout();
(<any>stackLayout).width = "50%";
(<any>stackLayout).height = "50%";
testPage.content = stackLayout;
let pageWidth = testPage.getMeasuredWidth();
let pageHeight = testPage.getMeasuredHeight()
TKUnit.assertEqual(pageWidth, Math.round(pageWidth / 2), "Current page MeasuredWidth incorrect");
TKUnit.assertEqual(pageHeight, Math.round(pageHeight / 2), "Current page MeasuredHeight incorrect");
//reset values.
testPage.height = Number.NaN;
(<any>testPage.style)._resetValue(widthProperty);
testPage.height = Number.NaN;
TKUnit.assert(isNaN(testPage.width), "width");
TKUnit.assert(isNaN(testPage.height), "height");
}
export function test_percent_margin_support() {
let testPage = new Page();
testPage.id = "ttest_percent_margin_support";
let stackLayout = new StackLayout();
stackLayout.margin = "10%";
testPage.content = stackLayout;
let pageWidth = testPage.getMeasuredWidth();
let pageHeight = testPage.getMeasuredHeight()
let marginLeft = pageWidth * 0.1;
let marginTop = pageHeight * 0.1;
let bounds = stackLayout._getCurrentLayoutBounds();
TKUnit.assertEqual(bounds.left, Math.round(marginLeft), "Page's content LEFT position incorrect");
TKUnit.assertEqual(bounds.top, Math.round(marginTop), "Page's content TOP position incorrect");
TKUnit.assertEqual(bounds.right, Math.round(marginLeft + pageWidth), "Page's content RIGHT position incorrect");
TKUnit.assertEqual(bounds.bottom, Math.round(marginTop + pageHeight), "Page's content BOTTOM position incorrect");
//reset values.
testPage.margin = "0";
TKUnit.assertEqual(testPage.marginLeft, 0, "marginLeft");
TKUnit.assertEqual(testPage.marginTop, 0, "marginTop");
TKUnit.assertEqual(testPage.marginRight, 0, "marginRight");
TKUnit.assertEqual(testPage.marginBottom, 0, "marginBottom");
}
//export function test_ModalPage_Layout_is_Correct() {
// let testPage: Page;
// let label: Label;

4
tns-core-modules/ui/content-view/content-view.ts
View File

@ -67,6 +67,8 @@ export class ContentView extends view.CustomLayoutView implements definition.Con
// This method won't be called in Android because we use the native android layout.
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
view.View.adjustChildLayoutParams(this.layoutView, widthMeasureSpec, heightMeasureSpec);
var result = view.View.measureChild(this, this.layoutView, widthMeasureSpec, heightMeasureSpec);
var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
@ -88,5 +90,7 @@ export class ContentView extends view.CustomLayoutView implements definition.Con
// This method won't be called in Android because we use the native android layout.
public onLayout(left: number, top: number, right: number, bottom: number): void {
view.View.layoutChild(this, this.layoutView, 0, 0, right - left, bottom - top);
view.View.restoreChildOriginalParams(this.layoutView);
}
}

69
tns-core-modules/ui/core/view-common.ts
View File

@ -980,6 +980,75 @@ export class View extends ProxyObject implements definition.View {
return changed;
}
protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void {
if(!view) {
return;
}
let availableWidth = utils.layout.getMeasureSpecSize(widthMeasureSpec);
let widthSpec = utils.layout.getMeasureSpecMode(widthMeasureSpec);
let availableHeight = utils.layout.getMeasureSpecSize(heightMeasureSpec);
let heightSpec = utils.layout.getMeasureSpecMode(heightMeasureSpec);
let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
if (widthSpec !== utils.layout.UNSPECIFIED) {
if (lp.widthPercent > 0) {
lp.width = Math.round(availableWidth * lp.widthPercent);
}
if (lp.leftMarginPercent > 0) {
lp.leftMargin = Math.round(availableWidth * lp.leftMarginPercent);
}
if (lp.rightMarginPercent > 0) {
lp.rightMargin = Math.round(availableWidth * lp.rightMarginPercent);
}
}
if (heightSpec !== utils.layout.UNSPECIFIED) {
if (lp.heightPercent > 0) {
lp.height = Math.round(availableHeight * lp.heightPercent);
}
if (lp.topMarginPercent > 0) {
lp.topMargin = Math.round(availableHeight * lp.topMarginPercent);
}
if (lp.bottomMarginPercent > 0) {
lp.bottomMargin = Math.round(availableHeight * lp.bottomMarginPercent);
}
}
}
protected static restoreChildOriginalParams(view: View): void {
if(!view) {
return;
}
let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
if (lp.widthPercent > 0) {
lp.width = -1;
}
if (lp.heightPercent > 0) {
lp.height = -1;
}
if (lp.leftMarginPercent > 0) {
lp.leftMargin = 0;
}
if (lp.topMarginPercent > 0) {
lp.topMargin = 0;
}
if (lp.rightMarginPercent > 0) {
lp.rightMargin = 0;
}
if (lp.bottomMarginPercent > 0) {
lp.bottomMargin = 0;
}
}
_getCurrentLayoutBounds(): { left: number; top: number; right: number; bottom: number } {
return { left: this._oldLeft, top: this._oldTop, right: this._oldRight, bottom: this._oldBottom }
}

13
tns-core-modules/ui/core/view.d.ts vendored
View File

@ -454,6 +454,19 @@ declare module "ui/core/view" {
*/
public static layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void;
/**
* Changes the width, height and margins of the child to one calculated from percentage values.
*
* @param widthMeasureSpec Width MeasureSpec of the parent layout.
* @param heightMeasureSpec Height MeasureSpec of the parent layout.
*/
protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void;
/**
* Restores the original dimensions of the child that were changed for percentage values.
*/
protected static restoreChildOriginalParams(view: View): void;
/**
* Utility to reconcile a desired size and state, with constraints imposed
* by a MeasureSpec. Will take the desired size, unless a different size

3
tns-core-modules/ui/frame/frame.ios.ts
View File

@ -256,6 +256,7 @@ export class Frame extends frameCommon.Frame {
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
View.adjustChildLayoutParams(this.currentPage, widthMeasureSpec, heightMeasureSpec);
let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
@ -300,6 +301,8 @@ export class Frame extends frameCommon.Frame {
if (this._navigateToEntry && this.currentPage) {
this.layoutPage(this._navigateToEntry.resolvedPage);
}
View.restoreChildOriginalParams(this.currentPage);
}
public layoutPage(page: Page): void {

63
tns-core-modules/ui/layouts/layout-base-common.ts
View File

@ -2,8 +2,6 @@
import types = require("utils/types");
import view = require("ui/core/view");
import dependencyObservable = require("ui/core/dependency-observable");
import utils = require("utils/utils");
import style = require("ui/styling/style");
import {PropertyChangeData, Property } from "ui/core/dependency-observable";
import {PropertyMetadata } from "ui/core/proxy";
@ -180,71 +178,16 @@ export class LayoutBase extends view.CustomLayoutView implements definition.Layo
}
protected static adjustChildrenLayoutParams(layoutBase: LayoutBase, widthMeasureSpec: number, heightMeasureSpec: number): void {
let availableWidth = utils.layout.getMeasureSpecSize(widthMeasureSpec);
let widthSpec = utils.layout.getMeasureSpecMode(widthMeasureSpec);
let availableHeight = utils.layout.getMeasureSpecSize(heightMeasureSpec);
let heightSpec = utils.layout.getMeasureSpecMode(heightMeasureSpec);
for (let i = 0, count = layoutBase.getChildrenCount(); i < count; i++) {
let child = layoutBase.getChildAt(i);
let lp: style.CommonLayoutParams = child.style._getValue(style.nativeLayoutParamsProperty);
if (widthSpec !== utils.layout.UNSPECIFIED) {
if (lp.widthPercent > 0) {
lp.width = Math.round(availableWidth * lp.widthPercent);
}
if (lp.leftMarginPercent > 0) {
lp.leftMargin = Math.round(availableWidth * lp.leftMarginPercent);
}
if (lp.rightMarginPercent > 0) {
lp.rightMargin = Math.round(availableWidth * lp.rightMarginPercent);
}
}
if (heightSpec !== utils.layout.UNSPECIFIED) {
if (lp.heightPercent > 0) {
lp.height = Math.round(availableHeight * lp.heightPercent);
}
if (lp.topMarginPercent > 0) {
lp.topMargin = Math.round(availableHeight * lp.topMarginPercent);
}
if (lp.bottomMarginPercent > 0) {
lp.bottomMargin = Math.round(availableHeight * lp.bottomMarginPercent);
}
}
view.View.adjustChildLayoutParams(child, widthMeasureSpec, heightMeasureSpec);
}
}
protected static restoreOriginalParams(layoutBase: LayoutBase): void {
for (let i = 0, count = layoutBase.getChildrenCount(); i < count; i++) {
let child = layoutBase.getChildAt(i);
let lp: style.CommonLayoutParams = child.style._getValue(style.nativeLayoutParamsProperty);
if (lp.widthPercent > 0) {
lp.width = -1;
}
if (lp.heightPercent > 0) {
lp.height = -1;
}
if (lp.leftMarginPercent > 0) {
lp.leftMargin = 0;
}
if (lp.topMarginPercent > 0) {
lp.topMargin = 0;
}
if (lp.rightMarginPercent > 0) {
lp.rightMargin = 0;
}
if (lp.bottomMarginPercent > 0) {
lp.bottomMargin = 0;
}
view.View.restoreChildOriginalParams(child);
}
}
}
}

4
tns-core-modules/ui/page/page.ios.ts
View File

@ -443,6 +443,8 @@ export class Page extends pageCommon.Page {
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
View.adjustChildLayoutParams(this.layoutView, widthMeasureSpec, heightMeasureSpec);
let width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
@ -507,6 +509,8 @@ export class Page extends pageCommon.Page {
}
View.layoutChild(this, this.layoutView, 0, navigationBarHeight + statusBarHeight, right - left, bottom - top);
View.restoreChildOriginalParams(this.layoutView);
}
public _addViewToNativeVisualTree(view: View): boolean {