Making the UINavigationBar Shorter - ios

I have seen several apps that have shorter UINavigationBar. Like the StackOverFlow iOS app.
How do we achieve this?

Try this:
-(void)viewDidLayoutSubviews{
CGRect temp=self.navigationController.navigationBar.frame;
[self.navigationController.navigationBar setFrame:CGRectMake(temp.origin.x, 40, temp.size.width, temp.size.height)];
}

If you open several apps with navigation bars, you can see your statement is wrong when double-tapping the home button (to see them lined up nicely).
Compare Facebook, Whatsapp, YouTube, Pages, and Messages for example, they're all the same size. So unless they're all shrunk to the same size, I'd say they're not shrunk at all !
Now on top of that I suggest that you don't "change" your navigation bar too much, as it is a strong pivot point for your user and changing it would be "disturbing". Customize it to your will but have some limits.
If you just want to reduce it's height, I think you can simply use the navigationbar properties :
self.navigationController.navigationBar setFrame:<#(CGRect)#>
or
self.navigationController.navigationBar.frame.size.height = //yourFloatValue.
And that should do it !

As per my knowledge, I don't believe that you can edit the hight of navigation Bar (For UX purposes). But you can hide it and create your own custom view and place it on top of the screen.
You can use this code to hide the navigation bar
self.navigationController.navigationBar.hidden = YES;
and you create your own custom view like follows
CGRect barFrame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 65);
UIView *customeBar = [[UIView alloc] initWithFrame:barFrame];
[self.view addSubview:customeBar];
UIButton *navButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[navButton addTarget:self action:#selector(aMethod:) forControlEvents:UIControlEventTouchUpInside];
[navButton setTitle:#"" forState:UIControlStateNormal];
[navButton setBackgroundImage:[UIImage imageNamed:#"someImage.png"] forState:UIControlStateNormal];
navButton.frame = CGRectMake(10, 10, 56.0, 56.0);
[customeBar addSubview:navButton];

Related

Navigation bar title is not centred in iPhone's portrait mode

I have created a ViewController Using Xib file of size wAny and hAny and i have used autolayaout and constraint to fit UI all devices and all orientation.
Everything is working fine but when i'm running app on iPhone portrait mode title of navigation bar is not centred where as when rotating it to landscape mode title is centred.
I have used following code for setting title
self.title = #"Download Schedule";
Already tried:
I have tried to set custom UILabel of lesser font size to Navigation bar's title view but still i'm getting it on left side .
Here is code of my right button
//add right bar button for more options
UIView *navBarButtonsView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
UIBarButtonItem *item0 = [UIBarButtonItem negativeSpacerWithWidth:5];
UIButton *moreButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
[moreButton setBackgroundImage:[UIImage imageNamed:#"ic_web"] forState:UIControlStateNormal];
[moreButton addTarget:self action:#selector(addNewSchedule) forControlEvents:UIControlEventTouchDown];
[navBarButtonsView addSubview:moreButton];
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:navBarButtonsView];
self.navigationItem.rightBarButtonItems = [NSArray arrayWithObjects:item0, backButton, nil];
There is something else going on - something you have not told us about. I suspect that there is something wrong with how you are setting your rightButtonItems, such that there are invisible buttons taking up the space on the right. I can reproduce this issue only by deliberately making the right button really wide:
So I suspect you have applied a large width to the right button, or there are extra invisible right button items taking up the space on the right.

iOS 7 create a bottom UIToolbar like Photo and AppStore

I would like to create a bottom UIToolbar on iPad like Photo and AppStore apps. A taller toolbar whit custom UIBarButtonItem with image above text.
The problem is that I can't resize the 44px height in the .xib and if I try to change frame programmatically doesn't work.
Ideas ?
Edit
I want replace this interface with UIToolbar because the tab bar behavior is not what I need : I don't have many view controllers, but only functionalities that I want call from UIBarButtonItem.
Create a Image with your logo and text in it, assign it to a custom UIButton and assign it to UIBarButtomItem using initWithCustomView
UIImage *customImage = [UIImage imageNamed:#"yourCustomImage"];
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, customImage.size.width, customImage.size.height);
[backButton setImage:[UIImage imageNamed:#"yourCustomImage"] forState:UIControlStateNormal];
[backButton addTarget:self action:#selector(showPreviousView) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarButton = [[UIBarButtonItem alloc]initWithCustomView:customButton];
Hope this helps You..

Tab bar items to have different width

I am creating an iPhone app where i need to show 5 tab bar items . My requirement is I want first tab bar item to have smaller width than other 4 . is it possible and how to go about doing this. Please suggest .
I don't think it's possible to do this. UITabBar and UITabBarItem are two of the least customizable classes in UIKit. UITabBarItem does not even inherit from UIView.
I needed to something similar and ended up rolling my own TabBarController, TabBar and TabBarItem classes. If you only need the basic tab bar functionality it's not too much work. If you want the fancy new iOS 7 transitions it will be a lot more work.
Please check it out custom tab bar: https://github.com/aalittle/ALCustomTabBarController
In this sample, please go to TabBarView.xib file, you can change all the tabs buttons width and height according to your requirement.
Hope, It will may helpful,
:)
Create a subclass from UITabBarController and write this code in viewDidLoad.
-(void)viewDidLoad
{
[super viewDidLoad];
[self addCustomElements];
}
-(void)addCustomElements
{
// Backgroun
UIImageView* bgView = Your backgroun image for tab bar;
bgView.frame = CGRectMake(0, self.view.frame.size.height-50, 320, 50);
[self.view addSubview:bgView];
// Initialise our two images
UIImage *btnImage = default image for your tab item;
UIImage *btnImageSelected = selected image for your tab item;
tab1 = [UIButton buttonWithType:UIButtonTypeCustom]; //Setup the button
tab1.frame = // Set the frame (size and position) of the button)
[tab1 setImage:btnImage forState:UIControlStateNormal];
[btnMore setBackgroundImage:btnImageSelected forState:UIControlStateSelected];
[tab1 setTitle:#"title for 1st button" forState:UIControlStateNormal];
[tab1 setTag:0];
// Add my new buttons to the view
[self.view addSubview:tab1];
//repeat same for remaining button
// Setup event handlers so that the buttonClicked method will respond to the touch up inside event.
[tab1 addTarget:self action:#selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
}
set this subclass to your tab bar controller.

Center custom TitleView containing an UIImage and UILabel

I checked all the other answers, but I cannot get it to work using what they say:
I have a UIView myTitle, with Frame (0,0,320,44) which contains an UIImage and a UILabel. The UIImage and the UILabel are fine and look fine, but I cannot seem to figure out how to center myTitle.
self.navigationItem.titleView = myTitle;
It shows up and looks ok, but much too far to the left. It seems to (logically) be related to the left bar button (the back button) which is auto generated by the framework when I push a controller. That barbutton has a varying width based on that and it changes the x of myTitle view based on that.
So, where can I get the width of the left (and right) barbuttons so I can figure out how to put myTitle that in the center?
I notice when I change the width of myTitle it (logically) will center (because the UIImage and UILabel are centered within myTitle).
To have more control, instead of having the left bar button auto -generated, set it using code as below.
UIButton *leftButton =[UIButton buttonWithType:UIButtonTypeCustom];
[leftButton setFrame:CGRectMake(0, 0, 100, 44)];
[leftButton setTitle:#"back" forState:UIControlStateNormal];
[leftButton setBackgroundColor:[UIColor greenColor]];
[leftButton addTarget:self action:#selector(backButtonClicked) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem =[[UIBarButtonItem alloc] initWithCustomView:leftButton];
Now you can perfectly adjust the frame of titleView with out much problem.
I found two ways in which it works;
Like Cy-4AH suggested, using autolayout; her/his answer would be the answer
Not using autolayout it was much simpler than I thought; if i make the titleView Width to fit it's content exactly, it automatically works; is that done with auto layout internally?
Hope this helps someone.

Navigation bar button click event firing when clicked on area below it.

I am having navigation bar with custom view as right bar button item. Custom view has two buttons in it. But when i touch area below navigation bar on right side it fires button touch event. I have checked frames of buttons and view by changing background color all are set perfectly.
I checked for default iOS apps like clock, calendar, setting, notes etc they all have same behaviour. Touching in red rectangle in screenshots(of default iOS calendar app.) fires touch event of button same is happening with my app too..
Here is code..
UIView* navigationButtonsView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 44.0f)];
UIButton *p = [UIButton buttonWithType:UIButtonTypeCustom];
[p setImage:[UIImage imageNamed:#"PBtn.png"] forState:UIControlStateNormal];
[p addTarget:self action:#selector(PButtonPushed:) forControlEvents:UIControlEventTouchUpInside];
[p setFrame:CGRectMake(43, 0, 57, 44)];
[navigationButtonsView addSubview:p];
UIButton *o = [UIButton buttonWithType:UIButtonTypeCustom];
[o addTarget:self action:#selector(oButtonPushed:) forControlEvents:UIControlEventTouchUpInside];
[o setFrame:CGRectMake(0, 0, 38, 44)];
[o setImage:[UIImage imageNamed:#"O.png"] forState:UIControlStateNormal];
[navigationButtonsView addSubview:o];
UIBarButtonItem *barItem = [[UIBarButtonItem alloc] initWithCustomView:navigationButtonsView];
[musicVC.navigationItem setRightBarButtonItem: barItem animated:NO];
How to change this default iOS behaviour for navigation bar buttons ? Because m having some UI right below these buttons and its top area not responding because of this.
Thanks in advance..
This is normal behavior - two reasons:
iOS doesn't know how big your finger is - so it has to decide where to put the touch. In this case, nav bar overrides table view.
This may have something to do with the Human Interface Guidelines (sorry, no link. Google it) that say that the minimum touchable area must be 44px. This behavior may be the 'UIBarButtonItem' trying to conform with these requirements.

Resources