Implement custom measure for ios btn when textWrap is true (#4326)

Implement custom measure for ios btn when textWrap is true
This commit is contained in:
Alexander Vakrilov
2017-06-08 10:29:50 +03:00
committed by GitHub
parent 014e7a8e0f
commit e33eca63d6
7 changed files with 101 additions and 20 deletions

View File

@@ -1,5 +1,5 @@
import { Button as ButtonDefinition } from ".";
import { TextBase } from "../text-base";
import { TextBase, booleanConverter } from "../text-base";
export * from "../text-base";
@@ -10,6 +10,10 @@ export abstract class ButtonBase extends TextBase implements ButtonDefinition {
return this.style.whiteSpace === "normal";
}
set textWrap(value: boolean) {
if (typeof value === "string") {
value = booleanConverter(value)
}
this.style.whiteSpace = value ? "normal" : "nowrap";
}
}

View File

@@ -3,7 +3,7 @@ import {
ButtonBase, PseudoClassHandler, Length, layout,
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty,
whiteSpaceProperty, WhiteSpace, textAlignmentProperty, TextAlignment
whiteSpaceProperty, WhiteSpace, textAlignmentProperty, TextAlignment, View
} from "./button-common";
export * from "./button-common";
@@ -145,19 +145,19 @@ export class Button extends ButtonBase {
[textAlignmentProperty.setNative](value: TextAlignment) {
switch (value) {
case "left":
this.nativeView.titleLabel.textAlignment = NSTextAlignment.Left;
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left;
break;
case "initial":
case "center":
this.nativeView.titleLabel.textAlignment = NSTextAlignment.Center;
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Center;
break;
case "right":
this.nativeView.titleLabel.textAlignment = NSTextAlignment.Right;
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Right;
break;
case "left":
this.nativeView.titleLabel.textAlignment = NSTextAlignment.Left;
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left;
break;
case "initial":
case "center":
this.nativeView.titleLabel.textAlignment = NSTextAlignment.Center;
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Center;
break;
case "right":
this.nativeView.titleLabel.textAlignment = NSTextAlignment.Right;
this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Right;
break;
}
}
@@ -175,6 +175,46 @@ export class Button extends ButtonBase {
break;
}
}
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
// If there is text-wrap UIButton.sizeThatFits will return wrong result (not respecting the text wrap).
// So fallback to original onMeasure if there is no text-wrap and use custom measure otherwise.
if (!this.textWrap) {
return super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}
let nativeView = this.nativeView;
if (nativeView) {
const width = layout.getMeasureSpecSize(widthMeasureSpec);
const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
const height = layout.getMeasureSpecSize(heightMeasureSpec);
const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
const horizontalPadding = this.effectivePaddingLeft + this.effectiveBorderLeftWidth + this.effectivePaddingRight + this.effectiveBorderRightWidth;
let verticalPadding = this.effectivePaddingTop + this.effectiveBorderTopWidth + this.effectivePaddingBottom + this.effectiveBorderBottomWidth;
// The default button padding for UIButton - 6dip top and bottom.
if (verticalPadding === 0) {
verticalPadding = layout.toDevicePixels(12);
}
const desiredSize = layout.measureNativeView(
nativeView.titleLabel,
width - horizontalPadding, widthMode,
height - verticalPadding, heightMode);
desiredSize.width = desiredSize.width + horizontalPadding;
desiredSize.height = desiredSize.height + verticalPadding;
const measureWidth = Math.max(desiredSize.width, this.effectiveMinWidth);
const measureHeight = Math.max(desiredSize.height, this.effectiveMinHeight);
const widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
const heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
this.setMeasuredDimension(widthAndState, heightAndState);
}
}
}
class TapHandlerImpl extends NSObject {

View File

@@ -1,5 +1,5 @@
import { Label as LabelDefinition } from ".";
import { TextBase, WhiteSpace, whiteSpaceProperty } from "../text-base";
import { TextBase, WhiteSpace, whiteSpaceProperty, booleanConverter } from "../text-base";
import { profile } from "../../profiling";
export * from "../text-base";
@@ -13,6 +13,10 @@ export class Label extends TextBase implements LabelDefinition {
return this.style.whiteSpace === "normal";
}
set textWrap(value: boolean) {
if (typeof value === "string") {
value = booleanConverter(value)
}
this.style.whiteSpace = value ? "normal" : "nowrap";
}

View File

@@ -4,7 +4,7 @@ import {
TextBase, View, layout,
borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty,
paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, whiteSpaceProperty,
Length, WhiteSpace
Length, WhiteSpace, booleanConverter
} from "../text-base";
import { ios } from "../styling/background";
@@ -36,7 +36,11 @@ export class Label extends TextBase implements LabelDefinition {
get textWrap(): boolean {
return this.style.whiteSpace === "normal";
}
set textWrap(value: boolean) {
set textWrap(value: boolean) {
if (typeof value === "string") {
value = booleanConverter(value)
}
this.style.whiteSpace = value ? "normal" : "nowrap";
}