Merge pull request #999 from NativeScript/feature/action-tab-colors

Feature/action tab colors

CrossPlatformModules.csproj

@@ -189,7 +189,39 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\tests\pages\tab-view.xml" />
+    <Content Include="apps\ui-tests-app\segmented-bar\all.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\action-bar\all.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\action-bar\clean.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\background.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\all.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\tabsBackground.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\selected.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\tab-view\color.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\action-bar\background.xml">
+      <SubType>Designer</SubType>
+    </Content>
+    <Content Include="apps\ui-tests-app\action-bar\color.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\app.css" />
+    <TypeScriptCompile Include="apps\ui-tests-app\action-bar\all.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\action-bar\color.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\nordic\nordic.ts">
       <DependentUpon>nordic.xml</DependentUpon>
     </TypeScriptCompile>
@@ -995,6 +1027,9 @@
     <Content Include="apps\ui-tests-app\layouts\wrap.xml" />
     <Content Include="apps\ui-tests-app\css\background.xml" />
     <Content Include="apps\ui-tests-app\image-view\roundbtn.xml" />
+    <Content Include="apps\ui-tests-app\mainPage.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\nordic\nordic.xml" />
     <Content Include="apps\ui-tests-app\pages\handlers.xml" />
     <Content Include="apps\ui-tests-app\pages\htmlview.xml" />

apps/ui-tests-app/action-bar/all.ts

@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("action-bar/clean");
+}

apps/ui-tests-app/action-bar/all.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: blue; color: yellow;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/background.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="background-color: green;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/clean.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/color.ts

@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("action-bar/clean");
+}

apps/ui-tests-app/action-bar/color.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title" style="color: green;">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/mainPage.ts

@@ -1,48 +1,91 @@
 import button = require("ui/button");
-import dialogs = require("ui/dialogs");
 import frame = require("ui/frame");
 import gridModule = require("ui/layouts/grid-layout");
 import pages = require("ui/page");
 import text = require("ui/text-view");
 import fs = require("file-system");
 import trace = require("trace");
+import observable = require("data/observable");
+import view = require("ui/core/view");
+import dialogs = require("ui/dialogs");
 
 trace.enable();
 trace.setCategories(trace.categories.Test);
 
-var list: string[] = ["pages", "bindings", "css", "dialogs", "image-view", "layouts", "modal-view", "nordic", "web-view"];
-
-// basePath is auto-changed when building multiple apps
 var basePath = "";
