Skip to content

Commit e3d5f0d

Browse files
author
Alexander Vakrilov
authored
fix(tab-view): Title and icon positioning (#6362)
* fix(tab-view): Title and icon positioning * refactor: review FB addressed
1 parent 7456a83 commit e3d5f0d

3 files changed

Lines changed: 78 additions & 19 deletions

File tree

‎apps/app/ui-tests-app/tab-view/icon-title-placement.xml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<Page>
2+
<TabView style="color: green;">
3+
<TabView.items>
4+
<TabViewItem title="Title" iconSource="res://add_to_fav">
5+
<TabViewItem.view>
6+
<GridLayout>
7+
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
8+
</GridLayout>
9+
</TabViewItem.view>
10+
</TabViewItem>
11+
<TabViewItem iconSource="res://add_to_fav">
12+
<TabViewItem.view>
13+
<GridLayout>
14+
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
15+
</GridLayout>
16+
</TabViewItem.view>
17+
</TabViewItem>
18+
<TabViewItem title="Title">
19+
<TabViewItem.view>
20+
<GridLayout>
21+
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
22+
</GridLayout>
23+
</TabViewItem.view>
24+
</TabViewItem>
25+
</TabView.items>
26+
</TabView>
27+
</Page>

‎apps/app/ui-tests-app/tab-view/main-page.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,6 @@ export function loadExamples() {
2424
examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");
2525
examples.set("issue-5470", "tab-view/issue-5470");
2626
examples.set("tab-view-tab-text-font-size", "tab-view/tab-view-tab-text-font-size");
27+
examples.set("tab-view-icon-title-placement", "tab-view/icon-title-placement");
2728
return examples;
2829
}

‎tns-core-modules/ui/tab-view/tab-view.ios.ts‎

Lines changed: 50 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,13 @@ import { textTransformProperty, TextTransform, getTransformedText } from "../tex
1111
import { fromFileOrResource } from "../../image-source";
1212
import { profile } from "../../profiling";
1313
import { Frame } from "../frame";
14-
14+
import { ios as iosUtils } from "../../utils/utils"
15+
import { device } from "../../platform";
1516
export * from "./tab-view-common";
1617

18+
const majorVersion = iosUtils.MajorVersion;
19+
const isPhone = device.deviceType === "Phone";
20+
1721
class UITabBarControllerImpl extends UITabBarController {
1822

1923
private _owner: WeakRef<TabView>;
@@ -47,6 +51,17 @@ class UITabBarControllerImpl extends UITabBarController {
4751
owner.callUnloaded();
4852
}
4953
}
54+
55+
public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void {
56+
super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator);
57+
UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion
58+
.call(coordinator, null, () => {
59+
const owner = this._owner.get();
60+
if (owner && owner.items) {
61+
owner.items.forEach(tabItem => tabItem._updateTitleAndIconPositions());
62+
}
63+
});
64+
}
5065
}
5166

5267
class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControllerDelegate {
@@ -129,16 +144,32 @@ class UINavigationControllerDelegateImpl extends NSObject implements UINavigatio
129144
}
130145
}
131146

132-
function updateItemTitlePosition(tabBarItem: UITabBarItem): void {
133-
if (typeof (<any>tabBarItem).setTitlePositionAdjustment === "function") {
134-
(<any>tabBarItem).setTitlePositionAdjustment({ horizontal: 0, vertical: -20 });
135-
} else {
136-
tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: -20 };
147+
function updateTitleAndIconPositions(tabItem: TabViewItem, tabBarItem: UITabBarItem, controller: UIViewController) {
148+
if (!tabItem || !tabBarItem) {
149+
return;
150+
}
151+
152+
// For iOS <11 icon is *always* above the text.
153+
// For iOS 11 icon is above the text *only* on phones in portrait mode.
154+
const orientation = controller.interfaceOrientation;
155+
const isPortrait = orientation !== UIInterfaceOrientation.LandscapeLeft && orientation !== UIInterfaceOrientation.LandscapeRight;
156+
const isIconAboveTitle = (majorVersion < 11) || (isPhone && isPortrait);
157+
158+
if (!tabItem.iconSource) {
159+
if (isIconAboveTitle) {
160+
tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: -20 };
161+
} else {
162+
tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 };
163+
}
137164
}
138-
}
139165

140-
function updateItemIconPosition(tabBarItem: UITabBarItem): void {
141-
tabBarItem.imageInsets = new UIEdgeInsets({ top: 6, left: 0, bottom: -6, right: 0 });
166+
if (!tabItem.title) {
167+
if (isIconAboveTitle) {
168+
tabBarItem.imageInsets = new UIEdgeInsets({ top: 6, left: 0, bottom: -6, right: 0 });
169+
} else {
170+
tabBarItem.imageInsets = new UIEdgeInsets({ top: 0, left: 0, bottom: 0, right: 0 });
171+
}
172+
}
142173
}
143174

144175
export class TabViewItem extends TabViewItemBase {
@@ -174,11 +205,7 @@ export class TabViewItem extends TabViewItemBase {
174205
const title = getTransformedText(this.title, this.style.textTransform);
175206

176207
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, icon, index);
177-
if (!icon) {
178-
updateItemTitlePosition(tabBarItem);
179-
} else if (!title) {
180-
updateItemIconPosition(tabBarItem);
181-
}
208+
updateTitleAndIconPositions(this, tabBarItem, controller);
182209

183210
// TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
184211
// Delete the repeating code.
@@ -188,13 +215,21 @@ export class TabViewItem extends TabViewItemBase {
188215
}
189216
}
190217

218+
public _updateTitleAndIconPositions() {
219+
if (!this.__controller || !this.__controller.tabBarItem) {
220+
return;
221+
}
222+
updateTitleAndIconPositions(this, this.__controller.tabBarItem, this.__controller);
223+
}
224+
191225
[textTransformProperty.setNative](value: TextTransform) {
192226
this._update();
193227
}
194228
}
195229

196230
export class TabView extends TabViewBase {
197231
public viewController: UITabBarControllerImpl;
232+
public items: TabViewItem[];
198233
public _ios: UITabBarControllerImpl;
199234
private _delegate: UITabBarControllerDelegateImpl;
200235
private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
@@ -376,11 +411,7 @@ export class TabView extends TabViewBase {
376411
const controller = this.getViewController(item);
377412
const icon = this._getIcon(item.iconSource);
378413
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((item.title || ""), icon, i);
379-
if (!icon) {
380-
updateItemTitlePosition(tabBarItem);
381-
} else if (!item.title) {
382-
updateItemIconPosition(tabBarItem);
383-
}
414+
updateTitleAndIconPositions(item, tabBarItem, controller);
384415

385416
applyStatesToItem(tabBarItem, states);
386417

0 commit comments

Comments
 (0)