javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tab-view): Title and icon positioning (#6362)

Browse Source 
* fix(tab-view): Title and icon positioning

* refactor: review FB addressed
This commit is contained in:
Alexander Vakrilov
2018-10-08 11:23:34 +03:00
committed by GitHub
parent 7456a83f3c
commit e3d5f0d409
3 changed files with 78 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/app/ui-tests-app/tab-view/icon-title-placement.xml Normal file
View File

@@ -0,0 +1,27 @@
<Page>
<TabView style="color: green;">
<TabView.items>
<TabViewItem title="Title" iconSource="res://add_to_fav">
<TabViewItem.view>
<GridLayout>
<Label text="Title and icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem iconSource="res://add_to_fav">
<TabViewItem.view>
<GridLayout>
<Label text="Only icon" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Title">
<TabViewItem.view>
<GridLayout>
<Label text="Only title" verticalAlignment="center" horizontalAlignment="center"/>
</GridLayout>
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>

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

@@ -24,5 +24,6 @@ export function loadExamples() {
examples.set("tab-view-bottom-position", "tab-view/tab-view-bottom-position");
examples.set("issue-5470", "tab-view/issue-5470");
examples.set("tab-view-tab-text-font-size", "tab-view/tab-view-tab-text-font-size");
examples.set("tab-view-icon-title-placement", "tab-view/icon-title-placement");
return examples;
}

69
tns-core-modules/ui/tab-view/tab-view.ios.ts
View File

@@ -11,9 +11,13 @@ import { textTransformProperty, TextTransform, getTransformedText } from "../tex
import { fromFileOrResource } from "../../image-source";
import { profile } from "../../profiling";
import { Frame } from "../frame";
import { ios as iosUtils } from "../../utils/utils"
import { device } from "../../platform";
export * from "./tab-view-common";
const majorVersion = iosUtils.MajorVersion;
const isPhone = device.deviceType === "Phone";
class UITabBarControllerImpl extends UITabBarController {
private _owner: WeakRef<TabView>;
@@ -47,6 +51,17 @@ class UITabBarControllerImpl extends UITabBarController {
owner.callUnloaded();
}
}
public viewWillTransitionToSizeWithTransitionCoordinator(size: CGSize, coordinator: UIViewControllerTransitionCoordinator): void {
super.viewWillTransitionToSizeWithTransitionCoordinator(size, coordinator);
UIViewControllerTransitionCoordinator.prototype.animateAlongsideTransitionCompletion
.call(coordinator, null, () => {
const owner = this._owner.get();
if (owner && owner.items) {
owner.items.forEach(tabItem => tabItem._updateTitleAndIconPositions());
}
});
}
}
class UITabBarControllerDelegateImpl extends NSObject implements UITabBarControllerDelegate {
@@ -129,16 +144,32 @@ class UINavigationControllerDelegateImpl extends NSObject implements UINavigatio
}
}
function updateItemTitlePosition(tabBarItem: UITabBarItem): void {
if (typeof (<any>tabBarItem).setTitlePositionAdjustment === "function") {
(<any>tabBarItem).setTitlePositionAdjustment({ horizontal: 0, vertical: -20 });
} else {
tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: -20 };
function updateTitleAndIconPositions(tabItem: TabViewItem, tabBarItem: UITabBarItem, controller: UIViewController) {
if (!tabItem || !tabBarItem) {
return;
}
}
function updateItemIconPosition(tabBarItem: UITabBarItem): void {
tabBarItem.imageInsets = new UIEdgeInsets({ top: 6, left: 0, bottom: -6, right: 0 });
// For iOS <11 icon is *always* above the text.
// For iOS 11 icon is above the text *only* on phones in portrait mode.
const orientation = controller.interfaceOrientation;
const isPortrait = orientation !== UIInterfaceOrientation.LandscapeLeft && orientation !== UIInterfaceOrientation.LandscapeRight;
const isIconAboveTitle = (majorVersion < 11) || (isPhone && isPortrait);
if (!tabItem.iconSource) {
if (isIconAboveTitle) {
tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: -20 };
} else {
tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 };
}
}
if (!tabItem.title) {
if (isIconAboveTitle) {
tabBarItem.imageInsets = new UIEdgeInsets({ top: 6, left: 0, bottom: -6, right: 0 });
} else {
tabBarItem.imageInsets = new UIEdgeInsets({ top: 0, left: 0, bottom: 0, right: 0 });
}
}
}
export class TabViewItem extends TabViewItemBase {
@@ -174,11 +205,7 @@ export class TabViewItem extends TabViewItemBase {
const title = getTransformedText(this.title, this.style.textTransform);
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, icon, index);
if (!icon) {
updateItemTitlePosition(tabBarItem);
} else if (!title) {
updateItemIconPosition(tabBarItem);
}
updateTitleAndIconPositions(this, tabBarItem, controller);
// TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
// Delete the repeating code.
@@ -188,6 +215,13 @@ export class TabViewItem extends TabViewItemBase {
}
}
public _updateTitleAndIconPositions() {
if (!this.__controller || !this.__controller.tabBarItem) {
return;
}
updateTitleAndIconPositions(this, this.__controller.tabBarItem, this.__controller);
}
[textTransformProperty.setNative](value: TextTransform) {
this._update();
}
@@ -195,6 +229,7 @@ export class TabViewItem extends TabViewItemBase {
export class TabView extends TabViewBase {
public viewController: UITabBarControllerImpl;
public items: TabViewItem[];
public _ios: UITabBarControllerImpl;
private _delegate: UITabBarControllerDelegateImpl;
private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
@@ -376,11 +411,7 @@ export class TabView extends TabViewBase {
const controller = this.getViewController(item);
const icon = this._getIcon(item.iconSource);
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((item.title || ""), icon, i);
if (!icon) {
updateItemTitlePosition(tabBarItem);
} else if (!item.title) {
updateItemIconPosition(tabBarItem);
}
updateTitleAndIconPositions(item, tabBarItem, controller);
applyStatesToItem(tabBarItem, states);