Position a UIBarButtonItem in a UIToolBar with PhoneGap - objective-c

I'm using PhoneGap 1.3 and am trying to create an iOS add button on the right side of my toolbar; however, the createToolBarItem method does not have any option to set the position of the item. How can I do this? Here is a snippet of code from NativeControls.h:
//create the toolbar in `createToolBar` method://
toolBar = [[UIToolbar alloc] initWithFrame:toolBarBounds];
//....set some toolbar options like .hidden, .barStyle, etc.//
[toolBar setFrame:toolBarBounds];
[self.webView setFrame:webViewBounds];
//add the toolbar to the webview
[self.webView.superview addSubView:toolBar];
//create the button item in `createToolBarItem` method:
item = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemAdd target:self action:#selector(toolBarButtonTapped:)];
[toolBarItems insertObject:item atIndex:[tagId intValue]];
[item release];
//then in `showToolBar` method//
[toolBar setItems:toolBarItems animated:NO];

You probably found out by now, but you have to add a UIBarButtonSystemItemFlexibleSpace to the left of your button to have it right-aligned.
In Phonegap, from JS do:
nativeControls.createToolBarItem("spacer", "", "UIBarButtonSystemItemFlexibleSpace", "");

Related

Adding Bar Button Item

problem
I cannot for the life of me get it to show.
Here's the implementation of the nav bar
_navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 50)];
[_navBar setDelegate:self];
[self.view addSubview:_navBar];
_navBar is a UINavigationBar property.
Here's where I add the button.
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
target:self
action:#selector(flipView:)];
self.navigationItem.rightBarButtonItem = button;
However, nothing shows. Any help?
self.navigationItem is read automatically by a parent UINavigationController. But you don't have one.
Thus, you have two choices:
Instead of a loose nav bar that you create and put into the interface yourself (as you are doing in your first code), be the child of a UINavigationController. Now setting self.navigationItem will work.
Or, create a navigation item, configure it, and push it manually onto your loose nav bar. Your code will then have this structure:
UINavigationItem* ni = [[UINavigationItem alloc] initWithTitle:// ...];
UIBarButtonItem* b = // ...;
ni.rightBarButtonItem = b;
_navbar.items = #[ni];

Right bar button item not aligned vertically

I am setting a rightbarbuttonitem in from a viewController using the following code:
UIBarButtonItem *item = [[UIBarButtonItem alloc]initWithTitle:#"Save" style:UIBarButtonItemStylePlain target:self action:#selector(saveDetails)];
self.navigationItem.rightBarButtonItem = item;
It is appearing as shown in the image:
As you can see, the button which appears is not vertically aligned with either th leftbuttonitem or the title.
I also tried adjusting the alignment using the code mentioned here:
[self.navigationItem.rightBarButtonItem setTitlePositionAdjustment:UIOffsetMake(0, -10) forBarMetrics:UIBarMetricsDefault];
But this removes the custom font and moves the button even higher.
How can I set a rightbarbuttonitem which is aligned AND maintains the custom font set using the UIAppearance proxy?
EDIT:
I even tried using
[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemSave target:self action:#selector(saveDetails)];
but the result is exactly as shown in the first image.
UPDATE (Sep 20):
It seems that I will have to go with Alexander's answer, anybody with a cleaner solution?
You can use the next variant:
UIButton *saveButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 20)];
[saveButton addTarget:self action:#selector(saveDetails) forControlEvents:UIControlEventTouchUpInside];
[saveButton setTitle: #"Save" forState:UIControlStateNormal];
[saveButton setTitleEdgeInsets:UIEdgeInsetsMake(5, 0, 0, 0)];
UIBarButtonItem *item =[[UIBarButtonItem alloc] initWithCustomView:saveButton];
self.navigationItem.rightBarButtonItem = item;
I tried the answer but didn't seem to work.
The solution for me was adding UIButton as UIBarButtonItem. If it sounds confusing, just drag a UIButton from Interface Builder to the position of Left or RightBarButtonItem on the navigationBar in your storyboard.
Hope it helps.

Method called if UIBarButtonItem:initWithImage: is used but not UIBarButtonItem:initWithCustomView:

I have a method that I want to get called when the user clicks on a button in the navigation bar. If I add the button like this then my method gets called:
UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"myEditButton"]
style:UIBarButtonItemStyleBordered
target:self
action: #selector(enterEditMode:)];
editButton.title = #"Edit";
[self.navigationItem setRightBarButtonItem:editButton animated:YES];
When the user clicks on the button then my enterEditMode: method gets called.
However using this code the result looks like as in the attachment - there's no text but worse my image is lying on top of a blue button. I can't use the standard system edit button because there is a requirement for it to be colored black not blue and AFAIA I'm unable to change the color of the standard edit bar button to black?
So in a xib I created a parent UIView which contains a UIImageView which is the button image and a UILabel for the text.
Then I create the button item like this:
UIBarButtonItem *editButton = [[UIBarButtonItem alloc] initWithCustomView:self.editButtonParentView];
[editButton setTarget:self];
[editButton setAction: #selector(enterEditMode:)];
editButton.style = UIBarButtonItemStyleBordered;
editButton.target = self;
self.editButtonLabel.text = #"Edit"
[self.navigationItem setRightBarButtonItem:editButton animated:YES];
Where editButtonParentView is an IBOutlet to the partent view in the nib.
This displays perfectly, however the problem is that enterEditMode: does not get called when the user clicks on it.
Why does it not get called?
Thanks
This link is where I found out how you can get the same look as the system 'Edit' button but get any background color you want. Try this code:
// From:
#import "UIBarButtomItem+Tinted.h"
#implementation UIBarButtonItem (Tinted)
+ (UIBarButtonItem *)newBarButtonItemWithTint:(UIColor*)color andTitle:(NSString*)itemTitle andTarget:(id)theTarget andSelector:(SEL)selector
{
UISegmentedControl *button = [[UISegmentedControl alloc] initWithItems:#[itemTitle]];
button.momentary = YES;
button.segmentedControlStyle = UISegmentedControlStyleBar;
button.tintColor = color;
[button addTarget:theTarget action:selector forControlEvents:UIControlEventValueChanged];
return [[UIBarButtonItem alloc] initWithCustomView:button];
}
#end

UIkeyboard popup with uitextfield on top (pic included)

I am trying to achieve this type of effect where a barbutton is pressed and uikeyboard pops up and right above it brings a uitextfield with it. Please see image attached. Can someone point me to the right about how I can do this?
Thanks.
Use UIToolbar or UIActionSheet
Setup a textField as an inputAccessoryView for the keyboard.
UIToolbar* keyboardDoneButtonView = [[UIToolbar alloc] init];
keyboardDoneButtonView.barStyle = UIBarStyleBlack;
keyboardDoneButtonView.translucent = YES;
keyboardDoneButtonView.tintColor = nil;
[keyboardDoneButtonView sizeToFit];
UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(30, 10, 260, 30)];
[keyboardDoneButtonView setItems:[NSArray arrayWithObjects:textField, nil]];
masterTextField.inputAccessoryView = keyboardDoneButtonView;
// where masterTextField is the textField is the one you tap, and the keyboard rises up along with the small textField.
masterTextField.returnKeyType = UIReturnKeyDone;
[masterTextField setKeyboardType:UIKeyboardTypeDefault];
update:
For a button, put the above code in the (IBAction) of the button.
And instead of masterTextField, create a UIView and add it as a SubView to your view.

Objective C: Using code to add a toolbar to a UITableView (within a Navigation Controller)

I managed to add a toolbar at the bottom of my UITableView using the code below:
toolbar = [[UIToolbar alloc] init];
toolbar.barStyle = UIBarStyleDefault;
toolbar.frame = CGRectMake(0, 436, 320, 50);
//Set the toolbar to fit the width of the app.
[toolbar sizeToFit];
[self.navigationController.view addSubview:toolbar];
However when I try to switch back to the first page of the navigation controller, the toolbar at the bottom of the page is still displayed. How can I ensure that the toolbar is only shown on the UITable View and not any other views in the navigation controller?
Thanks in advance.
Zhen
In your TableViewController implement:
- (void)viewWillAppear:(BOOL)animated
{
self.navigationController.toolbar.hidden = NO;
}
- (void)viewWillDisappear:(BOOL)animated
{
self.navigationController.toolbar.hidden = YES;
}