diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj
index 800e0ad0a..a1551a6ca 100644
--- a/CrossPlatformModules.csproj
+++ b/CrossPlatformModules.csproj
@@ -61,6 +61,9 @@
+
+
+
@@ -70,6 +73,9 @@
main-page.xml
+
+
+
@@ -1722,7 +1728,7 @@
False
-
+
\ No newline at end of file
diff --git a/apps/action-bar-demo/main-page.xml b/apps/action-bar-demo/main-page.xml
index 9246e5bd6..a4600175b 100644
--- a/apps/action-bar-demo/main-page.xml
+++ b/apps/action-bar-demo/main-page.xml
@@ -7,6 +7,9 @@
+
+
+
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-segmented.ts b/apps/action-bar-demo/pages/center-view-segmented.ts
new file mode 100644
index 000000000..b0e39a583
--- /dev/null
+++ b/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 = args.object;
+ var vm = new observable.Observable();
+ page.bindingContext = vm;
+}
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-segmented.xml b/apps/action-bar-demo/pages/center-view-segmented.xml
new file mode 100644
index 000000000..72a39296b
--- /dev/null
+++ b/apps/action-bar-demo/pages/center-view-segmented.xml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-stack.ts b/apps/action-bar-demo/pages/center-view-stack.ts
new file mode 100644
index 000000000..b0e39a583
--- /dev/null
+++ b/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 = args.object;
+ var vm = new observable.Observable();
+ page.bindingContext = vm;
+}
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view-stack.xml b/apps/action-bar-demo/pages/center-view-stack.xml
new file mode 100644
index 000000000..3fe21f12e
--- /dev/null
+++ b/apps/action-bar-demo/pages/center-view-stack.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view.ts b/apps/action-bar-demo/pages/center-view.ts
new file mode 100644
index 000000000..587c6adc4
--- /dev/null
+++ b/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 = args.object;
+ var vm = new observable.Observable();
+ vm.set("centerText", "center text");
+ vm.set("centerTap", function () {
+ console.log("Center view tapped!");
+ });
+ page.bindingContext = vm;
+}
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/center-view.xml b/apps/action-bar-demo/pages/center-view.xml
new file mode 100644
index 000000000..b1fa52122
--- /dev/null
+++ b/apps/action-bar-demo/pages/center-view.xml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/action-bar-demo/pages/page-title-icon.ts b/apps/action-bar-demo/pages/page-title-icon.ts
index 0605e6f50..ba77f0153 100644
--- a/apps/action-bar-demo/pages/page-title-icon.ts
+++ b/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 = view.getAncestor(args.object, "Page")
diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts
index 586f69100..5eb977737 100644
--- a/ui/action-bar/action-bar-common.ts
+++ b/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 ||
diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts
index 52dad6d48..b2978a900 100644
--- a/ui/action-bar/action-bar.android.ts
+++ b/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,13 +101,25 @@ export class ActionBar extends common.ActionBar {
actionBar.setDisplayShowHomeEnabled(visibility);
}
- public _updateTitle(actionBar: android.app.ActionBar) {
- var title = this.title;
- if (types.isDefined(title)) {
- actionBar.setTitle(title);
- } else {
- var defaultLabel = application.android.nativeApp.getApplicationInfo().labelRes;
- actionBar.setTitle(defaultLabel);
+ 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);
+ } else {
+ var defaultLabel = application.android.nativeApp.getApplicationInfo().labelRes;
+ actionBar.setTitle(defaultLabel);
+ }
}
}
@@ -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);
}
}
diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts
index d877c8bca..4745d7ca4 100644
--- a/ui/action-bar/action-bar.d.ts
+++ b/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;
diff --git a/ui/action-bar/action-bar.ios.ts b/ui/action-bar/action-bar.ios.ts
index 1eb88fd8e..2175ba740 100644
--- a/ui/action-bar/action-bar.ios.ts
+++ b/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 = (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 {
diff --git a/ui/core/view.ios.ts b/ui/core/view.ios.ts
index 586e4c123..b8051da5b 100644
--- a/ui/core/view.ios.ts
+++ b/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.
diff --git a/ui/page/page-common.ts b/ui/page/page-common.ts
index a4ac991db..4a53bd854 100644
--- a/ui/page/page-common.ts
+++ b/ui/page/page-common.ts
@@ -124,7 +124,7 @@ export class Page extends contentView.ContentView implements dts.Page {
cssFileName = fs.path.join(fs.knownFolders.currentApp().path, cssFileName.replace("~/", ""));
}
if (!this._cssFiles[cssFileName]) {
- if (fs.File.exists(cssFileName)) {
+ if (fs.File.exists(cssFileName)) {
new fileSystemAccess.FileSystemAccess().readText(cssFileName, r => {
this._addCssInternal(r, cssFileName);
this._cssFiles[cssFileName] = true;
@@ -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;
diff --git a/ui/page/page.ios.ts b/ui/page/page.ios.ts
index ea21da5ff..255ac6779 100644
--- a/ui/page/page.ios.ts
+++ b/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);
+ }
}
diff --git a/ui/styling/background.ios.ts b/ui/styling/background.ios.ts
index dc973e620..ec3e59fa2 100644
--- a/ui/styling/background.ios.ts
+++ b/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 = view.style._getValue(style.backgroundInternalProperty);
var frame = (view._nativeView).frame;
var boundsWidth = frame.size.width;