TabView color and selctedColors

apps/tests/pages/tab-view.ts

@@ -1,15 +1,15 @@
 var observableModule = require("data/observable");
 var vm = new observableModule.Observable();
-function onPageLoaded(args) {
+export function onPageLoaded(args) {
     var page = args.object;
     vm.set("firstTitle", "fiiiirst");
     vm.set("secondTitle", "secondTitle");
     vm.set("secondIcon", "res://icon");
     page.bindingContext = vm;
 }
-exports.onPageLoaded = onPageLoaded;
 var i = 0;
-function onTap() {
+
+export function onTap() {
     i++;
     vm.set("firstTitle", "changed " + i);
     if (i === 3) {
@@ -19,5 +19,15 @@ function onTap() {
         vm.set("firstIcon", "");
     }
 }
-exports.onTap = onTap;
-//# sourceMappingURL=tab-view.js.map
+
+export function setStyle(args) {
+    var page = args.object.actionBar.page;
+
+    page.css = "TabView { color: red; }";
+}
+
+export function clearStyle(args) {
+    var page = args.object.actionBar.page;
+
+    page.css = "Page { background-color: red; }";
+}

apps/tests/pages/tab-view.xml

@@ -1,6 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Page loaded="onPageLoaded">
-  <TabView>
+  <Page.actionBar>
+    <ActionBar title="Title" class="custom-action-bar">
+      <ActionBar.actionItems>
+        <ActionItem text="set" tap="setStyle"/>
+        <ActionItem text="clear" tap="clearStyle"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <TabView selectedColor="green">
     <TabView.items>
       <TabViewItem title="{{ firstTitle }}" iconSource="{{ firstIcon }}">
         <TabViewItem.view>

org.nativescript.widgets.d.ts

@@ -152,6 +152,9 @@
 
                 setItems(items: Array<TabItemSpec>, viewPager: android.support.v4.view.ViewPager): void;
                 updateItemAt(position: number, itemSpec: TabItemSpec): void;
+
+                getTextViewForItemAt(index: number): android.widget.TextView;
+                getViewForItemAt(index: number): android.widget.LinearLayout;
             }
 
             export class TabItemSpec {

ui/styling/stylers.android.ts

@@ -8,6 +8,7 @@ import utils = require("utils/utils");
 import styleModule = require("./style");
 import font = require("ui/styling/font");
 import background = require("ui/styling/background");
+import tabView = require("ui/tab-view");
 var btn;
 
 global.moduleMerge(stylersCommon, exports);
@@ -643,6 +644,51 @@ export class ActionBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class TabViewStyler implements definition.stylers.Styler {
+    // color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var tab = <tabView.TabView>view;
+        var count = tab.items ? tab.items.length : 0;
+        var tabLayout = tab._getAndroidTabView();
+
+        for (var i = 0; i < count; i++) {
+            tabLayout.getTextViewForItemAt(i).setTextColor(newValue);
+        }
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        if (types.isNullOrUndefined(nativeValue)) {
+            return;
+        }
+
+        var tab = <tabView.TabView>view;
+        var count = tab.items ? tab.items.length : 0;
+        var tabLayout = tab._getAndroidTabView();
+
+        for (var i = 0; i < count; i++) {
+            tabLayout.getTextViewForItemAt(i).setTextColor(nativeValue);
+        }
+    }
+
+    private static getColorProperty(view: view.View): any {
+        var tab = <tabView.TabView>view;
+        var tv: android.widget.TextView = tab._getAndroidTabView().getTextViewForItemAt(0);
+        if (tv) {
+            return tv.getTextColors().getDefaultColor();
+        }
+        else {
+            return null;
+        }
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            TabViewStyler.setColorProperty,
+            TabViewStyler.resetColorProperty,
+            TabViewStyler.getColorProperty), "TabView");
+    }
+}
+
 // Register all styler at the end.
 export function _registerDefaultStylers() {
     style.registerNoStylingClass("Frame");
@@ -653,4 +699,5 @@ export function _registerDefaultStylers() {
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
     ActionBarStyler.registerHandlers();
+    TabViewStyler.registerHandlers();
 }

ui/styling/stylers.ios.ts

@@ -6,6 +6,7 @@ import enums = require("ui/enums");
 import font = require("ui/styling/font");
 import background = require("ui/styling/background");
 import frame = require("ui/frame");
+import tabView = require("ui/tab-view");
 
 global.moduleMerge(stylersCommon, exports);
 
@@ -500,6 +501,25 @@ export class ActionBarStyler implements definition.stylers.Styler {
     }
 }
 
