Skip to content

Commit a1c570c

Browse files
manoldonevmanoldonev
authored
fix(ios): nowrap label measure in horizontal stack layout (#6186)
1 parent a8d016c commit a1c570c

3 files changed

Lines changed: 60 additions & 5 deletions

File tree

‎apps/app/ui-tests-app/layouts/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export function loadExamples() {
2121
examples.set("pgrid", "layouts-percent/grid");
2222
examples.set("pstack", "layouts-percent/stack");
2323
examples.set("pwrap", "layouts-percent/wrap");
24+
examples.set("stacklayout-6059", "layouts/stacklayout-6059");
2425

2526
return examples;
2627
}

‎apps/app/ui-tests-app/layouts/stacklayout-6059.xml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<StackLayout>
4+
<StackLayout orientation="horizontal">
5+
<StackLayout backgroundColor="GoldenRod">
6+
<Label text="overflowing text, overflow"></Label>
7+
</StackLayout>
8+
<StackLayout backgroundColor="LemonChiffon">
9+
<Label text="overflowing text, overflowing text"></Label>
10+
</StackLayout>
11+
<StackLayout backgroundColor="LightBlue">
12+
<Label text="overflowing text, overflowing text"></Label>
13+
</StackLayout>
14+
<StackLayout backgroundColor="HotPink">
15+
<Label text="overflowing text, overflowing text"></Label>
16+
</StackLayout>
17+
</StackLayout>
18+
19+
<StackLayout orientation="horizontal">
20+
<Label text="overflowing text, overflow" backgroundColor="LightBlue"></Label>
21+
<Label text="overflowing text, overflowing text" backgroundColor="LightGray"></Label>
22+
<Label text="overflowing text, overflowing text" backgroundColor="HotPink"></Label>
23+
<Label text="overflowing text, overflowing text" backgroundColor="Yellow"></Label>
24+
</StackLayout>
25+
26+
<StackLayout orientation="horizontal">
27+
<Label text="overflowing text, overflowing text" backgroundColor="GoldenRod" textWrap="true"></Label>
28+
<Label text="overflowing text, overflowing text" backgroundColor="LemonChiffon" textWrap="true"></Label>
29+
<Label text="overflowing text, overflowing text" backgroundColor="LightBlue" textWrap="true"></Label>
30+
</StackLayout>
31+
32+
<StackLayout orientation="horizontal">
33+
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="LightBlue" textWrap="true"></Label>
34+
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="LightGray" textWrap="true"></Label>
35+
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="HotPink" textWrap="true"></Label>
36+
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="Yellow" textWrap="true"></Label>
37+
</StackLayout>
38+
</StackLayout>
39+
40+
</Page>

‎tns-core-modules/ui/label/label.ios.ts‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,25 @@ export class Label extends TextBase implements LabelDefinition {
6868
this._fixedSize = (widthMode === layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE)
6969
| (heightMode === layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE);
7070

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);
71+
let nativeSize;
72+
if (this.textWrap) {
73+
// https://github.com/NativeScript/NativeScript/issues/4834
74+
// NOTE: utils.measureNativeView(...) relies on UIView.sizeThatFits(...) that
75+
// seems to have various issues when laying out UILabel instances.
76+
// We use custom measure logic here that relies on overriden
77+
// UILabel.textRectForBounds:limitedToNumberOfLines: in TNSLabel widget.
78+
nativeSize = this._measureNativeView(width, widthMode, height, heightMode);
79+
} else {
80+
// https://github.com/NativeScript/NativeScript/issues/6059
81+
// NOTE: _measureNativeView override breaks a scenario with StackLayout that arranges
82+
// labels horizontally (with textWrap=false) e.g. we are measuring label #2 within 356px,
83+
// label #2 needs more, and decides to show ellipsis(...) but because of this its native size
84+
// returned from UILabel.textRectForBounds:limitedToNumberOfLines: logic becomes 344px, so
85+
// StackLayout tries to measure label #3 within the remaining 12px which is wrong;
86+
// label #2 with ellipsis should take the whole 356px and label #3 should not be visible at all.
87+
nativeSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode);
88+
}
89+
7690
let labelWidth = nativeSize.width;
7791

7892
if (this.textWrap && widthMode === layout.AT_MOST) {

0 commit comments

Comments
 (0)