Commit 31fe00d
committed
fix(ios): fix label text wrapping inside flexbox layout
1 parent 7edf561 commit 31fe00d
2 files changed
Lines changed: 39 additions & 2 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -68,7 +68,11 @@ export class Label extends TextBase implements LabelDefinition { | |||
| 68 | 68 | this._fixedSize = (widthMode === layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE) | |
| 69 | 69 | | (heightMode === layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE); | |
| 70 | 70 | ||
| 71 | - const nativeSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode); | ||
| 71 | + // NOTE: utils.measureNativeView(...) relies on UIView.sizeThatFits(...) that | ||
| 72 | + // seems to have various issues when laying out UILabel instances. | ||
| 73 | + // We use custom measure logic here that relies on overriden | ||
| 74 | + // UILabel.textRectForBounds:limitedToNumberOfLines: in TNSLabel widget. | ||
| 75 | + const nativeSize = this._measureNativeView(width, widthMode, height, heightMode); | ||
| 72 | 76 | let labelWidth = nativeSize.width; | |
| 73 | 77 | ||
| 74 | 78 | if (this.textWrap && widthMode === layout.AT_MOST) { | |
@@ -85,6 +89,22 @@ export class Label extends TextBase implements LabelDefinition { | |||
| 85 | 89 | } | |
| 86 | 90 | } | |
| 87 | 91 | ||
| 92 | + private _measureNativeView(width: number, widthMode: number, height: number, heightMode: number): { width: number, height: number } { | ||
| 93 | + const view = <UILabel>this.nativeViewProtected; | ||
| 94 | + | ||
| 95 | + const nativeSize = view.textRectForBoundsLimitedToNumberOfLines( | ||
| 96 | + CGRectMake( | ||
| 97 | + 0, | ||
| 98 | + 0, | ||
| 99 | + widthMode === 0 /* layout.UNSPECIFIED */ ? Number.POSITIVE_INFINITY : layout.toDeviceIndependentPixels(width), | ||
| 100 | + heightMode === 0 /* layout.UNSPECIFIED */ ? Number.POSITIVE_INFINITY : layout.toDeviceIndependentPixels(height) | ||
| 101 | + ), 0).size; | ||
| 102 | + | ||
| 103 | + nativeSize.width = layout.round(layout.toDevicePixels(nativeSize.width)); | ||
| 104 | + nativeSize.height = layout.round(layout.toDevicePixels(nativeSize.height)); | ||
| 105 | + return nativeSize; | ||
| 106 | + } | ||
| 107 | + | ||
| 88 | 108 | [whiteSpaceProperty.setNative](value: WhiteSpace) { | |
| 89 | 109 | const nativeView = this.nativeViewProtected; | |
| 90 | 110 | switch (value) { | |
Lines changed: 18 additions & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -595,8 +595,25 @@ export class FlexboxLayout extends FlexboxLayoutBase { | |||
| 595 | 595 | } else { | |
| 596 | 596 | accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth; | |
| 597 | 597 | } | |
| 598 | - child.measure(makeMeasureSpec(roundedCalculatedWidth, EXACTLY), makeMeasureSpec(child.getMeasuredHeight(), EXACTLY)); | ||
| 598 | + | ||
| 599 | + const childWidthMeasureSpec = makeMeasureSpec(roundedCalculatedWidth, EXACTLY); | ||
| 600 | + | ||
| 601 | + // NOTE: for controls that support internal content wrapping (e.g. UILabel) reducing the width | ||
| 602 | + // might result in increased height e.g. text that could be shown on one line for larger | ||
| 603 | + // width needs to be wrapped in two when width is reduced. | ||
| 604 | + // As a result we cannot unconditionally measure with EXACTLY the current measured height | ||
| 605 | + const childHeightMeasureSpec = FlexboxLayout.getChildMeasureSpec(this._currentHeightMeasureSpec, | ||
| 606 | + lp.effectivePaddingTop + lp.effectivePaddingBottom + lp.effectiveMarginTop | ||
| 607 | + + lp.effectiveMarginBottom, lp.effectiveHeight < 0 ? WRAP_CONTENT : lp.effectiveHeight); | ||
| 608 | + | ||
| 609 | + child.measure(childWidthMeasureSpec, childHeightMeasureSpec); | ||
| 599 | 610 | child.effectiveMinWidth = minWidth; | |
| 611 | + | ||
| 612 | + // make sure crossSize is up-to-date as child calculated height might have increased | ||
| 613 | + flexLine._crossSize = Math.max( | ||
| 614 | + flexLine._crossSize, | ||
| 615 | + child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom | ||
| 616 | + ); | ||
| 600 | 617 | } | |
| 601 | 618 | flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight; | |
| 602 | 619 | } else { | |
0 commit comments