I want the toolbar to automatically appear on the bottom of the screen, and I want it to resize the width so it adjusts from iPhone to iPad. The code below results in a static UIToolbar which stays in the same position. How do i make the toolbar appear at the bottom, and how do i adjust the width automatically according to screen size ?
- (UIView*)commomOverlay
{
UIView* view = [[UIView alloc] initWithFrame:CGRectMake(0,0,400,430)];
CGRect rect = CGRectMake(0, [[UIScreen mainScreen] bounds].size.height - 44, [[UIScreen mainScreen] bounds].size.width, 44); /*
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
{
rect = CGRectMake(0,0,768,1004);
}
UIImageView *FrameImg = [[UIImageView alloc] initWithFrame:rect];
[FrameImg setImage:[UIImage imageNamed:#"newGraphicOverlay.png"]];
FrameImg.userInteractionEnabled = YES;
[view addSubview:FrameImg];
[FrameImg release];*/
rect = CGRectMake(0, 0, 400, 50);
UIToolbar *myToolBar = [[UIToolbar alloc] initWithFrame:rect];
[myToolBar setBarStyle:UIBarStyleBlackTranslucent];
UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithTitle:#"Finish" style:UIBarButtonItemStyleBordered target:self action:#selector(cancelButtonPressed)];
UIBarButtonItem *flexiSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:#selector(myFunction)];
mySwitch = [[UISwitch alloc] initWithFrame:CGRectMake (123,350,40,20)];
[mySwitch addTarget:self action:#selector(toggleFlash:) forControlEvents:UIControlEventAllTouchEvents];
UIBarButtonItem *switchBtn = [[UIBarButtonItem alloc] initWithCustomView:mySwitch];
//Order of how buttons appear or toolbar left to right.
[myToolBar setItems:[NSArray arrayWithObjects: cancelButton, flexiSpace,switchBtn, nil] animated:YES];
myToolBar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight ;
[cancelButton release];
[flexiSpace release];
[switchBtn release];
[view addSubview:myToolBar];
return view;
}
You are setting it's frame using a constant value. However, your view's frame is already set at this point and it will not change according to your autoresizingMask. You should use the view's bounds property instead and do something like:
toolbar.frame = CGRectMake(self.view.bounds.origin.x, 0, self.view.bounds.size.width, 50);
Another option would be defining constraints for your view.
Related
I am trying to add an image on navigation bar but the dimensions are wrong.
UIImageView* menuButton=[[UIImageView alloc]initWithFrame:CGRectMake(4, 7, 20, 20)];
menuButton.image=[UIImage imageNamed: Model.icon.MapList];
UIBarButtonItem *accountBarItem = [[UIBarButtonItem alloc] initWithCustomView:menuButton];
self.navigationItem.leftBarButtonItem = accountBarItem;
It seams that I don't have any control on the dimensions of the image, because when I change the values of initWithFrame nothing changes.
Also this problem appears only on iPhones greater than iPhone 5 model.
What am I missing?
You can just use simple button and set image for it.
UIButton *b = [UIButton buttonWithType:UIButtonTypeCustom];
[b setFrame:CGRectMake(0.0f, 0.0f, 25.0f, 25.0f)];
[b addTarget:self action:#selector(randomMsg) forControlEvents:UIControlEventTouchUpInside];
[b setImage:[UIImage imageNamed: Model.icon.MapList] forState:UIControlStateNormal];
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:b];
self.navigationItem.leftBarButtonItem = item;
If you have wrong aspect ratio , you can use
[[b imageView] setContentMode: UIViewContentModeScaleAspectFit];
I'd recommend adding a border to your image view so you can see what's going on.
Here's what you're currently experiencing (using the imageView directly as the custom view of the bar button item):
- (void)_addImageViewToLeftButtonItemWithoutOuterView {
UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Homer.jpg"]];
[profileImageView setFrame:CGRectMake(0, 0, 40, 40)];
profileImageView.layer.cornerRadius = 20.0f;
profileImageView.layer.masksToBounds = YES;
profileImageView.clipsToBounds = YES;
profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
profileImageView.layer.borderWidth = 1.0f;
UIBarButtonItem *rbi = [[UIBarButtonItem alloc] initWithCustomView:profileImageView];
self.navigationItem.leftBarButtonItem = rbi;
}
This is what it looks like without aspect fit:
And with aspect fit set:
And this is what I believe you want:
- (void)_addImageViewToLeftButtonItemWithOuterView {
UIView *profileView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
profileView.layer.borderColor = [[UIColor redColor] CGColor];
profileView.layer.borderWidth = 2.0f;
UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Homer.jpg"]];
profileImageView.contentMode = UIViewContentModeScaleAspectFit;
[profileImageView setFrame:CGRectMake(0, 0, 40, 40)];
profileImageView.layer.cornerRadius = 20.0f;
profileImageView.layer.masksToBounds = YES;
profileImageView.clipsToBounds = YES;
profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
profileImageView.layer.borderWidth = 1.0f;
[profileView addSubview:profileImageView];
UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:profileView];
self.navigationItem.leftBarButtonItem = lbi;
}
Which results in this:
As you probably noticed, the sorta trick here is that you don't want to add the image view directly as the custom view within initWithCustomView of the UIBarButtonItem. Instead you want to use an outer view to hold the imageView, then you can adjust the frame of your subview to move it around.
Here's one more example if you wanted the image further to the right (obviously you won't want the border for the outer image view, but I've just left it there for demonstration purposes):
- (void)_addImageViewToLeftButtonItemWithOuterView {
// adjust this to 80 width (it always starts at the origin of the bar button item
UIView *profileView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 40)];
profileView.layer.borderColor = [[UIColor redColor] CGColor];
profileView.layer.borderWidth = 2.0f;
UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Homer.jpg"]];
profileImageView.contentMode = UIViewContentModeScaleAspectFit;
// and adjust this to be offset by 40 (move it to the right some)
[profileImageView setFrame:CGRectMake(40, 0, 40, 40)];
profileImageView.layer.cornerRadius = 20.0f;
profileImageView.layer.masksToBounds = YES;
profileImageView.clipsToBounds = YES;
profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
profileImageView.layer.borderWidth = 1.0f;
[profileView addSubview:profileImageView];
UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:profileView];
self.navigationItem.leftBarButtonItem = lbi;
}
The UIBarButtonItems in the UINavigationBar inside of our UIPopoverController are hugging the left and right sides of the nav bar:
Here is the CustomPopoverController that we implemented. It used to hug the top of the navigation bar as well, but configurePopoverNavBar fixed that.
#implementation CMCommentPopoverController
- (id)initWithCaseId:(NSString *)cid andViewController:(CMNoteViewController *)cv forView:(UIView *)v {
self = [super initWithContentViewController:[[UINavigationController alloc] init]];
self.popoverNav= (UINavigationController *)self.contentViewController;
self.caseId = cid;
self.dvController = cv;
//size the popover
CGRect popoverRect = [CMMiscUtil getPopoverRect];
[self setPopoverContentSize:CGSizeMake(popoverRect.size.width, popoverRect.size.height)];
[self presentPopoverFromRect:CGRectMake(popoverRect.origin.x, popoverRect.origin.y, popoverRect.size.width, popoverRect.size.height) inView:v permittedArrowDirections:0 animated:YES];
[self setUpNav];
return self;
}
- (void) setUpNav {
[self.popoverNav pushViewController:self.dvController animated:NO];
self.popoverNav.navigationBar.topItem.title = #"Comments";
//add the buttons to the nav bar of the popover nav controller
self.popoverNav.navigationBar.topItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"Add Comment" style:UIBarButtonItemStylePlain target:self action:#selector(notesAction:)];
self.popoverNav.navigationBar.topItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"Close" style:UIBarButtonItemStylePlain target:self action:#selector(closeAction:)];
[self configurePopoverNavBar:self.popoverNav];
}
-(void) configurePopoverNavBar:(UINavigationController *)popoverNav {
UINavigationBar *navigationBar = popoverNav.navigationBar;
UIView *contentView = nil;
for (UIView *view in popoverNav.view.subviews) {
if ([[NSString stringWithFormat:#"%#", [view class]] isEqualToString:#"UILayoutContainerView"])
contentView = view;
}
[navigationBar setFrame:CGRectMake(navigationBar.frame.origin.x, 0, navigationBar.frame.size.width, navigationBar.frame.size.height)];
[contentView setFrame:CGRectMake(contentView.frame.origin.x, 0, contentView.frame.size.width, contentView.frame.size.height+50 + navigationBar.frame.size.height)];
[popoverNav.view bringSubviewToFront:contentView];
for (UIView *customView in contentView.subviews)
customView.frame = CGRectMake(customView.frame.origin.x, customView.frame.origin.y + navigationBar.frame.size.height, customView.frame.size.width, customView.frame.size.height);
[contentView addSubview:navigationBar];
[contentView bringSubviewToFront:navigationBar];
}
...
Create a custom view with a UIButton and create a UIBarButtonItem with this custom view.
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 80)];
UIButton *customButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 70)];
[customButton setTitle : #"Add Comment"];
[customButton addTarget:self action:#selector(notesAction:) forControlEvents:UIControlEventTouchUpInside];
[customView addSubview:customButton];
UIBarButtonItem *rightBarButton = [[UIBarButtonItem alloc] initWithCustomView:customView];
self.popoverNav.navigationBar.topItem.rightBarButtonItem = rightBarButton;
change the customView and customButton frame according to your requirement.
Fixed this issue by putting the UINavigationBar inside a UIView that extended 10px on either side:
CGRect navBarFrame = navigationBar.frame;
navBarFrame.origin.y = 0;
UIView * navBarContainer = [[UIView alloc] initWithFrame:navBarFrame];
navBarContainer.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"header.png"]];
[navigationBar setFrame:CGRectMake(navBarFrame.origin.x + 10, navBarFrame.origin.y, navBarFrame.size.width - 20, navBarFrame.size.height)];
...
[navBarContainer addSubview:navigationBar];
[contentView addSubview:navBarContainer];
...
I have a UITableCell and on that cell i have a UITextBox, when the textbox is clicked instead of a keyboard being shown, a UIDatePicker is being displayed with the code below. But i am having trouble positioning the UIDatePicker. I need it to start from the very bottom of the page at at the moment it appears to start from the top of the table section where the textbox was pressed. The code fires when the user clicks the Preferred Date label. Any pointers? I have attached an image to show where it is currently rendering. Thanks.
- (IBAction)selectDateBegin:(id)sender {
//Disable Keyboard
[self.txtBookingDate resignFirstResponder];
//Disable Scrolling
[_tableForm setScrollEnabled:false];
if ([self.view viewWithTag:9]) {
return;
}
CGRect toolbarTargetFrame = CGRectMake(0, self.view.bounds.size.height-216-44, 320, 44);
CGRect datePickerTargetFrame = CGRectMake(0, self.view.bounds.size.height-216, 320, 216);
UIView *darkView = [[UIView alloc] initWithFrame:self.view.bounds];
darkView.alpha = 0;
darkView.backgroundColor = [UIColor blackColor];
darkView.tag = 9;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(dismissDatePicker:)] ;
[darkView addGestureRecognizer:tapGesture];
[self.view addSubview:darkView];
UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height+44, 320, 216)] ;
datePicker.tag = 10;
[datePicker addTarget:self action:#selector(changeDate:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:datePicker];
UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height, 320, 44)];
toolBar.tag = 11;
toolBar.barStyle = UIBarStyleBlackTranslucent;
UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(dismissDatePicker:)];
[toolBar setItems:[NSArray arrayWithObjects:spacer, doneButton, nil]];
[self.view addSubview:toolBar];
[UIView beginAnimations:#"MoveIn" context:nil];
toolBar.frame = toolbarTargetFrame;
datePicker.frame = datePickerTargetFrame;
darkView.alpha = 0.5;
[UIView commitAnimations];
}
What I suggest you to do is replacing the inputView of your textField (the default is the keyboard) with this instruction:
UIDatePicker *datePicker = [[UIDatePicker alloc] init] ;
[datePicker addTarget:self action:#selector(changeDate:) forControlEvents:UIControlEventValueChanged];
[preferredDateField setInputView:datePicker];
It is more appropriate and in compliance with Apple Human Interface Guideline
Don't do it that way. Create a date picker and set it as the inputView of your text field. Then the system will present it for you, in the right place, with the right animation, instead of the keyboard.
In my iPad app, i add navigation bar and tool bar manually.
I also add scroll view and image view by coding.
My problem is i can see both navigation bar and tool bar.
I can click button on navigation bar.
But, i can't click bar button on tool bar.
How can i do it?
This is my code.
- (void)viewDidLoad
{
[super loadView];
self.view.backgroundColor = [UIColor grayColor];
UIScrollView *ScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 44, self.view.frame.size.width, self.view.frame.size.height)];
ScrollView.pagingEnabled = YES;
NSInteger numberOfViews = 4;
for (int i = 0; i < numberOfViews; i++) {
CGFloat xOrigin = i * self.view.frame.size.width;
// Create a UIImage to hold Info.png
UIImage *image1 = [UIImage imageNamed:#"Image-001.jpg"];
UIImage *image2 = [UIImage imageNamed:#"Image-002.jpg"];
UIImage *image3 = [UIImage imageNamed:#"Image-003.jpg"];
UIImage *image4 = [UIImage imageNamed:#"Image-004.jpg"];
NSArray *images = [[NSArray alloc] initWithObjects:image1,image2,image3,image4,nil];
UIImageView *ImageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height-88)];
[ImageView setImage:[images objectAtIndex:i]];
[ScrollView addSubview:ImageView];
}
ScrollView.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);
[self.view addSubview:ScrollView];
}
I dont Know what is your exact problem, Because your displayed code is not related to UIToolBar.
But Following code i added two UIBarButton with flexSpace.
you can add UIBarButton as you want
UIToolbar *Toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
Toolbar = UIBarStyleBlackTranslucent;
[Toolbar sizeToFit];
NSMutableArray *barItems = [[NSMutableArray alloc] init];
UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
[barItems addObject:flexSpace];
[flexSpace release];
UIBarButtonItem *btnCancel = [[UIBarButtonItem alloc] initWithTitle:#"Cancel" style:UIBarButtonItemStyleBordered target:self action:#selector(Cancel)];
[barItems addObject:btnCancel];
UIBarButtonItem *btnDone = [[UIBarButtonItem alloc] initWithTitle:#"Done" style:UIBarButtonItemStyleBordered target:self action:#selector(done)];
[barItems addObject:btnDone];
[Toolbar setItems:barItems animated:YES];
Following Method is call when tapped on bar Button
-(void)Cancel
{
// Write Code for Cancel Method
}
-(void)done
{
// Write Code for Done Method
}
This code might helpful in your own case.
Thanks :)
Thanks everybody. I can solve my problem.
I change my code.
UIScrollView *ScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 44, self.view.frame.size.width, self.view.frame.size.height)];
To this.
UIScrollView *ScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 44, self.view.frame.size.width, self.view.frame.size.height-88)];
When the user clicks on a UITextField I am showing a UIDatePicker for the input with the code below. But when i do this the datepicker and the normal text keyboard show at the same time. How would i disable the keyboard from displaying?
- (IBAction)selectDateBegin:(id)sender {
if ([self.view viewWithTag:9]) {
return;
}
CGRect toolbarTargetFrame = CGRectMake(0, self.view.bounds.size.height-216-44, 320, 44);
CGRect datePickerTargetFrame = CGRectMake(0, self.view.bounds.size.height-216, 320, 216);
UIView *darkView = [[UIView alloc] initWithFrame:self.view.bounds];
darkView.alpha = 0;
darkView.backgroundColor = [UIColor blackColor];
darkView.tag = 9;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(dismissDatePicker:)] ;
[darkView addGestureRecognizer:tapGesture];
[self.view addSubview:darkView];
UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height+44, 320, 216)] ;
datePicker.tag = 10;
[datePicker addTarget:self action:#selector(changeDate:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:datePicker];
UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height, 320, 44)];
toolBar.tag = 11;
toolBar.barStyle = UIBarStyleBlackTranslucent;
UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(dismissDatePicker:)];
[toolBar setItems:[NSArray arrayWithObjects:spacer, doneButton, nil]];
[self.view addSubview:toolBar];
[UIView beginAnimations:#"MoveIn" context:nil];
toolBar.frame = toolbarTargetFrame;
datePicker.frame = datePickerTargetFrame;
darkView.alpha = 0.5;
[UIView commitAnimations];}
-(void)textFieldDidBeginEditing:(UITextField *)sender
{
[self.textFieldName resignFirstResponder];
//
// Code ...continue,......for display DatePicker
//
}
Create a separate UIView for your datepicker (with navigation bar having OK and Cancel button) container and then assign it to textfield.inputView property. For more details refer UITextField Class Reference.
This will load your datepicker view instead of default keyboard.
You will find many more examples on net for the same.
Hope this is what you are looking for.