Center View

CrossPlatformModules.csproj

@@ -61,6 +61,9 @@
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
   <ItemGroup>
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-stack.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view-segmented.ts" />
+    <TypeScriptCompile Include="apps\action-bar-demo\pages\center-view.ts" />
     <TypeScriptCompile Include="apps\action-bar-demo\pages\data-binding.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\app.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\details-page.ts">
@@ -70,6 +73,9 @@
       <DependentUpon>main-page.xml</DependentUpon>
     </TypeScriptCompile>
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-app-view-model.ts" />
+    <Content Include="apps\action-bar-demo\pages\center-view-stack.xml" />
+    <Content Include="apps\action-bar-demo\pages\center-view-segmented.xml" />
+    <Content Include="apps\action-bar-demo\pages\center-view.xml" />
     <Content Include="apps\action-bar-demo\pages\data-binding.xml" />
     <Content Include="apps\cuteness.unoptimized\reddit-item-view-model.ts" />
     <TypeScriptCompile Include="apps\cuteness.unoptimized\reddit-model.d.ts" />
@@ -1722,7 +1728,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
 </Project>

apps/action-bar-demo/main-page.xml

@@ -7,6 +7,9 @@
       <Button tap="itemTap" text="action items icons" tag="action-items-icon" />
       <Button tap="itemTap" text="action items text" tag="action-items-text" />
       <Button tap="itemTap" text="data binding" tag="data-binding" />
+      <Button tap="itemTap" text="center view" tag="center-view" />
+      <Button tap="itemTap" text="center segmented" tag="center-view-segmented" />
+      <Button tap="itemTap" text="center stack" tag="center-view-stack" />
     </StackLayout>
   </ScrollView>
 </Page>

apps/action-bar-demo/pages/center-view-segmented.ts

@@ -0,0 +1,8 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    page.bindingContext = vm;
+}

apps/action-bar-demo/pages/center-view-segmented.xml

@@ -0,0 +1,18 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.centerView>
+        <SegmentedBar selectedIndex="{{ index }}">
+          <SegmentedBar.items>
+            <SegmentedBarItem title="Item 1" />
+            <SegmentedBarItem title="Item 2" />
+            <SegmentedBarItem title="Item 3" />
+          </SegmentedBar.items>
+        </SegmentedBar>
+      </ActionBar.centerView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="{{ index }}" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/center-view-stack.ts

@@ -0,0 +1,8 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    page.bindingContext = vm;
+}

apps/action-bar-demo/pages/center-view-stack.xml

@@ -0,0 +1,16 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.centerView>
+        <StackLayout orientation="horizontal" verticalAlignment="center" horizontalAlignment="center">
+          <Button text="1st" />
+          <Button text="2nd" />
+          <Button text="3rd" />
+        </StackLayout>
+      </ActionBar.centerView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothong" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/center-view.ts

@@ -0,0 +1,12 @@
+import observable = require("data/observable");
+import pages = require("ui/page");
+
+export function pageLoaded(args) {
+    var page = <pages.Page>args.object;
+    var vm = new observable.Observable();
+    vm.set("centerText", "center text");
+    vm.set("centerTap", function () {
+        console.log("Center view tapped!");
+    });
+    page.bindingContext = vm;
+}

apps/action-bar-demo/pages/center-view.xml

@@ -0,0 +1,12 @@
+<Page loaded="pageLoaded">
+  <Page.actionBar>
+    <ActionBar title="Title">
+      <ActionBar.centerView>
+        <Button text="{{ centerText }}" tap="{{ centerTap }}" />
+      </ActionBar.centerView>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing" />
+  </StackLayout>
+</Page>

apps/action-bar-demo/pages/page-title-icon.ts

@@ -18,7 +18,6 @@ export function buttonTap(args: observable.EventData) {
     }
 }
 
-
 var j = 0;
 export function visibilityTap(args: observable.EventData) {
     var page = <pages.Page>view.getAncestor(<view.View>args.object, "Page")

ui/action-bar/action-bar-common.ts

@@ -4,6 +4,9 @@ import bindable = require("ui/core/bindable");
 import dependencyObservable = require("ui/core/dependency-observable");
 import enums = require("ui/enums");
 import proxy = require("ui/core/proxy");
+import view = require("ui/core/view");
+import style = require("ui/styling/style");
+import observable = require("ui/core/dependency-observable");
 
 var ACTION_ITEMS = "actionItems";
 
@@ -21,7 +24,7 @@ function onIconPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     actionBar._onIconPropertyChanged();
 }
 
