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

feat(ios): add icon rendering mode for bottom navigation (#7738)

Browse Source
This commit is contained in:
Martin Yankov
2019-08-28 17:10:55 +03:00
committed by GitHub
parent f436b6f100
commit ff6d89fc13
6 changed files with 21 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/ui-tests-app/app/bottom-navigation/binding-page.xml
View File

@ -11,7 +11,7 @@
</StackLayout>
<GridLayout row="1">
<BottomNavigation automationText="tabNavigation" loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
<TabStrip items="{{ tabStripItems }}">
<TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
</TabStrip>
</BottomNavigation>
</GridLayout>

39
e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml
View File

@ -3,23 +3,8 @@
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>
<!-- w/o TabStrip -->
<!-- <BottomNavigation>
<TabContentItem>
<GridLayout>
<Label text="First View"/>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View"/>
</GridLayout>
</TabContentItem>
</BottomNavigation> -->
<!-- w/ TabStrip -->
<BottomNavigation id="bottomNav" automationText="tabNavigation" >
<TabStrip>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem title="First Tab 11" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<!-- <Image src="res://icon" /> -->
@ -71,26 +56,4 @@
</StackLayout>
</TabContentItem>
</BottomNavigation>
<!-- =============================================================================================== -->
<!-- Bottom Bar with TabStrip -->
<!-- <BottomNavigationBar>
<TabStrip>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</TabStrip>
</BottomNavigationBar> -->
<!-- Bottom Bar w/o TabStrip -->
<!-- <BottomNavigationBar>
<TabStripItem title="First Tab" iconSource="res://icon"></TabStripItem>
<TabStripItem>
<Image src="res://icon" />
<Label text="Second Tab" />
</TabStripItem>
</BottomNavigationBar> -->
</Page>

2
e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml
View File

@ -2,7 +2,7 @@
<ActionBar title="BottomNavigation" icon="" class="action-bar">
</ActionBar>
<BottomNavigation id="bottomNavigation" automationText="tabNavigation" class="font-awesome">
<TabStrip>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem title="motorcycle-res" iconSource="res://baseline_motorcycle_black_24"></TabStripItem>
<TabStripItem iconSource="font://&#xf206;" title="icon">
</TabStripItem>

2
e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml
View File

@ -3,7 +3,7 @@
</ActionBar>
<BottomNavigation id="tab-view" selectedIndexChanged="onSelectedIndexChanged" automationText="tabNavigation" >
<TabStrip>
<TabStrip iosIconRenderingMode="alwaysOriginal">
<TabStripItem iconSource="res://icon" title="selected"></TabStripItem>
<TabStripItem iconSource="res://testlogo" title="unselected"></TabStripItem>
</TabStrip>

18
tns-core-modules/ui/bottom-navigation/bottom-navigation.ios.ts
View File

@ -531,7 +531,15 @@ export class BottomNavigation extends TabNavigationBase {
}
private getIconRenderingMode(): UIImageRenderingMode {
return UIImageRenderingMode.AlwaysOriginal;
switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
case "alwaysOriginal":
return UIImageRenderingMode.AlwaysOriginal;
case "alwaysTemplate":
return UIImageRenderingMode.AlwaysTemplate;
case "automatic":
default:
return UIImageRenderingMode.Automatic;
}
}
private getIcon(tabStripItem: TabStripItem): UIImage {
@ -547,10 +555,12 @@ export class BottomNavigation extends TabNavigationBase {
const color = target.style.color;
const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(";");
let isFontIcon = false;
let image: UIImage = this._iconsCache[iconTag];
if (!image) {
let is = new ImageSource;
if (isFontIconURI(iconSource)) {
isFontIcon = true;
const fontIconCode = iconSource.split("//")[1];
is = fromFontIconCode(fontIconCode, font, color);
} else {
@ -564,7 +574,11 @@ export class BottomNavigation extends TabNavigationBase {
image = this.getFixedSizeIcon(image);
}
const originalRenderedImage = image.imageWithRenderingMode(this.getIconRenderingMode());
let renderingMode: UIImageRenderingMode = UIImageRenderingMode.AlwaysOriginal;
if (!isFontIcon) {
renderingMode = this.getIconRenderingMode();
}
const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
this._iconsCache[iconTag] = originalRenderedImage;
image = originalRenderedImage;
} else {

1
tns-core-modules/ui/tabs/tabs.ios.ts
View File

@ -885,6 +885,7 @@ export class Tabs extends TabsBase {
}
private getIconRenderingMode(): UIImageRenderingMode {
// MDCTabBar doesn't work with rendering mode AlwaysTemplate
return UIImageRenderingMode.AlwaysOriginal;
}