Merge pull request #3027 from NativeScript/issue-2689

Add TabView.iosIconRenderingMode property

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

@@ -18,6 +18,7 @@ export function pageLoaded(args: EventData) {
     examples.set("tabStyle", "tab-view/all");
     examples.set("tabmore", "tab-view/tab-view-more");
     examples.set("tabViewCss", "tab-view/tab-view-css");
+    examples.set("tab-view-icons", "tab-view/tab-view-icon");
 
     let viewModel = new SubMainPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

apps/app/ui-tests-app/tab-view/tab-view-icon.ts

@@ -0,0 +1,14 @@
+import { EventData } from "data/observable";
+import { Button } from "ui/button";
+import { TabView } from "ui/tab-view";
+
+let iconModes = ["automatic", "alwaysOriginal", "alwaysTemplate", undefined];
+
+export function onChangeRenderingMode(args: EventData){
+    let button = (<Button>args.object);
+    let tabView = button.page.getViewById<TabView>("tab-view");
+    tabView.iosIconRenderingMode = iconModes[(iconModes.indexOf(tabView.iosIconRenderingMode) + 1) % iconModes.length];
+    for(let i = 0, length = tabView.items.length; i < length; i++){
+        (<Button>tabView.items[i].view).text = "" + tabView.iosIconRenderingMode; 
+    }
+}

apps/app/ui-tests-app/tab-view/tab-view-icon.xml

@@ -0,0 +1,26 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+    <TabView id="tab-view" tabTextColor="green" selectedTabTextColor="red" tabBackgroundColor="yellow">
+        <TabView.items>
+            <TabViewItem iconSource="res://icon">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem iconSource="res://add_to_fav">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem iconSource="res://icon" title="NativeScript">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem iconSource="res://add_to_fav" title="Favorites">
+                <TabViewItem.view>
+                    <Button text="undefined" tap="onChangeRenderingMode"/>
+                </TabViewItem.view>
+            </TabViewItem>
+        </TabView.items>
+    </TabView>
+</Page>

tns-core-modules/ui/tab-view/tab-view-common.ts

@@ -237,6 +237,13 @@ export class TabView extends View implements definition.TabView, AddArrayFromBui
         this.style.textTransform = value;
     }
 
+    get iosIconRenderingMode(): string {
+        return undefined;
+    }
+    set iosIconRenderingMode(value: string) {
+        //
+    }
+
     public _onSelectedIndexPropertyChangedSetNativeValue(data: PropertyChangeData) {
         var index = this.selectedIndex;
         if (types.isUndefined(index)) {

tns-core-modules/ui/tab-view/tab-view.d.ts

@@ -105,6 +105,15 @@ declare module "ui/tab-view" {
          */
         ios: any /* UITabBarController */;
 
+        /**
+         * Gets or set the UIImageRenderingMode of the tab icons in iOS. 
+         * Valid values are:
+         *  - automatic
+         *  - alwaysOriginal
+         *  - alwaysTemplate  
+         */
+        iosIconRenderingMode: string;
+
         /**
          * String value used when hooking to the selectedIndexChanged event.
          */

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

@@ -125,6 +125,7 @@ export class TabViewItem extends common.TabViewItem {
     public _update() {
         if (this._parent && this._controller) {
             var icon = this._parent._getIcon(this.iconSource);
+            //TODO: Implement initWithSystemItem to support standard system icons
             var tabBarItem = UITabBarItem.alloc().initWithTitleImageTag((this.title || ""), icon, this._parent.items.indexOf(this));
             if (!icon) {
                 if (types.isFunction((<any>tabBarItem).setTitlePositionAdjustment)) {
@@ -301,6 +302,36 @@ export class TabView extends common.TabView {
         }
     }
 
+    private _iconRenderingMode: string;
+    get iosIconRenderingMode(): string {
+        return this._iconRenderingMode;
+    }
+    set iosIconRenderingMode(value: string) {
+        if (this._iconRenderingMode !== value){
+            this._iconRenderingMode = value;
+            this._iconsCache = {};
+            if (this.items && this.items.length){
+                for (let i = 0, length = this.items.length; i < length; i++) {
+                    if (this.items[i].iconSource) {
+                        (<any>this.items[i])._update();
+                    }
+                }
+            }
+        }
+    }
+
+    private _getIconRenderingMode(): UIImageRenderingMode {
+        switch(this._iconRenderingMode) {
+            case "alwaysOriginal":
+                return UIImageRenderingMode.AlwaysOriginal;
+            case "alwaysTemplate":
+                return UIImageRenderingMode.AlwaysTemplate;
+            case "automatic":
+            default:
+                return UIImageRenderingMode.Automatic;
+        }
+    }
+
     public _getIcon(iconSource: string): UIImage {
         if (!iconSource) {
             return null;
@@ -313,7 +344,7 @@ export class TabView extends common.TabView {
 
             var is = imageSource.fromFileOrResource(iconSource);
             if (is && is.ios) {
-                var originalRenderedImage = is.ios.imageWithRenderingMode(UIImageRenderingMode.Automatic);
+                var originalRenderedImage = is.ios.imageWithRenderingMode(this._getIconRenderingMode());
                 this._iconsCache[iconSource] = originalRenderedImage;
                 image = originalRenderedImage;
             }