-export function createPage() {
+var VM = new observable.Observable();
-    var txtInput = new text.TextView();
+var examples = new Map<string, string>();
-    var btn = new button.Button();
-    btn.text = "Run";
-    btn.on(button.Button.tapEvent, function () {
-        var filePath, fileName, i = 0;
-        while (i < list.length) {
-            filePath = fs.path.join(__dirname, list[i], txtInput.text);
-            if ((fs.File.exists(filePath + ".xml") || (fs.File.exists(filePath + ".js")))) {
-                fileName = basePath + list[i] + "/" + txtInput.text;
-                break;
-            }
-            i++;
-        }
-        if (i < list.length) {
-            frame.topmost().navigate(fileName);
-        } else {
-            dialogs.alert("Cannot find page: " + txtInput.text);
-        }
-    });
 
-    var grid = new gridModule.GridLayout();
+export function pageLoaded(args) {
-    grid.addRow(new gridModule.ItemSpec(1, gridModule.GridUnitType.auto));
+    var page = <pages.Page>args.object;
-    grid.addRow(new gridModule.ItemSpec());
+    page.bindingContext = VM;
-    gridModule.GridLayout.setRow(txtInput, 1);
-    grid.addChild(btn);
-    grid.addChild(txtInput);
 
-    var page = new pages.Page();
-    page.content = grid;
-    return page;
 }
+
+export function selectExample() {
+    var ex: string = VM.get("selected");
+    if (examples.has(ex)) {
+        frame.topmost().navigate(basePath + examples.get(ex));
+    }
+    else {
+        dialogs.alert("Cannot find example: " + ex);
+    }
+}
+
+examples.set("basics", "bindings/basics");
+
+examples.set("actColor", "action-bar/color");
+examples.set("actBG",   "action-bar/background");
+examples.set("actStyle", "action-bar/all");
+
+examples.set("tabColor", "tab-view/color");
+examples.set("tabBG", "tab-view/background");
+examples.set("tabTabsBG", "tab-view/tabsBackground");
+examples.set("tabSelected", "tab-view/selected");
+examples.set("tabStyle", "tab-view/all");
+
+examples.set("segmentedStyle", "segmented-bar/all");
+
+examples.set("basics", "bindings/basics");
+examples.set("xmlbasics", "bindings/xmlbasics");
+
+examples.set("background", "css/background");
+examples.set("import", "css/import");
+examples.set("radius", "css/radius");
+examples.set("styles", "css/styles");
+
+examples.set("dialogs", "dialogs/dialogs");
+examples.set("view-model", "dialogs/view-model");
+
+examples.set("roundbtn", "image-view/roundbtn");
+
+examples.set("absolute", "layouts/absolute");
+examples.set("dock", "layouts/dock");
+examples.set("grid", "layouts/grid");
+examples.set("myview", "layouts/myview");
+examples.set("stack", "layouts/stack");
+examples.set("wrap", "layouts/wrap");
+
+examples.set("login-page", "modal-view/login-page");
+examples.set("modalview", "modal-view/modalview");
+
+examples.set("nordic", "nordic/nordic");
+
+examples.set("text", "pages/text");
+examples.set("background", "pages/background");
+examples.set("console", "pages/console");
+examples.set("gestures", "pages/gestures");
+examples.set("handlers", "pages/handlers");
+examples.set("htmlview", "pages/htmlview");
+examples.set("i61", "pages/i61");
+examples.set("i73", "pages/i73");
+examples.set("i86", "pages/i86");
+examples.set("listview_binding", "pages/listview_binding");
+examples.set("switchandprogress", "pages/switchandprogress");
+examples.set("textfield", "pages/textfield");
+
+examples.set("webview", "web-view/webview");
+examples.set("webviewhtmlwithimages", "web-view/webviewhtmlwithimages");
+examples.set("webviewlocalfile", "web-view/webviewlocalfile");
+
+//VM.set("selected", "tabAll");

apps/ui-tests-app/mainPage.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+  <GridLayout rows="auto, *">
+    <Button text="Run" tap="selectExample" />
+    <TextView row="1" text="{{ selected }}"/>
+  </GridLayout>
+</Page>

apps/ui-tests-app/segmented-bar/all.xml

@@ -0,0 +1,10 @@
+<Page>
+  <GridLayout rows="auto, *">
+    <SegmentedBar style="color: green; background-color: yellow; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace;">
+      <SegmentedBar.items>
+        <SegmentedBarItem title="Item 1" />
+        <SegmentedBarItem title="Item 2" />
+      </SegmentedBar.items>
+    </SegmentedBar>
+  </GridLayout>
+</Page>

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

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="color: yellow; background-color: green;" selectedColor="red" tabsBackgroundColor="blue">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

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

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="background-color: green;">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

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

@@ -0,0 +1,20 @@
+<Page>
+  <TabView style="color: green;">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

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

@@ -0,0 +1,20 @@
+<Page>
+  <TabView selectedColor="green">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

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

@@ -0,0 +1,20 @@
+<Page>
+  <TabView tabsBackgroundColor="blue">
+    <TabView.items>
+      <TabViewItem title="First">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="First View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+      <TabViewItem title="Second">
+        <TabViewItem.view>
+          <GridLayout>
+            <Label text="Second View" verticalAlignment="center" horizontalAlignment="center"/>
+          </GridLayout>
+        </TabViewItem.view>
+      </TabViewItem>
+    </TabView.items>
+  </TabView>
+</Page>

ui/action-bar/action-bar.d.ts

@@ -203,4 +203,9 @@ declare module "ui/action-bar" {
     export class NavigationButton extends ActionItemBase {
 
     }
+
+    //@private
+    export function _setNavBarColor(navBar: UINavigationBar, color: UIColor);
+    export function _setNavBarBackgroundColor(navBar: UINavigationBar, color: UIColor);
+    //@endprivate
 }

ui/action-bar/action-bar.ios.ts

@@ -80,6 +80,9 @@ export class ActionBar extends common.ActionBar {
 
         // Populate action items
         this.populateMenuItems(navigationItem);
+
+        // update colors explicitly - they may have to be cleared form a previous page
+        this.updateColors(navigationBar);
     }
 
     private populateMenuItems(navigationItem: UINavigationItem) {
@@ -129,6 +132,21 @@ export class ActionBar extends common.ActionBar {
         return barButtonItem;
     }
 
+    private updateColors(navBar: UINavigationBar) {
+        var color = this.color;
+        if (color) {
+            navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: color.ios };
+            navBar.tintColor = color.ios;
+        }
+        else {
+            navBar.titleTextAttributes = null;
+            navBar.tintColor = null;
+        }
+
+        var bgColor = this.backgroundColor;
+        navBar.barTintColor = bgColor ? bgColor.ios : null;
+    }
+
     public _onTitlePropertyChanged() {
         if (!this.page) {
             return;

ui/styling/stylers.android.ts

@@ -766,6 +766,7 @@ export class ActionBarStyler implements definition.stylers.Styler {
     private static setColorProperty(view: view.View, newValue: any) {
         var toolbar = (<android.support.v7.widget.Toolbar>view._nativeView);
         toolbar.setTitleTextColor(newValue);
+        
     }
 
     private static resetColorProperty(view: view.View, nativeValue: any) {

ui/styling/stylers.ios.ts

@@ -16,6 +16,14 @@ interface TextUIView {
     textColor: UIColor;
 }
 
+var ignorePropertyHandler = new stylersCommon.StylePropertyChangedHandler(
+    (view, val) => {
+        // empty
+    },
+    (view, val) => {
+        // empty
+    });
+
 export class DefaultStyler implements definition.stylers.Styler {
     //Background methods
     private static setBackgroundInternalProperty(view: view.View, newValue: any) {
@@ -537,13 +545,13 @@ export class SwitchStyler implements definition.stylers.Styler {
             SwitchStyler.resetColorProperty,
             SwitchStyler.getNativeColorValue), "Switch");
 
-        var bkgHandler = new stylersCommon.StylePropertyChangedHandler(
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SwitchStyler.setBackgroundColorProperty,
             SwitchStyler.resetBackgroundColorProperty,
-            SwitchStyler.getBackgroundColorProperty);
+            SwitchStyler.getBackgroundColorProperty), "Switch");
 
-        style.registerHandler(style.backgroundColorProperty, bkgHandler, "Switch");
+        // Ignore the default backgroundInternalProperty handler
-        style.registerHandler(style.backgroundInternalProperty, bkgHandler, "Switch");
+        style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Switch");
     }
 }
 
@@ -634,16 +642,35 @@ export class ActionBarStyler implements definition.stylers.Styler {
     private static setColorProperty(view: view.View, newValue: any) {
         var topFrame = frame.topmost();
         if (topFrame) {
-            var bar = topFrame.ios.controller.navigationBar;
+            var navBar = topFrame.ios.controller.navigationBar;
-            (<any>bar).titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
+            navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: newValue };
+            navBar.tintColor = newValue;
         }
     }
 
     private static resetColorProperty(view: view.View, nativeValue: any) {
         var topFrame = frame.topmost();
         if (topFrame) {
-            var bar = topFrame.ios.controller.navigationBar;
+            var navBar = topFrame.ios.controller.navigationBar;
-            (<any>bar).titleTextAttributes = null;
+            navBar.titleTextAttributes = null;
+            navBar.tintColor = null;
+        }
+    }
+
+    // background-color
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var topFrame = frame.topmost();
+        if (topFrame) {
+            var navBar = topFrame.ios.controller.navigationBar;
+            navBar.barTintColor = newValue;
+        }
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var topFrame = frame.topmost();
+        if (topFrame) {
+            var navBar = topFrame.ios.controller.navigationBar;
+            navBar.barTintColor = null;
         }
     }
 
@@ -651,6 +678,12 @@ export class ActionBarStyler implements definition.stylers.Styler {
         style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
             ActionBarStyler.setColorProperty,
             ActionBarStyler.resetColorProperty), "ActionBar");