+export class TabViewStyler implements definition.stylers.Styler {
+    // color
+    private static setColorProperty(view: view.View, newValue: any) {
+        var tab = <tabView.TabView>view;
+        tab._updateIOSTabBarColors();
+    }
+
+    private static resetColorProperty(view: view.View, nativeValue: any) {
+        var tab = <tabView.TabView>view;
+        tab._updateIOSTabBarColors();
+    }
+
+    public static registerHandlers() {
+        style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
+            TabViewStyler.setColorProperty,
+            TabViewStyler.resetColorProperty), "TabView");
+    }
+}
+
 function setTextAlignment(view: TextUIView, value: string) {
     switch (value) {
         case enums.TextAlignment.left:
@@ -526,4 +546,5 @@ export function _registerDefaultStylers() {
     SegmentedBarStyler.registerHandlers();
     SearchBarStyler.registerHandlers();
     ActionBarStyler.registerHandlers();
+    TabViewStyler.registerHandlers();
 }

ui/tab-view/tab-view-common.ts

@@ -5,6 +5,7 @@ import proxy = require("ui/core/proxy");
 import types = require("utils/types");
 import trace = require("trace");
 import bindable = require("ui/core/bindable");
+import color = require("color");
 
 export var traceCategory = "TabView";
 
@@ -56,6 +57,7 @@ export class TabViewItem extends bindable.Bindable implements definition.TabView
 var TAB_VIEW = "TabView";
 var ITEMS = "items";
 var SELECTED_INDEX = "selectedIndex";
+var SELECTED_COLOR = "selectedColor";
 
 export module knownCollections {
     export var items = "items";
@@ -74,6 +76,13 @@ var selectedIndexProperty = new dependencyObservable.Property(
         undefined,
         dependencyObservable.PropertyMetadataSettings.AffectsLayout));
 
+var selectedColorProperty = new dependencyObservable.Property(
+    SELECTED_COLOR,
+    TAB_VIEW,
+    new proxy.PropertyMetadata(
+        undefined,
+        dependencyObservable.PropertyMetadataSettings.None));
+
 (<proxy.PropertyMetadata>selectedIndexProperty.metadata).onSetNativeValue = function (data: dependencyObservable.PropertyChangeData) {
     var tabView = <TabView>data.object;
     tabView._onSelectedIndexPropertyChangedSetNativeValue(data);
@@ -87,6 +96,7 @@ var selectedIndexProperty = new dependencyObservable.Property(
 export class TabView extends view.View implements definition.TabView, view.AddArrayFromBuilder {
     public static itemsProperty = itemsProperty;
     public static selectedIndexProperty = selectedIndexProperty;
+    public static selectedColorProperty = selectedColorProperty;
     public static selectedIndexChangedEvent = "selectedIndexChanged";
 
     public _addArrayFromBuilder(name: string, value: Array<any>) {
@@ -159,6 +169,14 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
         this._setValue(TabView.selectedIndexProperty, value);
     }
 
+    get selectedColor(): color.Color {
+        return this._getValue(TabView.selectedColorProperty);
+    }
+    set selectedColor(value: color.Color) {
+        this._setValue(TabView.selectedColorProperty,
+            value instanceof color.Color ? value : new color.Color(<any>value));
+    }
+
     public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
         var index = this.selectedIndex;
         if (types.isUndefined(index)) {
@@ -233,4 +251,13 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
             }    
         }
     }
+    
+    public _getAndroidTabView(): org.nativescript.widgets.TabLayout {
+        // Android specific
+        return undefined;
+    }
+
+    public _updateIOSTabBarColors() {
+        // iOS sepcific
+    }
 } 

ui/tab-view/tab-view.android.ts

@@ -6,6 +6,8 @@ import trace = require("trace");
 import types = require("utils/types");
 import utils = require("utils/utils");
 import imageSource = require("image-source");
+import proxy = require("ui/core/proxy");
+import color = require("color");
 
 var VIEWS_STATES = "_viewStates";
 var ACCENT_COLOR = "colorAccent";
@@ -140,6 +142,14 @@ class PageChangedListener extends android.support.v4.view.ViewPager.SimpleOnPage
     }
 }
 
