javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 03:01:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1554 from PeterStaev/action-item-custom-view

Browse Source 
Action item custom view
This commit is contained in:
Vladimir Enchev
2016-02-16 17:08:17 +02:00
parent 46647bf8cd ea1ebd2c94
commit d66008d34c
10 changed files with 185 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
ui/action-bar/action-bar-common.ts
View File

@ -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) {

15
ui/action-bar/action-bar.android.ts
View File

@ -266,7 +266,20 @@ export class ActionBar extends common.ActionBar {
var item = <ActionItem>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) {
// With custom action view, the menuitem cannot be displayed in a popup menu.
item.android.position = enums.AndroidActionItemPosition.actionBar;
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) {

5
ui/action-bar/action-bar.d.ts vendored
View File

@ -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.

33
ui/action-bar/action-bar.ios.ts
View File

@ -134,7 +134,17 @@ export class ActionBar extends common.ActionBar {
var barButtonItem: UIBarButtonItem;
if (types.isNumber(item.ios.systemIcon)) {
if (item.actionView && item.actionView.ios) {
let buttonView: UIButton = UIButton.buttonWithType(UIButtonType.UIButtonTypeSystem);
// Disable the interaction of the custom view so that the tap event of the button is triggered
(<UIView>item.actionView.ios).userInteractionEnabled = false;
buttonView.addTargetActionForControlEvents(tapHandler, "tap", UIControlEvents.UIControlEventTouchUpInside);
buttonView.frame = CGRectMake(0, 0, item.actionView.getMeasuredWidth(), item.actionView.getMeasuredHeight());
buttonView.addSubview(item.actionView.ios);
barButtonItem = UIBarButtonItem.alloc().initWithCustomView(buttonView);
}
else if (types.isNumber(item.ios.systemIcon)) {
barButtonItem = UIBarButtonItem.alloc().initWithBarButtonSystemItemTargetAction(item.ios.systemIcon, tapHandler, "tap");
}
else if (item.icon) {
@ -212,12 +222,33 @@ export class ActionBar extends common.ActionBar {
utils.layout.makeMeasureSpec(navBarHeight, utils.layout.AT_MOST));
}
this.actionItems.getItems().forEach((actionItem) => {
if (actionItem.actionView) {
view.View.measureChild(this, actionItem.actionView,
utils.layout.makeMeasureSpec(width, utils.layout.AT_MOST),
utils.layout.makeMeasureSpec(navBarHeight, utils.layout.AT_MOST));
}
});
// We ignore our width/height, minWidth/minHeight dimensions because it is against Apple policy to change height of NavigationBar.
this.setMeasuredDimension(navBarWidth, navBarHeight);
}
public onLayout(left: number, top: number, right: number, bottom: number) {
view.View.layoutChild(this, this.titleView, 0, 0, right - left, this._navigationBarHeight);
this.actionItems.getItems().forEach((actionItem) => {
if (actionItem.actionView && actionItem.actionView.ios) {
let measuredWidth = actionItem.actionView.getMeasuredWidth();
let measuredHeight = actionItem.actionView.getMeasuredHeight();
let buttonView = (<UIView>actionItem.actionView.ios).superview;
view.View.layoutChild(this, actionItem.actionView, 0, 0, measuredWidth, measuredHeight);
if (buttonView) {
buttonView.frame = CGRectMake(0, 0, measuredWidth, measuredHeight);
}
}
});
super.onLayout(left, top, right, bottom);
}