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.
Related
I can't really think of a way on how to put a custom UIButton at the end of the text of the UITextView. Not its trailing ending, not its frame, but its text.
If only I could use UILabel, then I could just implement this functionality using TTTAttributedLabel.
My goal is just like that, not just a simple hide/show READ MORE functionality or whatsoever.
Here's the goal:
And here's a simple code, I'm using frame for now for some experiments instead of constraints - and besides, I can't see the use of constraints if I don't even know where to constraint the button.
UIImage *toggleDescriptionFieldButtonImage = self.isFieldDescriptionShown ?
[UIImage imageNamed:#"ic_field_desc_shown"] : [UIImage imageNamed:#"ic_field_desc_hidden"];
toggleDesciptionFieldButton = [UIButton buttonWithType:UIButtonTypeCustom];
toggleDesciptionFieldButton.frame = CGRectMake(0, 0, 25, 25);
[toggleDesciptionFieldButton setImage:toggleDescriptionFieldButtonImage forState:UIControlStateNormal];
[toggleDesciptionFieldButton addTarget:self
action:#selector(toggleDescriptionFieldPressed:)
forControlEvents:UIControlEventTouchUpInside];
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];
Hello I am creating UIButton which is displaying image and title at the same time. I want title and image to be both centred, button to be above image. Problem is that because of localisation of string from button, string length is changing, and alignment from UIStoryboard combined with edge insets is not working as I want it to work. Can someone help me and point me in the right direction?
set these two.
1. set Align controls of UIButton
set Image and Text Inset of UIButton
The first thought is that you could build a UIView showing image and text, then attach a UITapGestureRecognizer to it, which would be more flexible than UIButton.
I am not sure, but you can try to set title like this:
[someButton setTitle:#"\nsome title" forState:UIControlStateNormal];
where \n is a new line.
Adjust titleEdgeInsets and imageEdgeInsets accordingly
[self.facebookButton setImage:[UIImage imageNamed:#"facebook_icn"] forState:UIControlStateNormal];
[self.facebookButton setTitle:NSLocalizedString(#"Invite via Facebook1",nil) forState:UIControlStateNormal];
self.facebookButton.titleEdgeInsets = UIEdgeInsetsMake(0.0f, 5.0f, 0.0f, -5.0f);
self.facebookButton.imageEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0);
I have an issue with my navigation bar, the UIBarButtonItem is not correctly vertically aligned. I don't know why because I'm using a simple UIBarButtonItem and not a custom view. See my code below and thanks for your help!
UIBarButtonItem *newGameItem = [[UIBarButtonItem alloc] initWithTitle:#"New Game" style:UIBarButtonItemStyleDone target:self action:#selector(newGame)];
self.navigationItem.rightBarButtonItem = newGameItem;
Actually there are couple ways to align the bar buttons.
Try to adjust the button title position with this:
[self.navigationItem.rightBarButtonItem setTitlePositionAdjustment:UIOffsetMake(-10, -10)
forBarMetrics:UIBarMetricsDefault];
-10 -10 - just for example
OR
you can initialize your newGameItem with custom UIButton. The custom button is a subclass of UIButton with this method overridden
- (UIEdgeInsets)alignmentRectInsets {
return UIEdgeInsetsMake(0, -10, 0, 15.0f); // here you can play with values to align your button properly
}
then initialize your newGameItem
CustomBarButton *button = [CustomBarButton buttonWithType:UIButtonTypeCustom];
[button setTitle:#"New game" forState:UIControlStateNormal];
button.frame = CGRectMake (0, 0, 60, 40);
[button addTarget:self action:#selector(newGame) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *newGameItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = newGameItem;
I had a similar issue: We use custom fonts via UIAppearance for both navigation titles and bar button items, and in some cases, the right item was vertically misaligned.
I could easily fix the misalignment by using [self.navigationItem setRightBarButtonItem:rightItem animated:YES] instead of the property setter.
I had the same problem with a button on the left, I was able to fix it in Xcode 6.3.1: select the button (bar button item) right column tab "ruler" inset image Top value: -54 instead of 0.
Note that: my device is an iPhone4 with iOS 7, the button was perfectly in place in Xcode and misplaced on the device, now it is in place on the device and misplaced in Xcode
Unfortunately, there is not much you can do about UIBarButtonItem vertical spacing. I believe you'll have to either increase the font size of your title on the UINavigationBar (you can do this with UIAppearance also), or decrease the font size of your UIBarButtonItem.
I've got a bit of a dilemma. It's not a dealbreaker, but I'm interested in a decent answer if there is one.
I've been using a UIButton with a custom subview inside of a UIBarButtonItem (as the bar button item's customView). My custom subview is not a UILabel nor is it a UIImage, which is why I'm doing what I'm doing. This UIBarButtonItem is an item on my navigation bar, and the navigation bar has a tintColor set. I want the UIButton to have that rounded-rect appearance of UIBarButtonItemStyleBordered, which means it should also take on the tintColor of its parent bar.
Current solutions out there have implemented extracting png files from UIKit for UINavigationBarDefaultButton.png and family. This would look great if I weren't setting a tintColor property; instead the button remains that "iOS navy blue", when I want, say, bright orange (not the color I'm using but you get my drift). Which brings me to my dilemma: what's the best way to make a UIButton look and act like that UIBarButtonItem style, including taking on the tintColor property? I can set that property myself on the button; it's no big deal.
Would I want to draw that UIButton's background in CoreGraphics? Is there a framework/library out there that implements this already? If I'm dreaming the impossible, just tell me. I'm not that awesome with doing CoreGraphics by hand yet, but it's definitely not outside the realm of possibility.
If this can't be done, I know I can always take the cool custom UIView I'm attempting to finagle in and just save it off as an image (and thus use UIImage inside of a UIBarButtonItem), but I'd like to see if this is possible.
This is what I'm dealing with (below). The back button looks awesome, but only because I'm not messing with it. I'd like that rightBarButtonItem to use my tintColor that I have set, but in order to give it that UIBarButtonItemStyleBordered appearance with a customView set, I'm forced to make the button use png files for its background. Below is what you see, even with tintColor set on the UIBarButtonItem (since it's using a png).
I did find this question/answer on Stack Overflow, that gets me close enough that I can wing the rest. It's a well-detailed post about how to tint a UIImage with a UIColor; I've pulled it out into a function and I've posted a gist for that right here.
Combined with that, I've defined a category method on UIButton that lets me create a button with that background image, tinted, and I plop that into an empty UIBarButtonItem.
+ (id)buttonWithBarStyleAndTintColor:(UIColor *)tintColor customView:(UIView *)customView {
UIImage *defaultNormal = [UIImage imageNamed:#"UINavigationBarDefaultButton.png"];
UIImage *defaultPressed = [UIImage imageNamed:#"UINavigationBarDefaultButtonPressed.png"];
UIImage *back = [TintImageWithTintColor(defaultNormal, tintColor)
stretchableImageWithLeftCapWidth:5.0
topCapHeight:0.0];
UIImage *pressed = [TintImageWithTintColor(defaultPressed, tintColor)
stretchableImageWithLeftCapWidth:5.0
topCapHeight:0.0];
UIButton *button = [self buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 34.0f, 30.0f);
[button addSubview:customView];
customView.userInteractionEnabled = NO;
customView.frame = CGRectCenterRectInRect(customView.frame, button.frame);
[button setBackgroundImage:back forState:UIControlStateNormal];
[button setBackgroundImage:pressed forState:UIControlStateSelected];
[button setBackgroundImage:pressed forState:UIControlStateHighlighted];
return button;
}
You can try and set the UIButton type to custom and make sure its color is clear, same for your custom view, that way the only visible view will be the UIBarButtonItem tint color.
Also if you are willing to invest, there is this tool called PaintCode that does the code for CoreGraphics for you.