-export class ActionBar extends bindable.Bindable implements dts.ActionBar {
+export class ActionBar extends view.View implements dts.ActionBar {
     public static titleProperty = new dependencyObservable.Property("title", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onTitlePropertyChanged));
     public static iconProperty = new dependencyObservable.Property("icon", "ActionBar", new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
     public static androidIconVisibilityProperty = new dependencyObservable.Property("androidIconVisibility", "ActionBar", new proxy.PropertyMetadata("auto", dependencyObservable.PropertyMetadataSettings.None, onIconPropertyChanged));
@@ -29,6 +32,7 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
     private _actionItems: ActionItems;
     private _navigationButton: NavigationButton;
     private _page: pages.Page;
+    private _centerView: view.View;
 
     get title(): string {
         return this._getValue(ActionBar.titleProperty);
@@ -77,6 +81,29 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         throw new Error("actionItems property is read-only");
     }
 
+    get centerView(): view.View {
+        return this._centerView;
+    }
+    set centerView(value: view.View) {
+        if (this._centerView !== value) {
+            if (this._centerView) {
+                this._removeView(this._centerView);
+                this._centerView.style._resetValue(style.horizontalAlignmentProperty, observable.ValueSource.Inherited);
+                this._centerView.style._resetValue(style.verticalAlignmentProperty, observable.ValueSource.Inherited);
+            }
+
+            this._centerView = value;
+            
+            if (this._centerView) {
+                this._centerView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, observable.ValueSource.Inherited);
+                this._centerView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, observable.ValueSource.Inherited);
+                this._addView(this._centerView);
+            }
+            
+            this.updateActionBar();
+        }
+    }
+
     get page(): pages.Page {
         return this._page;
     }
@@ -90,6 +117,10 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         }, this._page);
     }
 
