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

HorizontalAlignment and VerticalAlignment

Browse Source
This commit is contained in:
Rossen Hristov
2016-12-19 16:25:08 +02:00
parent 37d93643ea
commit 8ac7c8d574
9 changed files with 99 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
tns-core-modules/ui/action-bar/action-bar-common.ts
View File

@@ -6,7 +6,7 @@
NavigationButton
} from "ui/action-bar";
import { Page } from "ui/page";
import { View, ViewBase, Bindable, Property, unsetValue, horizontalAlignmentProperty, verticalAlignmentProperty } from "ui/core/view";
import { View, ViewBase, Bindable, Property, unsetValue, horizontalAlignmentProperty, verticalAlignmentProperty, HorizontalAlignment, VerticalAlignment } from "ui/core/view";
export * from "ui/core/view";
@@ -62,8 +62,8 @@ export class ActionBarBase extends View implements ActionBarDefinition {
this._titleView = value;
if (this._titleView) {
this._titleView.style[horizontalAlignmentProperty.cssName] = "center";
this._titleView.style[verticalAlignmentProperty.cssName] = "center";
this._titleView.style[horizontalAlignmentProperty.cssName] = HorizontalAlignment.CENTER;
this._titleView.style[verticalAlignmentProperty.cssName] = VerticalAlignment.MIDDLE;
this._addView(this._titleView);
}
@@ -304,8 +304,8 @@ export class ActionItemBase extends ViewBase implements ActionItemDefinition {
private _addActionViewToActionBar() {
if (this._actionView && !this._actionView._isAddedToNativeVisualTree && this._actionBar) {
this._actionView.style[horizontalAlignmentProperty.cssName] = "center";
this._actionView.style[verticalAlignmentProperty.cssName] = "center";
this._actionView.style[horizontalAlignmentProperty.cssName] = HorizontalAlignment.CENTER;
this._actionView.style[verticalAlignmentProperty.cssName] = VerticalAlignment.MIDDLE;
this._actionBar._addView(this._actionView);
}
}

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

@@ -382,17 +382,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
this.style.marginBottom = value;
}
get horizontalAlignment(): "left" | "center" | "middle" | "right" | "stretch" {
get horizontalAlignment(): HorizontalAlignment {
return this.style.horizontalAlignment;
}
set horizontalAlignment(value: "left" | "center" | "middle" | "right" | "stretch") {
set horizontalAlignment(value: HorizontalAlignment) {
this.style.horizontalAlignment = value;
}
get verticalAlignment(): "top" | "center" | "middle" | "bottom" | "stretch" {
get verticalAlignment(): VerticalAlignment {
return this.style.verticalAlignment;
}
set verticalAlignment(value: "top" | "center" | "middle" | "bottom" | "stretch") {
set verticalAlignment(value: VerticalAlignment) {
this.style.verticalAlignment = value;
}
@@ -595,9 +595,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let effectiveMarginTop = childStyle.effectiveMarginTop;
let effectiveMarginBottom = childStyle.effectiveMarginBottom;
let vAlignment: string;
if (childStyle.effectiveHeight >= 0 && childStyle.verticalAlignment === "stretch") {
vAlignment = "center";
let vAlignment: VerticalAlignment;
if (childStyle.effectiveHeight >= 0 && childStyle.verticalAlignment === VerticalAlignment.STRETCH) {
vAlignment = VerticalAlignment.MIDDLE;
}
else {
vAlignment = childStyle.verticalAlignment;
@@ -609,20 +609,19 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let marginRight = childStyle.marginRight;
switch (vAlignment) {
case "top":
case VerticalAlignment.TOP:
childTop = top + effectiveMarginTop;
break;
case "center":
case "middle":
case VerticalAlignment.MIDDLE:
childTop = top + (bottom - top - childHeight + (effectiveMarginTop - effectiveMarginBottom)) / 2;
break;
case "bottom":
case VerticalAlignment.BOTTOM:
childTop = bottom - childHeight - effectiveMarginBottom;
break;
case "stretch":
case VerticalAlignment.STRETCH:
default:
childTop = top + effectiveMarginTop;
childHeight = bottom - top - (effectiveMarginTop + effectiveMarginBottom);
@@ -632,29 +631,28 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let effectiveMarginLeft = childStyle.effectiveMarginLeft;
let effectiveMarginRight = childStyle.effectiveMarginRight;
let hAlignment: string;
if (childStyle.effectiveWidth >= 0 && childStyle.horizontalAlignment === "stretch") {
hAlignment = "center";
let hAlignment: HorizontalAlignment;
if (childStyle.effectiveWidth >= 0 && childStyle.horizontalAlignment === HorizontalAlignment.STRETCH) {
hAlignment = HorizontalAlignment.CENTER;
}
else {
hAlignment = childStyle.horizontalAlignment;
}
switch (hAlignment) {
case "left":
case HorizontalAlignment.LEFT:
childLeft = left + effectiveMarginLeft;
break;
case "center":
case "middle":
case HorizontalAlignment.CENTER:
childLeft = left + (right - left - childWidth + (effectiveMarginLeft - effectiveMarginRight)) / 2;
break;
case "right":
case HorizontalAlignment.RIGHT:
childLeft = right - childWidth - effectiveMarginRight;
break;
case "stretch":
case HorizontalAlignment.STRETCH:
default:
childLeft = left + effectiveMarginLeft;
childWidth = right - left - (effectiveMarginLeft + effectiveMarginRight);
@@ -692,8 +690,8 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let horizontalMargins = style.effectiveMarginLeft + style.effectiveMarginRight;
let verticalMargins = style.effectiveMarginTop + style.effectiveMarginRight;
let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, style.effectiveWidth, style.horizontalAlignment === "stretch");
let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, style.effectiveHeight, style.verticalAlignment === "stretch");
let childWidthMeasureSpec = ViewCommon.getMeasureSpec(width, widthMode, horizontalMargins, style.effectiveWidth, style.horizontalAlignment === HorizontalAlignment.STRETCH);
let childHeightMeasureSpec = ViewCommon.getMeasureSpec(height, heightMode, verticalMargins, style.effectiveHeight, style.verticalAlignment === VerticalAlignment.STRETCH);
if (traceEnabled) {
traceWrite(child.parent + " :measureChild: " + child + " " + layout.measureSpecToString(childWidthMeasureSpec) + ", " + layout.measureSpecToString(childHeightMeasureSpec), traceCategories.Layout);
@@ -1190,12 +1188,32 @@ export const paddingBottomProperty = new CssProperty<Style, Length>({
});
paddingBottomProperty.register(Style);
export const verticalAlignmentProperty = new CssProperty<Style, string>({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: "stretch", affectsLayout: isIOS });
verticalAlignmentProperty.register(Style);
export type HorizontalAlignment = "left" | "center" | "right" | "stretch";
export namespace HorizontalAlignment {
export const LEFT: "left" = "left";
export const CENTER: "center" = "center";
export const RIGHT: "right" = "right";
export const STRETCH: "stretch" = "stretch";
export const isValid = makeValidator<HorizontalAlignment>(LEFT, CENTER, RIGHT, STRETCH);
export const parse = makeParser(isValid, STRETCH);
}
export const horizontalAlignmentProperty = new CssProperty<Style, string>({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: "stretch", affectsLayout: isIOS });
export const horizontalAlignmentProperty = new CssProperty<Style, HorizontalAlignment>({ name: "horizontalAlignment", cssName: "horizontal-align", defaultValue: HorizontalAlignment.STRETCH, affectsLayout: isIOS, valueConverter: HorizontalAlignment.parse });
horizontalAlignmentProperty.register(Style);
export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch";
export namespace VerticalAlignment {
export const TOP: "top" = "top";
export const MIDDLE: "middle" = "middle";
export const BOTTOM: "bottom" = "bottom";
export const STRETCH: "stretch" = "stretch";
export const isValid = makeValidator<VerticalAlignment>(TOP, MIDDLE, BOTTOM, STRETCH);
export const parse = makeParser(isValid, STRETCH);
}
export const verticalAlignmentProperty = new CssProperty<Style, VerticalAlignment>({ name: "verticalAlignment", cssName: "vertical-align", defaultValue: VerticalAlignment.STRETCH, affectsLayout: isIOS, valueConverter: VerticalAlignment.parse });
verticalAlignmentProperty.register(Style);
interface Thickness {
top: string,
right: string,

14
tns-core-modules/ui/core/view.android.ts
View File

@@ -8,7 +8,7 @@ import {
rotateProperty, scaleXProperty, scaleYProperty,
translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty,
Background, GestureTypes, GestureEventData, applyNativeSetters, Property,
traceEnabled, traceWrite, traceCategories, traceNotifyEvent, Visibility
traceEnabled, traceWrite, traceCategories, traceNotifyEvent, Visibility, HorizontalAlignment, VerticalAlignment
} from "./view-common";
export * from "./view-common";
@@ -561,17 +561,17 @@ export class View extends ViewCommon {
}
}
get [horizontalAlignmentProperty.native](): string {
return org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeView);
get [horizontalAlignmentProperty.native](): HorizontalAlignment {
return <HorizontalAlignment>org.nativescript.widgets.ViewHelper.getHorizontalAlignment(this.nativeView);
}
set [horizontalAlignmentProperty.native](value: string) {
set [horizontalAlignmentProperty.native](value: HorizontalAlignment) {
org.nativescript.widgets.ViewHelper.setHorizontalAlignment(this.nativeView, value);
}
get [verticalAlignmentProperty.native](): string {
return org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeView);
get [verticalAlignmentProperty.native](): VerticalAlignment {
return <VerticalAlignment>org.nativescript.widgets.ViewHelper.getVerticalAlignment(this.nativeView);
}
set [verticalAlignmentProperty.native](value: string) {
set [verticalAlignmentProperty.native](value: VerticalAlignment) {
org.nativescript.widgets.ViewHelper.setVerticalAlignment(this.nativeView, value);
}

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

@@ -273,12 +273,12 @@ declare module "ui/core/view" {
/**
* Gets or sets the alignment of this view within its parent along the Horizontal axis.
*/
horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch";
horizontalAlignment: HorizontalAlignment;
/**
* Gets or sets the alignment of this view within its parent along the Vertical axis.
*/
verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch";
verticalAlignment: VerticalAlignment;
/**
* Gets or sets the visibility of the view.
@@ -754,8 +754,8 @@ declare module "ui/core/view" {
export const paddingTopProperty: CssProperty<Style, Length>;
export const paddingBottomProperty: CssProperty<Style, Length>;
export const verticalAlignmentProperty: CssProperty<Style, string>;
export const horizontalAlignmentProperty: CssProperty<Style, string>;
export const horizontalAlignmentProperty: CssProperty<Style, HorizontalAlignment>;
export const verticalAlignmentProperty: CssProperty<Style, VerticalAlignment>;
export const fontSizeProperty: InheritedCssProperty<Style, number>;
export const fontFamilyProperty: InheritedCssProperty<Style, string>;
@@ -783,4 +783,24 @@ declare module "ui/core/view" {
export function isValid(value: any): boolean;
export function parse(value: string): Visibility;
}
export type HorizontalAlignment = "left" | "center" | "right" | "stretch";
export namespace HorizontalAlignment {
export const LEFT: "left";
export const CENTER: "center";
export const RIGHT: "right";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): HorizontalAlignment;
}
export type VerticalAlignment = "top" | "middle" | "bottom" | "stretch";
export namespace VerticalAlignment {
export const TOP: "top";
export const MIDDLE: "middle";
export const BOTTOM: "bottom";
export const STRETCH: "stretch";
export function isValid(value: any): boolean;
export function parse(value: string): VerticalAlignment;
}
}

1
tns-core-modules/ui/enums/enums.ts
View File

@@ -58,7 +58,6 @@ export module HorizontalAlignment {
export module VerticalAlignment {
export var top = "top";
export var center = "center";
export var middle = "middle";
export var bottom = "bottom";
export var stretch = "stretch";

19
tns-core-modules/ui/layouts/stack-layout/stack-layout.ios.ts
View File

@@ -1,4 +1,4 @@
import { StackLayoutBase, orientationProperty, View, layout } from "./stack-layout-common";
import { StackLayoutBase, orientationProperty, View, layout, VerticalAlignment, HorizontalAlignment } from "./stack-layout-common";
export * from "./stack-layout-common";
@@ -104,17 +104,16 @@ export class StackLayout extends StackLayoutBase {
let childRight = right - left - paddingRight;
switch (this.verticalAlignment) {
case "center":
case "middle":
case VerticalAlignment.MIDDLE:
childTop = (bottom - top - this._totalLength) / 2 + paddingTop - paddingBottom;
break;
case "bottom":
case VerticalAlignment.BOTTOM:
childTop = bottom - top - this._totalLength + paddingTop - paddingBottom;
break;
case "top":
case "stretch":
case VerticalAlignment.TOP:
case VerticalAlignment.STRETCH:
default:
childTop = paddingTop;
break;
@@ -141,16 +140,16 @@ export class StackLayout extends StackLayoutBase {
let childBottom = bottom - top - paddingBottom;
switch (this.horizontalAlignment) {
case "center":
case HorizontalAlignment.CENTER:
childLeft = (right - left - this._totalLength) / 2 + paddingLeft - paddingRight;
break;
case "right":
case HorizontalAlignment.RIGHT:
childLeft = right - left - this._totalLength + paddingLeft - paddingRight;
break;
case "left":
case "stretch":
case HorizontalAlignment.LEFT:
case HorizontalAlignment.STRETCH:
default:
childLeft = paddingLeft;
break;

6
tns-core-modules/ui/page/page.android.ts
View File

@@ -1,4 +1,4 @@
import { View, PageBase, Color, actionBarHiddenProperty, enableSwipeBackNavigationProperty, statusBarStyleProperty, androidStatusBarBackgroundProperty } from "./page-common";
import { View, PageBase, Color, actionBarHiddenProperty, enableSwipeBackNavigationProperty, statusBarStyleProperty, androidStatusBarBackgroundProperty, HorizontalAlignment, VerticalAlignment } from "./page-common";
import { ActionBar } from "ui/action-bar";
import { GridLayout } from "ui/layouts/grid-layout";
import { DIALOG_FRAGMENT_TAG } from "./constants";
@@ -36,8 +36,8 @@ function ensureDialogFragmentClass() {
dialog.requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);
// Hide actionBar and adjust alignment based on _fullscreen value.
this._owner.horizontalAlignment = this._fullscreen ? "stretch" : "center";
this._owner.verticalAlignment = this._fullscreen ? "stretch" : "center";
this._owner.horizontalAlignment = this._fullscreen ? HorizontalAlignment.STRETCH : HorizontalAlignment.CENTER;
this._owner.verticalAlignment = this._fullscreen ? VerticalAlignment.STRETCH : VerticalAlignment.MIDDLE;
this._owner.actionBarHidden = true;
dialog.setContentView(this._owner._nativeView, this._owner._nativeView.getLayoutParams());

10
tns-core-modules/ui/styling/style.d.ts vendored
View File

@@ -1,5 +1,5 @@
declare module "ui/styling/style" {
import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat, Visibility} from "ui/core/view";
import { Length, PercentLength, Color, Background, Font, ViewBase, Observable, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment} from "ui/core/view";
import { TextAlignment, TextDecoration, TextTransform, WhiteSpace } from "ui/text-base";
import { FontStyle, FontWeight } from "ui/styling/font";
@@ -34,8 +34,8 @@ declare module "ui/styling/style" {
rightMarginPercent: number;
bottomMarginPercent: number;
horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch";
verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch";
horizontalAlignment: HorizontalAlignment;
verticalAlignment: VerticalAlignment;
}
export class Style extends Observable {
@@ -106,8 +106,8 @@ declare module "ui/styling/style" {
public paddingTop: Length;
public paddingRight: Length;
public paddingBottom: Length;
public horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch";
public verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch";
public horizontalAlignment: HorizontalAlignment;
public verticalAlignment: VerticalAlignment;
// TabView-specific props
public tabTextColor: Color;

6
tns-core-modules/ui/styling/style.ts
View File

@@ -1,5 +1,5 @@
import { Style as StyleDefinition } from "ui/styling/style";
import { Length, PercentLength, Color, Background, Font, ViewBase, BackgroundRepeat, Visibility } from "ui/core/view";
import { Length, PercentLength, Color, Background, Font, ViewBase, BackgroundRepeat, Visibility, HorizontalAlignment, VerticalAlignment } from "ui/core/view";
import { Observable } from "data/observable";
import { resetStyleProperties } from "ui/core/properties";
@@ -85,8 +85,8 @@ export class Style extends Observable implements StyleDefinition {
public paddingTop: Length;
public paddingRight: Length;
public paddingBottom: Length;
public horizontalAlignment: "left" | "center" | "middle" | "right" | "stretch";
public verticalAlignment: "top" | "center" | "middle" | "bottom" | "stretch";
public horizontalAlignment: HorizontalAlignment;
public verticalAlignment: VerticalAlignment;
// TabView-specific props
public tabTextColor: Color;