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(TabView): item styling improvements for iOS 15+ (#9888)

Browse Source
This commit is contained in:
Dimitris - Rafail Katsampas
2022-05-01 06:56:59 +03:00
committed by Nathan Walker
parent 58a720699f
commit 7ccc949712
1 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
packages/core/ui/tab-view/index.ios.ts
View File

@@ -253,10 +253,13 @@ export class TabViewItem extends TabViewItemBase {
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, icon, index);
updateTitleAndIconPositions(this, tabBarItem, controller);
// TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
// Delete the repeating code.
const states = getTitleAttributesForStates(parent);
applyStatesToItem(tabBarItem, states);
// There is no need to request title styles update here in newer versions as styling is handled by bar appearance instance
if (majorVersion < 15) {
// TODO: Repeating code. Make TabViewItemBase - ViewBase and move the colorProperty on tabViewItem.
// Delete the repeating code.
const states = getTitleAttributesForStates(parent);
applyStatesToItem(tabBarItem, states);
}
controller.tabBarItem = tabBarItem;
}
}
@@ -464,13 +467,19 @@ export class TabView extends TabViewBase {
const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(item.title || '', icon, i);
updateTitleAndIconPositions(item, tabBarItem, controller);
applyStatesToItem(tabBarItem, states);
if (majorVersion < 15) {
applyStatesToItem(tabBarItem, states);
}
controller.tabBarItem = tabBarItem;
controllers.addObject(controller);
(<TabViewItemDefinition>item).canBeLoaded = true;
});
if (majorVersion >= 15) {
this.updateBarItemAppearance(<UITabBar>this._ios.tabBar, states);
}
this._ios.viewControllers = controllers;
this._ios.customizableViewControllers = null;
@@ -517,13 +526,32 @@ export class TabView extends TabViewBase {
const tabBar = <UITabBar>this.ios.tabBar;
const states = getTitleAttributesForStates(this);
for (let i = 0; i < tabBar.items.count; i++) {
applyStatesToItem(tabBar.items[i], states);
if (majorVersion >= 15) {
this.updateBarItemAppearance(tabBar, states);
} else {
for (let i = 0; i < tabBar.items.count; i++) {
applyStatesToItem(tabBar.items[i], states);
}
}
}
private updateBarItemAppearance(tabBar: UITabBar, states: TabStates) {
const appearance = this._getAppearance(tabBar);
const itemAppearances = ['stackedLayoutAppearance', 'inlineLayoutAppearance', 'compactInlineLayoutAppearance'];
for (let itemAppearance of itemAppearances) {
appearance[itemAppearance].normal.titleTextAttributes = states.normalState;
appearance[itemAppearance].selected.titleTextAttributes = states.selectedState;
}
this._updateAppearance(tabBar, appearance);
}
private _getAppearance(tabBar: UITabBar) {
return tabBar.standardAppearance ?? UITabBarAppearance.new();
if (tabBar.standardAppearance == null) {
const appearance = UITabBarAppearance.new();
appearance.stackedLayoutAppearance = appearance.inlineLayoutAppearance = appearance.compactInlineLayoutAppearance = UITabBarItemAppearance.new();
return appearance;
}
return tabBar.standardAppearance;
}
private _updateAppearance(tabBar: UITabBar, appearance: UITabBarAppearance) {
@@ -620,23 +648,28 @@ interface TabStates {
}
function getTitleAttributesForStates(tabView: TabView): TabStates {
const result: TabStates = {};
const result: TabStates = {
normalState: NSMutableDictionary.new(),
selectedState: NSMutableDictionary.new(),
};
const defaultTabItemFontSize = 10;
const tabItemFontSize = tabView.style.tabTextFontSize || defaultTabItemFontSize;
const font: UIFont = (tabView.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
const tabItemTextColor = tabView.style.tabTextColor;
const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
result.normalState = { [NSFontAttributeName]: font };
if (textColor) {
result.normalState[UITextAttributeTextColor] = textColor;
const titleFontSize = tabView.style.tabTextFontSize;
let font = tabView.style.fontInternal || Font.default;
if (titleFontSize != null) {
font = font.withFontSize(titleFontSize);
}
const tabSelectedItemTextColor = tabView.style.selectedTabTextColor;
const selectedTextColor = tabSelectedItemTextColor instanceof Color ? tabSelectedItemTextColor.ios : null;
result.selectedState = { [NSFontAttributeName]: font };
if (selectedTextColor) {
result.selectedState[UITextAttributeTextColor] = selectedTextColor;
const nativeFont: UIFont = font.getUIFont(UIFont.systemFontOfSize(UIFont.labelFontSize));
result.normalState.setValueForKey(nativeFont, NSFontAttributeName);
result.selectedState.setValueForKey(nativeFont, NSFontAttributeName);
const titleColor = tabView.style.tabTextColor;
if (titleColor instanceof Color) {
result.normalState.setValueForKey(titleColor.ios, UITextAttributeTextColor);
}
const selectedTitleColor = tabView.style.selectedTabTextColor;
if (selectedTitleColor instanceof Color) {
result.selectedState.setValueForKey(selectedTitleColor.ios, UITextAttributeTextColor);
}
return result;