I'm struggling in custom UINavigationBar. The reason i want to customize is because there is same action that can be occur in different view controller. I post some images as an example.
As you can see from the images above. I think you get what i mean. I have been trying and searching, but i don't get the answer i wanted. Furthermore, i have tried using UIView to accomplish this, it worked, but i don't think it is correct way to do this. Therefore, i need help from you guys to lead me to the right path. :) :) Thank you.
You can set custom title view to the navigation bar like this way.
//To hide default back button
self.navigationItem.hidesBackButton=YES;
//Title View for Navigation
UIView *navTitle1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
[navTitle1 setBackgroundColor:[UIColor lightGrayColor]];
//Left View button and separator
UIButton *backBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 44)];
[backBarButton setTitle:#"Back" forState:UIControlStateNormal];
UIView *ttlview1 = [[UIView alloc] initWithFrame:CGRectMake(51, 0, 1, 44)];
[ttlview1 setBackgroundColor:[UIColor darkGrayColor]];
//Center view with two buttons and seprator for them
UIView *middleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 121, 44)];
[middleView setBackgroundColor:[UIColor clearColor]];
[middleView setCenter:navTitle1.center];
UIButton *postBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 44)];
[postBarButton setTitle:#"Post" forState:UIControlStateNormal];
UIView *ttlview2 = [[UIView alloc] initWithFrame:CGRectMake(middleView.frame.size.width/2, 0, 1, 44)];
[ttlview2 setBackgroundColor:[UIColor darkGrayColor]];
UIButton *memeBarButton = [[UIButton alloc] initWithFrame:CGRectMake((middleView.frame.size.width/2)+1, 0, 60, 44)];
[memeBarButton setTitle:#"Meme" forState:UIControlStateNormal];
[middleView addSubview:ttlview2];
[middleView addSubview:postBarButton];
[middleView addSubview:memeBarButton];
//Right button with seprator before that
UIView *ttlview3 = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width-71, 0, 1, 44)];
[ttlview3 setBackgroundColor:[UIColor darkGrayColor]];
You can refer THIS for more detail.
You can create 2 custom UIBarButtonItem from 2 views, using this document:
From Apple documentation:
Initializes a new item using the specified custom view.
- (id)initWithCustomView:(UIView *)customView
Parameters customView: A custom view representing the item.
Return Value Newly initialized item with the specified properties.
Left bar item: 1 view contains 3 buttons: Project, Kiara Paradize, Artist Impression.
Right bar item: 1 view contains 4 buttons: Sign up | Login (Profile button when user logged in) | Hamburger menu
Then:
self.navigationItem.leftBarButtonItem = UIBarButtonItem from left
Custom View
self.navigationItem.rightBarButtonItem = UIBarButtonItem from right Custom View
Related
I have 2 navigation bar items, but the size is too big, I want to make it smaller. how do i manage the size of them? should i edit them in the interface builder or should i manage them programmatically in viewDidLoad ?
I had given all the image size needed in the image asset, but it doesnt work
You have to take custom view for the navigationItem
take a button and give frame as per your requirement
set an image to the button
assign a button as customView to UIBarButtonItem
try following code ..it may help you
let customButton = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 30, height: 30))
customButton.setImage(UIImage.init(named:"imageName"), for: .normal)
self.navigationItem.rightBarButtonItem = UIBarButtonItem.init(customView: customButton)
Thank you
To use resized images in bar buttons, bellow code will help you:
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
[customView setBackgroundColor:[UIColor clearColor]];
CGRect iconRect = CGRectMake(((40 - 28)/2), ((40 - 28)/2), 28, 28);
UIImageView *imageIcon = [[UIImageView alloc] initWithFrame: iconRect];
imageIcon = [UIImage imageNamed:imageName];
[customView addSubview: imageIcon];
UIButton *tranparentButton = [UIButton buttonWithType:UIButtonTypeCustom];
[subscribeButton setFrame:CGRectMake(0, 0, 40, 40)];
[customView addSubview: tranparentButton];
[tranparentButton addTarget:self action:#selector(cancelButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightBarButton = [[UIBarButtonItem alloc] initWithCustomView: customView];
self.navigationItem.rightBarButtonItem = rightBarButton;
Thanks
I'm able to add a single toolbar over keyboard but i don't know how to add two consecutive toolbars over keyboard for single textView.
I'm able to add one tool bar just like below
But i want to do just like the below attachment.
There is no built in way of doing this. You will need to roll your own UIView / UIToolbar and place it above the keyboards first UIToolBar - you can use the system notifications to listen to UIKeyboard events and the adjust the second UIToolbar's frame property accordingly.
You can use UIToolbar and customize it to add your buttons into it. You can add buttons like this.
-(void)addToolBarOnKeyBordOnTextField:(UITextView *)textview
{
if (!viewToolbar) {
viewToolbar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 110)];
[viewToolbar setBackgroundColor:[UIColor clearColor]];
UIToolbar * numberToolbar1 = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0,self.view.frame.size.width, 50)];
numberToolbar1.barStyle = UIBarStyleBlack;
numberToolbar1.translucent = YES;
UIButton *buttonTopLeft = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 50)];
[buttonTopLeft setTitle:#"Clear" forState:UIControlStateNormal];
[numberToolbar1 addSubview:buttonTopLeft];
UIButton *buttonTopRight = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 60, 0, 60, 50)];
[buttonTopRight setTitle:#"Done" forState:UIControlStateNormal];
[numberToolbar1 addSubview:buttonTopRight];
[viewToolbar addSubview:numberToolbar1];
UIToolbar *numberToolbar2 = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 60,self.view.frame.size.width, 50)];
numberToolbar2.barStyle = UIBarStyleBlack;
numberToolbar2.translucent = YES;
UIButton *buttonBottomLeft = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 50)];
[buttonBottomLeft setTitle:#"Clear" forState:UIControlStateNormal];
[numberToolbar2 addSubview:buttonBottomLeft];
UIButton *buttonBottomRight = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width - 60, 0, 60, 50)];
[buttonBottomRight setTitle:#"Done" forState:UIControlStateNormal];
[numberToolbar2 addSubview:buttonBottomRight];
[viewToolbar addSubview:numberToolbar2];
}
[textview setInputAccessoryView:viewToolbar];
}
Remember to call this method in textViewShouldBeginEditing. You can add remaining buttons and set the frames as done in code.
Initially i have created a dynamic view called 'mainView'.In that,i have added Navigation bar.After that, i Want to add 2 right bar buttons to the navigation bar.If i code like this,its shows view with navigation bar.but its not showing right bar button.
1.Is it possible to add navigation bar without navigation controller?
2.Why the right bar button is not showing?
//mainView Creation
UIView *mainView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
mainView.backgroundColor =[UIColor grayColor];
[self.view addSubview:mainView];
//NavigationBar
UINavigationBar *NavigationBar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 45)];
NavigationBar.backgroundColor = [UIColor orangeColor];
[mainView addSubview:NavigationBar];
//rightbarView Creation
UIView *rightbarView = [[UIView alloc] init];
rightbarView.backgroundColor = [UIColor orangeColor];
//powerCut Button
UIButton *powerCutbutton = [[UIButton alloc] initWithFrame:CGRectMake(150, 20, 50, 14.01)];
[rightbarView addSubview:powerCutbutton];
UIImage *powercutimage = [UIImage imageNamed:#"powercut.jpg"];
[powerCutbutton setImage:powercutimage forState:UIControlStateNormal];
// addConnection button
UIButton *addConnectionbutton = [[UIButton alloc] initWithFrame:CGRectMake(210, 20, 50, 14.01)];
[rightbarView addSubview:addConnectionbutton];
UIImage *addimage = [UIImage imageNamed:#"add.png"];
[addConnectionbutton setImage:addimage forState:UIControlStateNormal];
// Barbutton item
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:rightbarView];
//[self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects:powerCutbutton, addConnectionbutton, nil]];
// setting rightbar button item
self.navigationItem.rightBarButtonItem = item;
create an array of bar buttons. and setLeftBarButtonItems not setLeftBarButtonItem as :
UIBarButtonItem * barbtn1;
UIBarButtonItem * barbtn2;
UIBarButtonItem * barbtn3;
[self.navigationItem setLeftBarButtonItems:#[barbtn1,barbtn2,barbtn3]];
or
[self.navigationItem setRightBarButtonItems:#[barbtn1,barbtn2,barbtn3]];
hope it will helpful for you
I've seen a few other examples, but I haven't seen anything that actually sticks. What I want is essentially what a tableViewHeader does. I have a tableViewController with a navigation bar. I want to put a view into place that shows some search criteria in a small bar directly below the navbar. But I need it to stick when the user swipes to view the results.
I've tried adding a UIView as a subview to the navigation bar, but it always sits at the top of the Navigation Bar, overlaying everything.
Here's what worked:
// Create a custom navigation view
_navigationView = [[UIView alloc] init];
_navigationView.backgroundColor = [UIColor whiteColor];
_navigationView.frame = CGRectMake(0.0f,
self.navigationController.navigationBar.frame.origin.y + 44.0f,
self.view.frame.size.width,
30.0f);
// Create bottom border for the custom navigation view
_navigationViewBorder = [[UIView alloc] init];
_navigationViewBorder.backgroundColor = [UIColor darkGrayColor];
_navigationViewBorder.tag = 1;
_navigationViewBorder.frame = CGRectMake(0.0f,
self.navigationController.navigationBar.frame.origin.y + 74.0f,
self.view.frame.size.width,
0.5f);
// Add labels for date, results, and the time range
_dateDisplay = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 70, 15)];
[_dateDisplay setFont:[UIFont fontWithName:#"HelveticaNeue" size:13]];
[_dateDisplay setText:#""];
_timeRangeDisplay = [[UILabel alloc] initWithFrame:CGRectMake(98, 0, 135, 15)];
[_timeRangeDisplay setFont:[UIFont fontWithName:#"HelveticaNeue-Bold" size:13]];
[_timeRangeDisplay setText:#""];
_resultsDisplay = [[UILabel alloc] initWithFrame:CGRectMake(240, 0, 80, 15)];
[_resultsDisplay setFont:[UIFont fontWithName:#"HelveticaNeue" size:13]];
[_resultsDisplay setText:#""];
[_navigationView addSubview: _dateDisplay];
[_navigationView addSubview: _timeRangeDisplay];
[_navigationView addSubview: _resultsDisplay];
// Add two views to the navigation bar
[self.navigationController.navigationBar.superview insertSubview:_navigationView belowSubview:self.navigationController.navigationBar];
[self.navigationController.navigationBar.superview insertSubview:_navigationViewBorder belowSubview:_navigationView];
Why not add the view to your viewController's view, and set up its constraints so that it sits just below the navigationBar, but above the tableView?
If it's only supposed to be there some of the time, you can animate its constraints to show/hide it.
I'm creating a custom view, which needs to be clickable, hence the button, and need to be in the left at the navigation bar (so, I replace the leftBarButtonItem).
If I add my custom view, to a UIBarButtonItem with - (id)initWithCustomView:(UIView *)customView;, the placement is exactly what I want, but I can't "click" on it. If I add my custom view as an UIButton subView, and use the button in the UIBarButtonItem - (id)initWithCustomView:(UIView *)customView; I can click on it, but now my cusotm view has a topmargin of aproximately 26 points, exceeding the navigationBar height.
This has the correct position, but can't click on it
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
....
UIBarButtonItem *customButton = [[UIBarButtonItem alloc] initWithCustomView:customView];
self.navigationItem.leftBarButtonItem = customButton;
This has the wrong position, but can click on it
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
....
UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addSubview:customView];
[button addTarget:self action:#selector(userProfile) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = customButton;
Hope I have made myself clear. I'm really clueless with this. I've tried forcing imageEdgeInsets in the UIButton, modifying the frame "y" origin making it negative... but nothing works.
EDIT: #kschaeffer solution works. Just needed to set the button frame the same as the customView frame.
This no longer works in iOs 7
In this case, it gets an unwanted left margin, and stops being clickable (no touch event gets recorded for the button as far as I see)
Try to set the customButton frame the same as the custom view. This actually works for me.
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
UIButton *customButton = [[UIButton alloc] initWithFrame:customView.bounds];
[customButton addTarget:target action:#selector(userProfile) forControlEvents:UIControlEventTouchUpInside];
[customView addSubview:customButton];
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithCustomView:customView];
self.navigationItem.rightBarButtonItem = customItem;