ios Title and Subtitle in Navigation Bar centered - ios

I'm trying to have two UILabels in my navigation bar instead of just one.
I followed this link to have informations on how to do that:
iPhone Title and Subtitle in Navigation Bar
It works well, but I can't get my texts to be centered properly.
It is centered between the buttons, but the default title behaviour is to center itself right under the time.
I had a look here, same question, but no answer:
UINavigationBar TitleView with subtitle
What am I missing?
Here is my code:
CGRect headerTitleSubtitleFrame = CGRectMake(0, 0, 200, 44);
UIView* _headerTitleSubtitleView = [[UILabel alloc] initWithFrame:headerTitleSubtitleFrame];
_headerTitleSubtitleView.backgroundColor = [UIColor clearColor];
_headerTitleSubtitleView.autoresizesSubviews = NO;
CGRect titleFrame = CGRectMake(0, 2, 200, 24);
UILabel *titleView = [[UILabel alloc] initWithFrame:titleFrame];
titleView.backgroundColor = [UIColor clearColor];
titleView.font = [UIFont boldSystemFontOfSize:20];
titleView.textAlignment = NSTextAlignmentCenter;
titleView.textColor = [UIColor whiteColor];
titleView.shadowColor = [UIColor darkGrayColor];
titleView.shadowOffset = CGSizeMake(0, -1);
titleView.text = #"Title";
titleView.adjustsFontSizeToFitWidth = YES;
[_headerTitleSubtitleView addSubview:titleView];
CGRect subtitleFrame = CGRectMake(0, 24, 200, 44-24);
UILabel *subtitleView = [[UILabel alloc] initWithFrame:subtitleFrame];
subtitleView.backgroundColor = [UIColor clearColor];
subtitleView.font = [UIFont boldSystemFontOfSize:13];
subtitleView.textAlignment = NSTextAlignmentCenter;
subtitleView.textColor = [UIColor whiteColor];
subtitleView.shadowColor = [UIColor darkGrayColor];
subtitleView.shadowOffset = CGSizeMake(0, -1);
subtitleView.text = #"Subtitle";
subtitleView.adjustsFontSizeToFitWidth = YES;
[_headerTitleSubtitleView addSubview:subtitleView];
self.navigationItem.titleView = _headerTitleSubtitleView;

You should adjust the width of both frames. It should be below 200. try this.
CGRect titleFrame = CGRectMake(0, 2, 160, 24);
CGRect subtitleFrame = CGRectMake(0, 24, 160, 44-24);
Edit : Your backbutton on the left is wider, and the titleview is shifted to the right.
Please look the image with width 200px
And the image with width 160px
I suggest you to adjust the width of titleview and label accordingly.
If you want to know more about backbutton width, then please refer the discussion here.
SO Post 1.
SO Post 2.

you may like this property in UINavigationItem class.
#property (nonatmic,copy) NSString *prompt
It's elegant.

Related

Adjust frame of UITableView Background View?

