javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-26 20:00:16 +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

6
CrossPlatformModules.csproj
View File

@ -220,6 +220,9 @@
<SubType>Designer</SubType>
</Content>
<Content Include="apps\tests\pages\tab-view.xml" />
<Content Include="apps\ui-tests-app\action-bar\action-view.xml">
<SubType>Designer</SubType>
</Content>
<Content Include="apps\ui-tests-app\action-bar\system-icons.xml">
<SubType>Designer</SubType>
</Content>
@ -253,6 +256,9 @@
<SubType>Designer</SubType>
</Content>
<TypeScriptCompile Include="apps\ui-tests-app\animations\background.ts" />
<TypeScriptCompile Include="apps\ui-tests-app\action-bar\action-view.ts">
<DependentUpon>action-view.xml</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="apps\ui-tests-app\pages\touch-event.ts" />
<Content Include="apps\ui-tests-app\pages\touch-event.xml">
<SubType>Designer</SubType>

52
apps/tests/ui/action-bar/action-bar-tests-common.ts
View File

@ -118,6 +118,27 @@ import actionBarModule = require("ui/action-bar");
//The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example.
//For a full list of Android drawable names, please visit http://androiddrawables.com
//
// ## Displaying Custom View in Action Items
//```XML
// <Page>
// <Page.actionBar>
// <ActionBar>
// <ActionBar.actionItems>
// <ActionItem>
// <ActionItem.actionView>
// <StackLayout orientation="horizontal">
// <Label text="Green" color="green"/>
// <Label text="Red" color="red"/>
// </StackLayout>
// </ActionItem.actionView>
// </ActionItem>
// </ActionBar.actionItems>
// </ActionBar>
// </Page.actionBar>
// ...
// </Page>
//```
//
// ## Setting Navigation Button
//```XML
// <Page>
@ -197,6 +218,37 @@ export function test_actionItem_page_property_inXML() {
TKUnit.assertEqual(actionItem.page, p, "actionItem.page");
};
export function test_actionItem_actionView_inXML() {
var p = <PageModule.Page>builder.parse(
"<Page> <Page.actionBar> <ActionBar> <ActionItem> <ActionItem.actionView>" +
"<Label/>" +
"</ActionItem.actionView> </ActionItem> </ActionBar> </Page.actionBar> </Page>");
var label = <LabelModule.Label>p.actionBar.actionItems.getItemAt(0).actionView;
TKUnit.assert(label instanceof LabelModule.Label, "ActionItem.actionView not loaded correctly");
};
export function test_actionItem_actionView_inherit_bindingContext_inXML() {
var p = <PageModule.Page>builder.parse(
"<Page> <Page.actionBar> <ActionBar> <ActionItem> <ActionItem.actionView>" +
"<Label text=\"{{ myProp }} \" />" +
"</ActionItem.actionView> </ActionItem> </ActionBar> </Page.actionBar> </Page>");
p.bindingContext = { myProp: "success" };
var label = <LabelModule.Label>p.actionBar.actionItems.getItemAt(0).actionView;
TKUnit.assert(label instanceof LabelModule.Label, "ActionItem.actionView not loaded correctly");
TKUnit.assertEqual(label.text, "success", "ActionItem.actionView");
};
export function test_ActionBar_is_not_empty_when_actionItem_actionView_is_set() {
var p = <PageModule.Page>builder.parse(
"<Page> <Page.actionBar> <ActionBar> <ActionItem> <ActionItem.actionView>" +
"<Label text=\"test\" />" +
"</ActionItem.actionView> </ActionItem> </ActionBar> </Page.actionBar> </Page>");
TKUnit.assertFalse(p.actionBar._isEmpty(), "ActionItem.actionView is set but ActionBar reports empty");
};
export function test_navigationButton_inherit_bindingContext_inXML() {
var p = <PageModule.Page>builder.parse(
"<Page> <Page.actionBar> <ActionBar>" +

5
apps/ui-tests-app/action-bar/action-view.ts Normal file
View File

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

19
apps/ui-tests-app/action-bar/action-view.xml Normal file
View File

@ -0,0 +1,19 @@
<Page>
<Page.actionBar>
<ActionBar>
<ActionBar.actionItems>
<ActionItem>
<ActionItem.actionView>
<StackLayout orientation="horizontal">
<Label text="Green" color="green"/>
<Label text="Red" color="red"/>
</StackLayout>
</ActionItem.actionView>
</ActionItem>
</ActionBar.actionItems>
</ActionBar>
</Page.actionBar>
<StackLayout>
<Button text="go to cleared page" tap="navigate"/>
</StackLayout>
</Page>

1
apps/ui-tests-app/mainPage.ts
View File

@ -36,6 +36,7 @@ examples.set("actColor", "action-bar/color");
examples.set("actBG", "action-bar/background");
examples.set("actStyle", "action-bar/all");
examples.set("actIcons", "action-bar/system-icons");
examples.set("actView", "action-bar/action-view");
examples.set("basics", "bindings/basics");
examples.set("xmlbasics", "bindings/xmlbasics");

1
tsconfig.json
View File

@ -344,6 +344,7 @@
"apps/ui-tests-app/action-bar/clean.ts",
"apps/ui-tests-app/action-bar/color.ts",
"apps/ui-tests-app/action-bar/system-icons.ts",
"apps/ui-tests-app/action-bar/action-view.ts",
"apps/ui-tests-app/animations/background.ts",
"apps/ui-tests-app/app.ts",
"apps/ui-tests-app/bindings/basics.ts",

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

@ -118,6 +118,11 @@ declare module "ui/action-bar" {
*/
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);
}