Merge pull request #3346 from NativeScript/padding

Padding
2025-11-05 13:26:48 +08:00 · 2016-12-22 15:36:11 +02:00
parent 2d05e6ac6f 0ec9950d46
commit a276db4c38
6 changed files with 89 additions and 61 deletions
--- a/apps/app/ui-tests-app/css/padding-and-border.css
+++ b/apps/app/ui-tests-app/css/padding-and-border.css
@@ -1,19 +1,20 @@
-#padding {
-    padding: 10;
+.padding {
+    padding: 5;
 }

-#border {
-    border-width: 10;
-    border-color: black;
+.border {
+    border-width: 5;
 }

-#background-color {
+.green {
+    background-color: green;
+}
+
+.yellow {
    background-color: yellow;
 }

-/*#background-image {
-    background-image: url('~/ui-tests-app/pages/test2.png'); 
-    background-repeat: no-repeat; 
-    background-position: center center; 
-    background-size: 100% 100%;
-}*/
+Label, TextField, TextView, Button {
+    text-align: left;
+    margin: 1;
+}
--- a/apps/app/ui-tests-app/css/padding-and-border.ts
+++ b/apps/app/ui-tests-app/css/padding-and-border.ts
@@ -1,27 +0,0 @@
-import { EventData, View, TextBase } from "ui/text-base";
-import { LayoutBase } from "ui/layouts/layout-base";
-
-let cssClassNames = [
-    "", 
-    "padding", 
-    "border", 
-    "background-color",
-    "padding border",
-    "padding background-color",
-    "border background-color",
-    "padding border background-color"
-];
-
-let currentIndex = 0;
-
-export function onChangeCSS(args: EventData){
-    let page = (<View>args.object).page;
-    let container = <LayoutBase>page.getViewById<LayoutBase>("container");
-    currentIndex++;
-    let newClassName = cssClassNames[currentIndex % cssClassNames.length];
-    for(let i = 0, length = container.getChildrenCount(); i < length; i++){
-        let child = container.getChildAt(i);
-        child.className = newClassName;
-    }
-    (<TextBase>page.getViewById<TextBase>("info")).text = newClassName || "none";
-}
--- a/apps/app/ui-tests-app/css/padding-and-border.xml
+++ b/apps/app/ui-tests-app/css/padding-and-border.xml
@@ -1,15 +1,25 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" id="padding-and-border-page">
-    <StackLayout>
-        <Button id="changeButton" tap="onChangeCSS"/>
-        <TextView id="info" isEnabled="false" isUserInteractionEnabled="false"/>
-        <StackLayout id="container" style.backgroundColor="gray">
-            <Label id="label" text="Label"/>
-            <TextField id="textField" text="TextField"/>
-            <TextView id="textView" text="TextView"/>
-            <Button id="button" text="Button"/>
-            <StackLayout id="stack-layout">
-                <StackLayout id="child-of-stack-layout" width="50" height="50" style.backgroundColor="red"></StackLayout>
-            </StackLayout>
-        </StackLayout>
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+    <StackLayout id="container" class="padding green">
+
+        <Label text="Label padding" class="padding"/>
+        <TextField text="TextField padding" class="padding"/>
+        <TextView text="TextView padding" class="padding"/>
+        <Button text="Button padding" class="padding"/>
+
+        <Label text="Label padding yellow" class="padding yellow"/>
+        <TextField text="TextField padding yellow" class="padding yellow"/>
+        <TextView text="TextView padding yellow" class="padding yellow"/>
+        <Button text="Button padding yellow" class="padding yellow"/>
+
+        <Label text="Label border" class="border"/>
+        <TextField text="TextField border" class="border"/>
+        <TextView text="TextView border" class="border"/>
+        <Button text="Button border" class="border"/>
+
+        <Label text="Label padding border" class="padding border"/>
+        <TextField text="TextField padding border" class="padding border"/>
+        <TextView text="TextView padding border" class="padding border"/>
+        <Button text="Button padding border" class="padding border"/>
+
    </StackLayout>
 </Page>
--- a/tns-core-modules/ui/button/button.android.ts
+++ b/tns-core-modules/ui/button/button.android.ts
@@ -1,6 +1,7 @@
 import {
    ButtonBase, TouchGestureEventData, GestureTypes, TouchAction,
-    PseudoClassHandler
+    PseudoClassHandler,
+    paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length
 } from "./button-common";

 export * from "./button-common";
