diff --git a/ui/action-bar/action-bar-common.ts b/ui/action-bar/action-bar-common.ts index 2aa77517d..49f2a4524 100644 --- a/ui/action-bar/action-bar-common.ts +++ b/ui/action-bar/action-bar-common.ts @@ -108,7 +108,14 @@ export class ActionBar extends view.View implements dts.ActionBar { } get _childrenCount(): number { - return this.titleView ? 1 : 0; + let actionViewsCount = 0; + this._actionItems.getItems().forEach((actionItem) => { + if (actionItem.actionView) { + actionViewsCount++; + } + }); + + return actionViewsCount + (this.titleView ? 1 : 0); } constructor() { @@ -157,6 +164,12 @@ export class ActionBar extends view.View implements dts.ActionBar { if (this.titleView) { callback(this.titleView); } + + this.actionItems.getItems().forEach((actionItem) => { + if (actionItem.actionView) { + callback(actionItem.actionView); + } + }); } public _isEmpty(): boolean { @@ -263,7 +276,29 @@ export class ActionItem extends bindable.Bindable implements dts.ActionItem { "visibility", "ActionItem", new dependencyObservable.PropertyMetadata(enums.Visibility.visible, null, ActionItem.onItemChanged)); private _actionBar: ActionBar; + private _actionView: view.View; + get actionView(): view.View { + return this._actionView; + } + set actionView(value: view.View) { + if (this._actionView !== value) { + ensureStyle(); + if (this._actionView && this._actionBar) { + this._actionBar._removeView(this._actionView); + this._actionView.style._resetValue(style.horizontalAlignmentProperty, dependencyObservable.ValueSource.Inherited); + this._actionView.style._resetValue(style.verticalAlignmentProperty, dependencyObservable.ValueSource.Inherited); + } + + this._actionView = value; + + this._addActionViewToActionBar(); + + if (this._actionBar) { + this._actionBar.update(); + } + } + } get text(): string { return this._getValue(ActionItem.textProperty); } @@ -297,6 +332,7 @@ export class ActionItem extends bindable.Bindable implements dts.ActionItem { this._actionBar = value; if (this._actionBar) { this.bindingContext = this._actionBar.bindingContext; + this._addActionViewToActionBar(); } } } @@ -318,6 +354,19 @@ export class ActionItem extends bindable.Bindable implements dts.ActionItem { menuItem.actionBar.update(); } } + + private _addActionViewToActionBar() { + if (this._actionView && !this._actionView._isAddedToNativeVisualTree && this._actionBar) { + ensureStyle(); + this._actionView.style._setValue(style.horizontalAlignmentProperty, enums.HorizontalAlignment.center, dependencyObservable.ValueSource.Inherited); + this._actionView.style._setValue(style.verticalAlignmentProperty, enums.VerticalAlignment.center, dependencyObservable.ValueSource.Inherited); + this._actionBar._addView(this._actionView); + } + } + + public _addChildFromBuilder(name: string, value: any) { + this.actionView = value; + } } export function isVisible(item: dts.ActionItem) { diff --git a/ui/action-bar/action-bar.android.ts b/ui/action-bar/action-bar.android.ts index ab6ac0c08..b2d72298a 100644 --- a/ui/action-bar/action-bar.android.ts +++ b/ui/action-bar/action-bar.android.ts @@ -266,7 +266,17 @@ export class ActionBar extends common.ActionBar { var item = items[i]; var menuItem = menu.add(android.view.Menu.NONE, item._getItemId(), android.view.Menu.NONE, item.text + ""); - if (item.android.systemIcon) { + if (item.actionView && item.actionView.android) { + menuItem.setActionView(item.actionView.android); + // Note: When using a custom action view the toolbar's MenuItemClickListener is not triggered! + menuItem.getActionView().setOnClickListener(new android.view.View.OnClickListener({ + onClick: + function () { + item._raiseTap(); + } + })); + } + else if (item.android.systemIcon) { // Try to look in the system resources. let systemResourceId = getSystemResourceId(item.android.systemIcon); if (systemResourceId) { diff --git a/ui/action-bar/action-bar.d.ts b/ui/action-bar/action-bar.d.ts index 208267b61..3a559f7fb 100644 --- a/ui/action-bar/action-bar.d.ts +++ b/ui/action-bar/action-bar.d.ts @@ -117,6 +117,11 @@ declare module "ui/action-bar" { * Gets or sets the icon of the action item. */ icon: string; + + /** + * Gets or sets the custom action view of the action item. + */ + actionView: view.View; /** * Gets or sets the visibility of the action item.