I am setting a label inside of an empty table view's background view, which is placing the label in the middle of the tableview.
I'd like to move that label up a bit, so it's near the top of the table view, however the code below isn't working:
UILabel *messageLbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, 20)];
messageLbl.text = #"NO REGISTRATIONS FOUND";
messageLbl.font = [UIFont fontWithName:#"Sansation-Bold" size:20.0f];
messageLbl.textColor = [UIColor lightGrayColor];
messageLbl.textAlignment = NSTextAlignmentCenter;
[messageLbl sizeToFit];
//set back to label view
self.tableView.backgroundView = messageLbl;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.backgroundView.frame = CGRectMake(0, 0, self.tableView.bounds.size.width, 100);
Another easy solution is to add your messageLbl to tableHeaderView:
UILabel *messageLbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, 50)];
messageLbl.text = #"\n\n NO REGISTRATIONS FOUND";
messageLbl.font = [UIFont fontWithName:#"Sansation-Bold" size:20.0f];
messageLbl.textColor = [UIColor lightGrayColor];
messageLbl.textAlignment = NSTextAlignmentCenter;
messageLbl.numberOfLines = 0;
[messageLbl sizeToFit];
//set back to label view
self.tableView.tableHeaderView = messageLbl;
Quick solution is just by adding \n at the end the of text and set no of lines to 0. Try this
messageLbl.numberOfLines = 0;
messageLbl.text = #"NO REGISTRATIONS FOUND\n\n\n\n";
Looks like you were hiding the Y axis behind Navigation bar
try it by setting some Y axis height & Don't forget to add SubView
UILabel *messageLbl = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, self.tableView.bounds.size.width, 20)];
messageLbl.text = #"NO REGISTRATIONS FOUND";
messageLbl.font = [UIFont fontWithName:#"Sansation-Bold" size:20.0f];
messageLbl.textColor = [UIColor lightGrayColor];
messageLbl.textAlignment = NSTextAlignmentCenter;
[messageLbl sizeToFit];
//set back to label view
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
[self.view addSubview: messageLbl];

Adding an Image with a Title in a UINavigationController

I would like to show a small icon next to the title in my UINavigationController.
Through the magic of Photoshop, like this:
I know I need to create a new view and build the image and title into it. Here is what I am doing:
In viewDidLoad in the UINavigationController view controller, I call the method
[self setTitleBar];
Which calls this method:
- (void) setTitleBar {
CGRect navBarFrame = self.navigationController.navigationBar.frame;
//UIView *titleView = [[UIView alloc] initWithFrame:CGRectMake(navBarFrame.origin.x, navBarFrame.origin.y, (leftButtonFrame.origin.x + leftButtonFrame.size.width) - rightButtonFrame.origin.x, navBarFrame.size.height)];
UIView *titleView = [[UIView alloc] initWithFrame:CGRectMake(navBarFrame.origin.x, navBarFrame.origin.y,self.view.frame.size.width,navBarFrame.size.height)];
titleView.backgroundColor = [UIColor clearColor];
CGPoint tvCenter = CGPointMake(titleView.frame.size.width/2, titleView.frame.size.height/2);
UIImage * icon = [UIImage imageNamed:#"star"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.frame = CGRectMake(0, 0, icon.size.width, icon.size.height);
UILabel *title = [[UILabel alloc] init];
title.backgroundColor = [UIColor clearColor];
title.textColor = [UIColor whiteColor];
title.textAlignment = NSTextAlignmentCenter;
title.text = #"SOME TITLE";
title.frame = CGRectMake(0, 0, 100, titleView.frame.size.height);
[title sizeToFit];
iconView.center = CGPointMake(tvCenter.x - (icon.size.width/2), tvCenter.y);
[titleView addSubview:iconView];
[titleView addSubview:title];
self.navigationItem.titleView = titleView;
}
My logic in the titleView is: Get the left most button's frame and get the right most buttons frame. THEN do some math to figure out how big the view can be. That should be the titleView's frame size.
However, I can't seem to get it to work. If I plug in a frame size of 0,0,100,40; then it shows the frame but everything is squished together. But you see it. I know that 100 should be dynamic to ensure that the title is shown.
But I can't seem to figure it out.
Any help?
You can place objects on the Navigation Controller View, as subviews.
- (void) setTitleBar {
//Let's say your icon size is 20
int starSize = 20;
//Now you'll have to calculate where to place the ImageView respect the TextSize (for this you'll need to know the text and font of your UINavigationItem title)
CGSize textSize = [#"SOME TITLE" sizeWithAttributes:#{NSFontAttributeName:[UIFont fontWithName:#"navfontname" size:15]}];
UIImageView *startImageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.navigationController.view.frame.size.width/2 - textSize.width/2, self.navigationController.view.frame.size.height/2 - starSize/2, starSize,starSize)];
startImageView.image = [UIImage imageNamed:#"star"];
[self.navigationController.view addSubview:startImageView];
}

Trouble positioning custom navigationItem titleView

I have a custom view (titleView) that I've created for a webView on my iOS app. The titleView has two labels, a titleLabel and a subTitleLabel. If the titleLabel is too wide for the titleView, I truncate the text and have it fill the whole frame. But the problem happens whenever the titleLabel is smaller that the titleView. I get inconsistent results when I try to calculate the position of the titleLabel's frame. I just assumed I would take the difference between the width of the titelView.frame.size.width and the titleLabel.frame.size.widthand divide that by 2, but it doesn't work. I'm probably missing something stupid, but I just can't see it. One thing to note is that the subTitleLabel's seem to be positioned fairly well, and though it's not perfect, it's better than the titleLabel's.
Here are some images (I added borders to the titleView and it's subViews to help show positioning) that show positioning with various length title strings:
Code:
UIView *titleView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width - 88, 34)];
titleView.clipsToBounds = YES;
UIFont *titleFont = [UIFont systemFontOfSize:16 weight:UIFontWeightThin];
UIFont *speakerFont = [UIFont systemFontOfSize:10 weight:UIFontWeightLight];
CGSize speakerSize = [[self.speech speakerFullNameAndDate] sizeWithAttributes:#{ NSFontAttributeName : speakerFont }];
CGSize titleSize = [self.speech.title sizeWithAttributes:#{ NSFontAttributeName : titleFont }];
UILabel *titleLabel = [[UILabel alloc] init];
UILabel *subTitleLabel = [[UILabel alloc] init];
[titleView addSubview: titleLabel];
[titleView addSubview:subTitleLabel];
CGFloat titleDifference = (titleView.frame.size.width - titleLabel.frame.size.width) / 2;
titleLabel.text = self.speech.title;
titleLabel.font = titleFont;
titleLabel.textAlignment = NSTextAlignmentCenter;
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.lineBreakMode = NSLineBreakByTruncatingTail;
// titleLabel is bigger than the titleView's frame
if (titleSize.width > titleView.frame.size.width) {
titleLabel.frame = CGRectMake(0, 0, titleView.frame.size.width - 20, 18);
} else {
// titleDifference / 3 seems to be the best number for the frame's x coordinate
titleLabel.frame = CGRectMake(titleDifference / 3, 0, titleSize.width, 18);
[titleLabel sizeToFit];
}
subTitleLabel.text = [self.speech speakerFullNameAndDate];
subTitleLabel.font = speakerFont;
subTitleLabel.textAlignment = NSTextAlignmentCenter;
subTitleLabel.textColor = [UIColor whiteColor];
subTitleLabel.backgroundColor = [UIColor clearColor];
// Again, ((titleView.frame.size.width - speakerSize.width) / 3) seems to work best, though it's far from perfect
subTitleLabel.frame = CGRectMake(((titleView.frame.size.width - speakerSize.width) / 3), 20, speakerSize.width, 12);
[subTitleLabel sizeToFit];
self.navigationItem.titleView = titleView;
You are calculating your title label origin wrong remember that any view origin is the top left corner, so your title label origin should be something like
CGFloat originX = titelView.frame.size.width/2 - titleLabel.frame.size.width/2
what you are doing is assuming a view origin is in the center of the view

CGRectMake( ) - y reference looks totally wrong

I am facing a really strange issue:
I am instantiating multiple UIImageView inside a for loop with the method CGRectMake, the y origin I am giving seems to be totally wrong on the screen:
Here is my code:
- (void)makeTheView
{
self.view.backgroundColor = [UIColor whiteColor];
UIScrollView *header = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 100)];
header.backgroundColor = [UIColor colorWithRed:254/255.0f green:255/255.0f blue:213/255.0f alpha:1.0f];
[self.view addSubview:header];
for (int i = 0; i < 10; i++) {
UIImageView *avatar = [[UIImageView alloc] initWithFrame:CGRectMake(5 + i * 75, 5, 70, 70)];
avatar.image = [UIImage imageNamed:#"bo_pic_baby5.jpg"];
[avatar.layer setCornerRadius:8.0];
avatar.layer.masksToBounds = YES;
NSLog(#"%f", avatar.frame.origin.y);
UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, avatar.frame.size.width, 20)];
title.backgroundColor = [UIColor colorWithRed:148/255.0f green:148/255.0f blue:148/255.0f alpha:0.5f];
title.font = [UIFont fontWithName:#"Arial" size:15];
title.text = #"崔健";
title.textAlignment = NSTextAlignmentCenter;
title.textColor = [UIColor whiteColor];
[avatar addSubview:title];
[header addSubview:avatar];
}
}
According to this code avatar is within header at 5px from the top of header.
But the following is what I obtain visually:
note: when the white area begin, the header view stopped
This is not a real issue since I can reevaluate my frames like this :
CGRectMake(5 + i * 75, - 20, 70, 70)
but it looks really weird, and I am quite sure I am missing something totally trivial here...
I think this will be fixed by:
self.automaticallyAdjustsScrollViewInsets = NO;
Since iOS 7, view controllers automatically adjust scroll view insets so that the scroll view content is not hidden behind the navigation bar because it expects scroll views to start at the top of the screen.
However, the usual solution is to just set the scrollview frame.origin.y to 0.
Your Code is Absolutely Correct , As you are Adding the scrollview on (0,64) Position , So 64 will be count from Bottom of the Navigation Bar, If you want it on top (Just Below the Navigation bar), Change this declaration to as below :
UIScrollView *header = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];

UILabel set to center of view

How come the UILabel drawn in this code is not in the center of the view?
//create the view and make it gray
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor darkGrayColor];
//everything for label
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,0,42,21)];
//set text of label
NSString *welcomeMessage = [#"Welcome, " stringByAppendingString:#"username"];
welcomeMessage = [welcomeMessage stringByAppendingString:#"!"];
label.text = welcomeMessage;
//set color
label.backgroundColor = [UIColor darkGrayColor];
label.textColor = [UIColor whiteColor];
//properties
label.textAlignment = NSTextAlignmentCenter;
[label sizeToFit];
//add the components to the view
[view addSubview: label];
label.center = view.center;
//show the view
self.view = view;
The line, label.center = view.center; should move the label to the center of the view. But instead moves it to where the center of the label is in the left hand corner of the view as shown below.
(source: gyazo.com)
Does anyone know why?
You need to init your view with a frame:
UIView *view = [[UIView alloc] initWithFrame:self.view.frame];
This is caused by your view variable not having a frame defined. By default it has a frame set to (0, 0, 0, 0), so its center is (0, 0).
Hence when you do label.center = view.center;, you set the center of your label to (0 - label.width / 2, 0 - label.height /2). (-80.5 -10.5; 161 21) in your case.
There is no need for a new UIView if your UIViewController already have one, just work with self.view.
- (void)viewDidLoad
{
[super viewDidLoad];
//create the view and make it gray
self.view.backgroundColor = [UIColor darkGrayColor];
//everything for label
UILabel *label = [[UILabel alloc] init];
//set text of label
// stringWithFormat is useful in this case ;)
NSString *welcomeMessage = [NSString stringWithFormat:#"Welcome, %#!", #"username"];
label.text = welcomeMessage;
//set color
label.backgroundColor = [UIColor darkGrayColor];
label.textColor = [UIColor whiteColor];
//properties
label.textAlignment = NSTextAlignmentCenter;
[label sizeToFit];
//add the components to the view
[self.view addSubview: label];
label.center = self.view.center;
}
Also note that doing label.center = self.view.center will not work properly when rotating to landscape mode.
Your code would work fine if you put it in the viewDiLayoutSubviews instead of viewDidLoad

Resources