@@ -23,6 +24,7 @@ class ClickListener extends java.lang.Object implements android.view.View.OnClic
 export class Button extends ButtonBase {
    _button: android.widget.Button;
    private _highlightedHandler: (args: TouchGestureEventData) => void;
+    private _defaultNativePadding: android.graphics.Rect;

    get android(): android.widget.Button {
        return this._button;
@@ -32,6 +34,16 @@ export class Button extends ButtonBase {
        let weakRef = new WeakRef(this);
        this._button = new android.widget.Button(this._context);
        this._button.setOnClickListener(new ClickListener(weakRef));
+
+        // Unlike all other widgets, the Button has padding 30 36 30 36 in device pixels.
+        let result = new android.graphics.Rect();
+        this._button.getBackground().getPadding(result);
+        this._defaultNativePadding = result;
+        
+        this.style.effectivePaddingTop = this._defaultNativePadding.top;
+        this.style.effectivePaddingRight = this._defaultNativePadding.right;
+        this.style.effectivePaddingBottom = this._defaultNativePadding.bottom;
+        this.style.effectivePaddingLeft = this._defaultNativePadding.left;
    }

    @PseudoClassHandler("normal", "highlighted", "pressed", "active")
@@ -52,4 +64,36 @@ export class Button extends ButtonBase {
            this.off(GestureTypes.touch, this._highlightedHandler);
        }
    }
+
+    //PaddingTop
+    get [paddingTopProperty.native](): Length {
+        return { value: this._defaultNativePadding.top, unit: "px" }    
+    }
+    set [paddingTopProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
+    }
+
+    //PaddingRight
+    get [paddingRightProperty.native](): Length {
+        return { value: this._defaultNativePadding.right, unit: "px" }    
+    }
+    set [paddingRightProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
+    }
+
+    //PaddingBottom
+    get [paddingBottomProperty.native](): Length {
+        return { value: this._defaultNativePadding.bottom, unit: "px" }    
+    }
+    set [paddingBottomProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
+    }
+
+    //PaddingLeft
+    get [paddingLeftProperty.native](): Length {
+        return { value: this._defaultNativePadding.left, unit: "px" }    
+    }
+    set [paddingLeftProperty.native](value: Length) {
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
+    }
 }
--- a/tns-core-modules/ui/layouts/layout-base.android.ts
+++ b/tns-core-modules/ui/layouts/layout-base.android.ts
@@ -30,7 +30,7 @@ export class LayoutBase extends LayoutBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
    }
    set [paddingTopProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderTopWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
    }

    //PaddingRight
@@ -38,7 +38,7 @@ export class LayoutBase extends LayoutBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
    }
    set [paddingRightProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderRightWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
    }

    //PaddingBottom
@@ -46,7 +46,7 @@ export class LayoutBase extends LayoutBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
    }
    set [paddingBottomProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderBottomWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
    }

    //PaddingLeft
@@ -54,6 +54,6 @@ export class LayoutBase extends LayoutBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
    }
    set [paddingLeftProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderLeftWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
    }
 }
--- a/tns-core-modules/ui/text-base/text-base.android.ts
+++ b/tns-core-modules/ui/text-base/text-base.android.ts
@@ -193,7 +193,7 @@ export class TextBase extends TextBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingTop(this.nativeView), unit: "px" };
    }
    set [paddingTopProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderTopWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingTop(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderTopWidth, 0));
    }

    //PaddingRight
@@ -201,7 +201,7 @@ export class TextBase extends TextBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingRight(this.nativeView), unit: "px" };
    }
    set [paddingRightProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderRightWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingRight(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderRightWidth, 0));
    }

    //PaddingBottom
@@ -209,7 +209,7 @@ export class TextBase extends TextBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingBottom(this.nativeView), unit: "px" };
    }
    set [paddingBottomProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderBottomWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingBottom(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderBottomWidth, 0));
    }

    //PaddingLeft
@@ -217,7 +217,7 @@ export class TextBase extends TextBaseCommon {
        return { value: org.nativescript.widgets.ViewHelper.getPaddingLeft(this.nativeView), unit: "px" };
    }
    set [paddingLeftProperty.native](value: Length) {
-        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + this.style.effectiveBorderLeftWidth);
+        org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeView, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
    }
 }