+
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            ActionBarStyler.setBackgroundColorProperty,
+            ActionBarStyler.resetBackgroundColorProperty), "ActionBar");
+
+        style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "ActionBar");
     }
 }
 

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

@@ -58,6 +58,7 @@ var TAB_VIEW = "TabView";
 var ITEMS = "items";
 var SELECTED_INDEX = "selectedIndex";
 var SELECTED_COLOR = "selectedColor";
+var TABS_BACKGROUND_COLOR = "tabsBackgroundColor";
 
 export module knownCollections {
     export var items = "items";
@@ -83,6 +84,13 @@ var selectedColorProperty = new dependencyObservable.Property(
         undefined,
         dependencyObservable.PropertyMetadataSettings.None));
 
+var tabsBackgroundColorProperty = new dependencyObservable.Property(
+    TABS_BACKGROUND_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);
@@ -97,6 +105,7 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
     public static itemsProperty = itemsProperty;
     public static selectedIndexProperty = selectedIndexProperty;
     public static selectedColorProperty = selectedColorProperty;
+    public static tabsBackgroundColorProperty = tabsBackgroundColorProperty;
     public static selectedIndexChangedEvent = "selectedIndexChanged";
 
     public _addArrayFromBuilder(name: string, value: Array<any>) {
@@ -177,6 +186,14 @@ export class TabView extends view.View implements definition.TabView, view.AddAr
             value instanceof color.Color ? value : new color.Color(<any>value));
     }
 