+    get _childrenCount(): number {
+        return this.centerView ? 1 : 0;
+    }
+
     constructor() {
         super();
         this._actionItems = new ActionItems(this);
@@ -124,10 +155,13 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
     }
 
     public _addChildFromBuilder(name: string, value: any) {
-
         if (value instanceof NavigationButton) {
             this.navigationButton = value;
         }
+
+        if (value instanceof view.View) {
+            this.centerView = value;
+        }
     }
 
     public _onBindingContextChanged(oldValue: any, newValue: any) {
@@ -139,6 +173,12 @@ export class ActionBar extends bindable.Bindable implements dts.ActionBar {
         this._actionItems.getItems().forEach((item, i, arr) => { item.bindingContext = newValue; });
     }
 
+    public _eachChildView(callback: (child: view.View) => boolean) {
+        if (this.centerView) {
+            callback(this.centerView);
+        }
+    }
+
     public shouldShow(): boolean {
         if (this.title ||
             this.icon ||

ui/action-bar/action-bar.android.ts

@@ -51,14 +51,13 @@ export class ActionBar extends common.ActionBar {
         this._addActionItems(menu);
 
         // Set title
-        this._updateTitle(actionBar);
+        this._updateTitleAndCenterView(actionBar);
 
         // Set home icon
         this._updateIcon(actionBar);
 
         // Set navigation button
         this._updateNavigationButton(actionBar);
-
     }
 
     public _updateNavigationButton(actionBar: android.app.ActionBar) {
@@ -102,7 +101,18 @@ export class ActionBar extends common.ActionBar {
         actionBar.setDisplayShowHomeEnabled(visibility);
     }
 
-    public _updateTitle(actionBar: android.app.ActionBar) {
+    public _updateTitleAndCenterView(actionBar: android.app.ActionBar) {
+        if (this.centerView) {
+            actionBar.setCustomView(this.centerView.android);
+            actionBar.setDisplayShowCustomEnabled(true);
+            actionBar.setDisplayShowTitleEnabled(false);
+        }
+        else {
+            actionBar.setCustomView(null);
+            actionBar.setDisplayShowCustomEnabled(false);
+            actionBar.setDisplayShowTitleEnabled(true);
+
+            // No center view - show the title
             var title = this.title;
             if (types.isDefined(title)) {
                 actionBar.setTitle(title);
@@ -111,6 +121,7 @@ export class ActionBar extends common.ActionBar {
                 actionBar.setTitle(defaultLabel);
             }
         }
+    }
 
     public _addActionItems(menu: android.view.IMenu) {
         var items = this.actionItems.getItems();
@@ -119,7 +130,6 @@ export class ActionBar extends common.ActionBar {
             var item = items[i];
             var menuItem = menu.add(android.view.Menu.NONE, i + ACTION_ITEM_ID_OFFSET, android.view.Menu.NONE, item.text);
             if (item.icon) {
-
                 var drawableOrId = getDrawableOrResourceId(item.icon, this._appResources);
                 if (drawableOrId) {
                     menuItem.setIcon(drawableOrId);
@@ -133,7 +143,7 @@ export class ActionBar extends common.ActionBar {
 
     public _onTitlePropertyChanged() {
         if (frame.topmost().currentPage === this.page) {
-            this._updateTitle(frame.topmost().android.actionBar);
+            this._updateTitleAndCenterView(frame.topmost().android.actionBar);
         }
     }
 

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

@@ -4,14 +4,16 @@
     import dependencyObservable = require("ui/core/dependency-observable");
     import bindable = require("ui/core/bindable");
     import pages = require("ui/page");
+    import contentView = require("ui/content-view");
     
-    export class ActionBar extends bindable.Bindable implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
+    export class ActionBar extends view.View implements view.AddArrayFromBuilder, view.AddChildFromBuilder {
         title: string;
         icon: string;
         androidIconVisibility: string;
 
         navigationButton: NavigationButton;
         actionItems: ActionItems;
+        centerView: view.View;
 
         page: pages.Page;
 

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

@@ -3,6 +3,8 @@ import definition = require("ui/action-bar");
 import imageSource = require("image-source");
 import frameModule = require("ui/frame");
 import enums = require("ui/enums");
+import view = require("ui/core/view");
+import utils = require("utils/utils");
 
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -23,6 +25,11 @@ export class ActionBar extends common.ActionBar {
         // Set Title
         navigationItem.title = this.title;
 
+        if (this.centerView && this.centerView.ios) {
+            console.log("setting center view: " + this.centerView.ios);
+            navigationItem.titleView = this.centerView.ios;
+        }
+
         // Find previous ViewController in the navigation stack
         var indexOfViewController = navController.viewControllers.indexOfObject(viewController);
         if (indexOfViewController !== NSNotFound && indexOfViewController > 0) {
@@ -116,6 +123,33 @@ export class ActionBar extends common.ActionBar {
         var navigationItem: UINavigationItem = (<UIViewController>this.page.ios).navigationItem;
         navigationItem.title = this.title;
     }
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        if (this.centerView) {
+            var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
+
+            view.View.measureChild(this, this.centerView,
+                utils.layout.makeMeasureSpec(width, utils.layout.AT_MOST),
+                utils.layout.makeMeasureSpec(this.navigationBarHeight, utils.layout.AT_MOST));
+        }
+
+        this.setMeasuredDimension(0, 0);
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+    }
+
+    public onLayout(left: number, top: number, right: number, bottom: number) {
+        view.View.layoutChild(this, this.centerView, 0, 0, right - left, this.navigationBarHeight);
+        super.onLayout(left, top, right, bottom);
+    }
+
+    protected get navigationBarHeight(): number {
+        var navController = frameModule.topmost().ios.controller;
+        if(!navController){
+            return 0;
+        }
+        var navigationBar = navController.navigationBar;
+        return (navigationBar && !navController.navigationBarHidden) ? navigationBar.frame.size.height : 0;
+    }
 }
 
 class TapBarItemHandlerImpl extends NSObject {

ui/core/view.ios.ts

@@ -172,6 +172,10 @@ export class View extends viewCommon.View {
     }
 
     public layoutNativeView(left: number, top: number, right: number, bottom: number): void {
+        if (!this._nativeView) {
+            return;
+        }
+
         var frame = CGRectMake(left, top, right - left, bottom - top);
 
         // This is done because when rotated in iOS7 there is rotation applied on the first subview on the Window which is our frame.nativeView.view.

ui/page/page-common.ts

@@ -214,6 +214,12 @@ export class Page extends contentView.ContentView implements dts.Page {
         return this._styleScope;
     }
 
+    public _eachChildView(callback: (child: view.View) => boolean) {
+        super._eachChildView(callback);
+
+        callback(this.actionBar);
+    }
+
     private _applyCss() {
         if (this._cssApplied) {
             return;

ui/page/page.ios.ts

@@ -155,4 +155,14 @@ export class Page extends pageCommon.Page {
             this.requestLayout();
         }
     }
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number) {
+        viewModule.View.measureChild(this, this.actionBar, widthMeasureSpec, heightMeasureSpec);
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+    }
+
+    public onLayout(left: number, top: number, right: number, bottom: number) {
+        viewModule.View.layoutChild(this, this.actionBar, 0, 0, right - left, bottom - top);
+        super.onLayout(left, top, right, bottom);
+    }
 }

ui/styling/background.ios.ts

@@ -7,6 +7,10 @@ require("utils/module-merge").merge(common, exports);
 
 export module ios {
     export function createBackgroundUIColor(view: viewModule.View): UIColor {
+        if(!view._nativeView){
+            return null;
+        }
+        
         var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
         var frame = (<UIView>view._nativeView).frame;
         var boundsWidth = frame.size.width;