+function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var tabLayout = (<TabView>data.object)._getAndroidTabView();
+    if (tabLayout && data.newValue instanceof color.Color) {
+        tabLayout.setSelectedIndicatorColors([data.newValue.android]);
+    }
+}
+(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
+
 export class TabView extends common.TabView {
     private _grid: org.nativescript.widgets.GridLayout;
     private _tabLayout: org.nativescript.widgets.TabLayout;
@@ -278,4 +288,8 @@ export class TabView extends common.TabView {
 
         return result;
     }
+
+    public _getAndroidTabView(): org.nativescript.widgets.TabLayout {
+        return this._tabLayout;
+    }
 }

ui/tab-view/tab-view.d.ts

@@ -6,6 +6,7 @@ declare module "ui/tab-view" {
     import dependencyObservable = require("ui/core/dependency-observable");
     import observable = require("data/observable");
     import bindable = require("ui/core/bindable");
+    import color = require("color");
 
     /**
      * Represents a tab view entry.
@@ -48,6 +49,7 @@ declare module "ui/tab-view" {
     class TabView extends view.View {
         public static itemsProperty: dependencyObservable.Property;
         public static selectedIndexProperty: dependencyObservable.Property;
+        public static selectedColorProperty: dependencyObservable.Property;
 
         /**
          * Gets or sets the items of the TabView.
@@ -59,6 +61,11 @@ declare module "ui/tab-view" {
          */
         selectedIndex: number;
 
+        /**
+         * Gets or sets the color used for selected item.
+         */
+        selectedColor: color.Color;
+
         /**
          * Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
          */
@@ -86,5 +93,10 @@ declare module "ui/tab-view" {
          * Raised when the selected index changes.
          */
         on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
+
+        //@private
+        _getAndroidTabView(): org.nativescript.widgets.TabLayout;
+        _updateIOSTabBarColors();
+        //@endprivate
     }
 }

ui/tab-view/tab-view.ios.ts

@@ -7,6 +7,8 @@ import uiUtils = require("ui/utils");
 import view = require("ui/core/view");
 import imageSource = require("image-source");
 import types = require("utils/types");
+import proxy = require("ui/core/proxy");
+import color = require("color");
 
 global.moduleMerge(common, exports);
 
@@ -89,11 +91,21 @@ export class TabViewItem extends common.TabViewItem {
                     (<any>tabBarItem).titlePositionAdjustment = { horizontal: 0, vertical: -20 };
                 }
             }
+
+            var states = getTitleAttributesForStates(this._parent);
+            tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
+            tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
             this._controller.tabBarItem = tabBarItem;
         }
     }
 }
 
+function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var tabView = <TabView>data.object;
+    tabView._updateIOSTabBarColors();
+}
+(<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
+
 export class TabView extends common.TabView {
     private _ios: UITabBarControllerImpl;
     private _delegate: UITabBarControllerDelegateImpl;
@@ -124,7 +136,7 @@ export class TabView extends common.TabView {
         super.onUnloaded();
     }
 
-    get ios(): UIViewController {
+    get ios(): UITabBarController {
         return this._ios;
     }
 
@@ -295,4 +307,39 @@ export class TabView extends common.TabView {
             (widthMode === utils.layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : width,
             (heightMode === utils.layout.UNSPECIFIED) ? Number.POSITIVE_INFINITY : height));
     }
+
+    public _updateIOSTabBarColors() {
+        if (!this.items) {
+            return;
+        }
+
+        var tabBar = this.ios.tabBar;
+        var states = getTitleAttributesForStates(this);
+
+        for (var i = 0; i < this.items.length; i++) {
+            var item = <UITabBarItem>tabBar.items[i];
+            item.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
+            item.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
+        }
+    }
+}
+
+function getTitleAttributesForStates(tabView: TabView): { normalState: any, selectedState: any } {
+    var normalState = <any>{};
+    if (tabView.color instanceof color.Color) {
+        normalState[UITextAttributeTextColor] = tabView.color.ios;
+    }
+
+    var selectedState = <any>{};
+    if (tabView.selectedColor instanceof color.Color) {
+        selectedState[UITextAttributeTextColor] = tabView.selectedColor.ios;
+    }
+    else {
+        selectedState[UITextAttributeTextColor] = tabView.ios.tabBar.tintColor;
+    }
+
+    return {
+        normalState: normalState,
+        selectedState: selectedState
+    };
 }