+    get tabsBackgroundColor(): color.Color {
+        return this._getValue(TabView.tabsBackgroundColorProperty);
+    }
+    set tabsBackgroundColor(value: color.Color) {
+        this._setValue(TabView.tabsBackgroundColorProperty,
+            value instanceof color.Color ? value : new color.Color(<any>value));
+    }
+
     public _onSelectedIndexPropertyChangedSetNativeValue(data: dependencyObservable.PropertyChangeData) {
         var index = this.selectedIndex;
         if (types.isUndefined(index)) {

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

@@ -150,6 +150,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
 }
 (<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
 
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var tabLayout = (<TabView>data.object)._getAndroidTabView();
+    if (tabLayout && data.newValue instanceof color.Color) {
+        tabLayout.setBackgroundColor(data.newValue.android);
+    }
+}
+(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
 export class TabView extends common.TabView {
     private _grid: org.nativescript.widgets.GridLayout;
     private _tabLayout: org.nativescript.widgets.TabLayout;

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

@@ -66,6 +66,11 @@ declare module "ui/tab-view" {
          */
         selectedColor: color.Color;
 
+        /**
+         * Gets or sets the color used for background of the tab items.
+         */
+        tabsBackgroundColor: 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.
          */

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

@@ -105,6 +105,14 @@ function selectedColorPropertyChanged(data: dependencyObservable.PropertyChangeD
 }
 (<proxy.PropertyMetadata>common.TabView.selectedColorProperty.metadata).onSetNativeValue = selectedColorPropertyChanged;
 
+function tabsBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var tabView = <TabView>data.object;
+    if (data.newValue instanceof color.Color) {
+        tabView.ios.tabBar.barTintColor = data.newValue.ios;
+    }
+}
+(<proxy.PropertyMetadata>common.TabView.tabsBackgroundColorProperty.metadata).onSetNativeValue = tabsBackgroundColorPropertyChanged;
+
 export class TabView extends common.TabView {
     private _ios: UITabBarControllerImpl;
     private _delegate: UITabBarControllerDelegateImpl;
@@ -179,6 +187,8 @@ export class TabView extends common.TabView {
         var newControllers: NSMutableArray = NSMutableArray.alloc().initWithCapacity(length);
         var newController: UIViewController;
 
+        var states = getTitleAttributesForStates(this);
+
         for (i = 0; i < length; i++) {
             item = <TabViewItem>newItems[i];
 
@@ -205,6 +215,9 @@ export class TabView extends common.TabView {
                     (<any>tabBarItem).titlePositionAdjustment = { horizontal: 0, vertical: -20 };
                 }
             }
+            tabBarItem.setTitleTextAttributesForState(states.normalState, UIControlState.UIControlStateNormal);
+            tabBarItem.setTitleTextAttributesForState(states.selectedState, UIControlState.UIControlStateSelected);
+
             newController.tabBarItem = tabBarItem;
             newControllers.addObject(newController);
         }
@@ -311,6 +324,8 @@ export class TabView extends common.TabView {
         }
 
         var tabBar = this.ios.tabBar;
+
+        tabBar.tintColor = this.selectedColor ? this.selectedColor.ios : null; 
         var states = getTitleAttributesForStates(this);
 
         for (var i = 0; i < this.items.length; i++) {