Ability to define a custom view in ActionItem

Add ability for ActionItem to have a custom view associated with it, instead of using predefined icon/text. For example something like:

<ActionBar title="Something">
  <ActionBar.actionItems>
    <ActionItem ios.position="right" tap="doneTap">
        <ActionItem.actionView>
            <StackLayout>
                <Label text="Label1" backgroundColor="red"/>
                <Label text="Label2" backgroundColor="green"/>
            </StackLayout>
        </ActionItem.actionView>
    </ActionItem>
  </ActionBar.actionItems>
</ActionBar>

Implementation suggestion:
For iOS - use - (id)initWithCustomView:(UIView *)customView of the UIBarButtonItem. The catch is that in order to be able to handle tap the custom view must be a button. So the custom view must be added as a sub view to a UIButton. And then the UIButton should be passed to the initWithCustomView method.

For Android - use setActionView of MenuItem http://developer.android.com/reference/android/view/MenuItem.html#setActionView(android.view.View)

@PeterStaev

Hey @PeterStaev,

Great suggestion! If you have already something working you can submit pull request and we will gladly help with the implementation.

@enchev

@enchev not exactly like this, but have made something similar in a custom actionbar implementation. So will see if to plug it in the {N} code.

I'm sorry but I quite don't get your solution. I'm quite new to NativeScript, do you have a simple sample app about ActionBar and ActionItem customization? I would appreciate really much.

@LeDinhsmarp, a sample page could be found here: https://github.com/NativeScript/NativeScript/blob/master/apps/ui-tests-app/action-bar/action-view.xml.

How about without having to use XML? I'm trying to approach the ActionBar programmatically, yet all examples start with XML.

@bfattori

Hey @bfattori,

You can create some View (for example Label) and assign in to ActionItem actionView property:
https://github.com/NativeScript/NativeScript/blob/master/ui/action-bar/action-bar.d.ts#L124

I LOVE YOU GUYS

I LOVE YOU GUYS [2]

Does this work with "android.position='popup' ? For me, it is not working and places the inner items outside of the popup and into the action bar.

Here is the code for my action items -- the third one has the inner label:

 <ActionItem text="Change Layout" android.position="popup" (tap)="changeDisplayOfItems()"></ActionItem>
    <ActionItem text=" Sort by cost" android.position="popup" (tap)="sortItemsBy('size')"></ActionItem>
    <ActionItem android.position="popup" (tap)="addNewItem()">
      <Label text="Hi"></Label>
    </ActionItem>
    <ActionItem text="Account Info" (tap)="accountInfo()" android.position="popup"></ActionItem>

But this is what is happening:

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

Ability to define a custom view in ActionItem #1488

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Ability to define a custom view in ActionItem #1488

Description

Activity

enchev commented on Feb 4, 2016

PeterStaev commented on Feb 4, 2016

deanle17 commented on Feb 23, 2016

vchimev commented on Mar 2, 2016

bfattori commented on Mar 2, 2016

enchev commented on Mar 12, 2016

sitefinitysteve commented on Mar 18, 2016

vjoao commented on Mar 19, 2016

chief10 commented on Aug 30, 2016

lock commented on Aug 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions