Adding an Image with a Title in a UINavigationController - ios

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];
}

Related

iOS tableviewheader subview not shown

I use a UITableView and I want to setup a text at the beginning.
My code is:
UIView *tableHeaderView = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 0.0, self.tableView.frame.size.width, 20.0)];
tableHeaderView.backgroundColor = [UIColor groupTableViewBackgroundColor];
UILabel *tableHeaderLabel = [[UILabel alloc]initWithFrame:CGRectMake(15.0,0,tableHeaderView.frame.size.width-15.0,tableHeaderView.frame.size.height)];
tableHeaderLabel.text = #"Countries";
if([UIFont respondsToSelector:#selector(preferredFontForTextStyle:)])
tableHeaderLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
else
tableHeaderLabel.font = [UIFont boldSystemFontOfSize:14.0];
[tableHeaderView addSubview:tableHeaderLabel];
self.tableView.tableHeaderView = tableHeaderView;
[tableHeaderView bringSubviewToFront:tableHeaderLabel];
[tableHeaderLabel release];
[tableHeaderView release];
The problem is that the text isn't shown.
If I suppress the backgroundColor of the main header view, or if I replace it with a transparent one as if the Label awas under the main header view.
So I added the line:
[tableHeaderView bringSubviewToFront:tableHeaderLabel];
but this doesn't fix the issue.
I can't use the Label directly as the tableViewHeaderView directly becaus I want to left space at the left of the text.
Anybody have an idea to help me?
Thanks.
The only problem you have here is a typo in the first line, initialized an UIView wrongly as an UILabel. The compiler will not compliant as UILabel is a subclass of UIView.
I ran the following code and it worked as expected: (The code is for ARC, if you are not using it, don't forget to do the release!)
- (void)viewDidLoad {
[super viewDidLoad];
UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0,
self.tableView.frame.size.width,
20.0)];
tableHeaderView.backgroundColor = [UIColor groupTableViewBackgroundColor];
UILabel *tableHeaderLabel = [[UILabel alloc] initWithFrame:CGRectMake(15.0, 0,
tableHeaderView.frame.size.width - 15.0,
tableHeaderView.frame.size.height)];
tableHeaderLabel.text = #"Countries";
tableHeaderView.backgroundColor = [UIColor groupTableViewBackgroundColor];
if([UIFont respondsToSelector:#selector(preferredFontForTextStyle:)]) {
tableHeaderLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
} else {
tableHeaderLabel.font = [UIFont boldSystemFontOfSize:14.0];
}
[tableHeaderView addSubview:tableHeaderLabel];
self.tableView.tableHeaderView = tableHeaderView;
}

iOS Calc X position to place elements on a View

I want to add a Label and an Image in titleView of my NavigationItem. I am adding UILabel and UIImageView to a UIView and setting it as titleView of the navigation Item. Things are being added, but I am not able to calculate the length of label and place image next to it.
My code is :-
// Title Name + Image
UIView *titView = [[UIView alloc] initWithFrame:self.navigationItem.titleView.bounds];
self.navigationItem.titleView = titView;
UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(-10, -20, 150, 30)];
title.text = #"Bunny ";
[title setTextColor:[UIColor orangeColor]];
[titView addSubview:title];
float x2 = 30; //+ title.bounds.size.width;
UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"return" ]];
img.frame = CGRectMake(x2, -20, img.bounds.size.width, 30);
[titView addSubview:img];
I am looking for some way to calc the width text and set accordingly the width of the label. Right now I have set the width of the label as 150. And secondly, calc the x position to place the image just next to the label.
Tried many ways, but nothing works as expected. How can I achieve this ? Can you he give some guidelines such that regardless of length of text of label, things works as expected and UIView gets placed in the center of navigation item.
Any help is highly appreciated. Thanks.
You can call
[title sizeToFit];
after setting its properties and it will size itself to match the contained string.
Set the imageViews x origin to
CGRectGetMaxX(title.frame) + desiredSpacing;
And it could help to subclass UIView to achieve the final results by overwriting layoutSubviews and placing your views there, since the titleView's frame can be adjusted by the navigationBar...basically like this:
#implementation TitleView{
UILabel *_titleLabel;
UIImageView *_img;
}
- (id)initWithTitle:(NSString *)title andImage:(UIImage *)image
{
self = [super init];
if (self) {
_titleLabel = [[UILabel alloc] init];
_titleLabel.text = title;
[_titleLabel setTextColor:[UIColor orangeColor]];
[_titleLabel sizeToFit];
[self addSubview:_titleLabel];
_img = [[UIImageView alloc] initWithImage:image];
[self addSubview:_img];
}
return self;
}
- (void)layoutSubviews{
CGFloat spacingBetweenTextAndImage = 0;
CGFloat width = CGRectGetWidth(_titleLabel.frame)+CGRectGetWidth(_img.frame)+spacingBetweenTextAndImage;
CGFloat x = (CGRectGetWidth(self.bounds)-width)/2;
_titleLabel.frame = CGRectMake(x, (CGRectGetHeight(self.bounds)-CGRectGetHeight(_titleLabel.bounds))/2, CGRectGetWidth(_titleLabel.bounds), CGRectGetHeight(_titleLabel.bounds));
x+=CGRectGetWidth(_titleLabel.bounds)+spacingBetweenTextAndImage;
_img.frame = CGRectMake(x, (CGRectGetHeight(self.bounds)-CGRectGetHeight(_img.bounds))/2, CGRectGetWidth(_img.bounds), CGRectGetHeight(_img.bounds));
}
#end
use in your viewController:
UIView *titleView = [[TitleView alloc] initWithTitle:#"Bunny" andImage:[UIImage imageNamed:#"return" ]];
self.navigationItem.titleView = titleView;

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)];

ios Title and Subtitle in Navigation Bar centered

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.

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