javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 03:31:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios): nowrap label measure in horizontal stack layout (#6186)

Browse Source
This commit is contained in:
Manol Donev
2018-08-17 18:24:06 +03:00
committed by GitHub
parent a8d016c6d7
commit a1c570c702
3 changed files with 60 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/app/ui-tests-app/layouts/main-page.ts
View File

@ -21,6 +21,7 @@ export function loadExamples() {
examples.set("pgrid", "layouts-percent/grid");
examples.set("pstack", "layouts-percent/stack");
examples.set("pwrap", "layouts-percent/wrap");
examples.set("stacklayout-6059", "layouts/stacklayout-6059");
return examples;
}

40
apps/app/ui-tests-app/layouts/stacklayout-6059.xml Normal file
View File

@ -0,0 +1,40 @@
<Page class="page" xmlns="http://schemas.nativescript.org/tns.xsd">
<StackLayout>
<StackLayout orientation="horizontal">
<StackLayout backgroundColor="GoldenRod">
<Label text="overflowing text, overflow"></Label>
</StackLayout>
<StackLayout backgroundColor="LemonChiffon">
<Label text="overflowing text, overflowing text"></Label>
</StackLayout>
<StackLayout backgroundColor="LightBlue">
<Label text="overflowing text, overflowing text"></Label>
</StackLayout>
<StackLayout backgroundColor="HotPink">
<Label text="overflowing text, overflowing text"></Label>
</StackLayout>
</StackLayout>
<StackLayout orientation="horizontal">
<Label text="overflowing text, overflow" backgroundColor="LightBlue"></Label>
<Label text="overflowing text, overflowing text" backgroundColor="LightGray"></Label>
<Label text="overflowing text, overflowing text" backgroundColor="HotPink"></Label>
<Label text="overflowing text, overflowing text" backgroundColor="Yellow"></Label>
</StackLayout>
<StackLayout orientation="horizontal">
<Label text="overflowing text, overflowing text" backgroundColor="GoldenRod" textWrap="true"></Label>
<Label text="overflowing text, overflowing text" backgroundColor="LemonChiffon" textWrap="true"></Label>
<Label text="overflowing text, overflowing text" backgroundColor="LightBlue" textWrap="true"></Label>
</StackLayout>
<StackLayout orientation="horizontal">
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="LightBlue" textWrap="true"></Label>
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="LightGray" textWrap="true"></Label>
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="HotPink" textWrap="true"></Label>
<Label text="1 2 3 4 5 6 7 8 9 0" backgroundColor="Yellow" textWrap="true"></Label>
</StackLayout>
</StackLayout>
</Page>

24
tns-core-modules/ui/label/label.ios.ts
View File

@ -68,11 +68,25 @@ export class Label extends TextBase implements LabelDefinition {
this._fixedSize = (widthMode === layout.EXACTLY ? FixedSize.WIDTH : FixedSize.NONE)
| (heightMode === layout.EXACTLY ? FixedSize.HEIGHT : FixedSize.NONE);
// NOTE: utils.measureNativeView(...) relies on UIView.sizeThatFits(...) that
// seems to have various issues when laying out UILabel instances.
// We use custom measure logic here that relies on overriden
// UILabel.textRectForBounds:limitedToNumberOfLines: in TNSLabel widget.
const nativeSize = this._measureNativeView(width, widthMode, height, heightMode);
let nativeSize;
if (this.textWrap) {
// https://github.com/NativeScript/NativeScript/issues/4834
// NOTE: utils.measureNativeView(...) relies on UIView.sizeThatFits(...) that
// seems to have various issues when laying out UILabel instances.
// We use custom measure logic here that relies on overriden
// UILabel.textRectForBounds:limitedToNumberOfLines: in TNSLabel widget.
nativeSize = this._measureNativeView(width, widthMode, height, heightMode);
} else {
// https://github.com/NativeScript/NativeScript/issues/6059
// NOTE: _measureNativeView override breaks a scenario with StackLayout that arranges
// labels horizontally (with textWrap=false) e.g. we are measuring label #2 within 356px,
// label #2 needs more, and decides to show ellipsis(...) but because of this its native size
// returned from UILabel.textRectForBounds:limitedToNumberOfLines: logic becomes 344px, so
// StackLayout tries to measure label #3 within the remaining 12px which is wrong;
// label #2 with ellipsis should take the whole 356px and label #3 should not be visible at all.
nativeSize = layout.measureNativeView(nativeView, width, widthMode, height, heightMode);
}
let labelWidth = nativeSize.width;
if (this.textWrap && widthMode === layout.AT_MOST) {