How to add a shadow effect for UINavigation bar - ios

Hello, I want to add this kind of shadow for my NAvigationBar How can I do that.
This is how I tried to add shadow.
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage=[UIImage new];
self.navigationController.navigationBar.translucent=YES;
self.navigationController.navigationBar.topItem.titleView.tintColor=[UIColor whiteColor];
self.navigationController.navigationBar.titleTextAttributes=[NSDictionary dictionaryWithObject:[UIFont fontWithName:#"HelveticaNeue" size:15.0f] forKey:NSFontAttributeName];
self.navigationController.navigationBar.topItem.title=strNavigtionTitle;
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"backarrow"] style:UIBarButtonItemStylePlain target:self action:#selector(revealToggle :)];
[self.navigationController navigationBar].tintColor = [UIColor whiteColor];
[self.navigationController navigationBar].layer.shadowColor=[UIColor colorWithRed:53.0/255.0 green:108.0/255.0 blue:130.0/255.0 alpha:1.0f].CGColor;
[self.navigationController navigationBar].layer.shadowOffset=CGSizeMake(0, 20);
[self.navigationController navigationBar].layer.shadowOpacity=0.8;
[self.navigationController navigationBar].layer.shadowRadius=5.5;
But this only add a shadow for the arrow and my Apply Leave title. But I want to add a drop shadow like in this image.It should be between the NavigationBar and my main UIView How can I do this? Please help me.
Thanks

Here you'll need to import the QuartzCore framework.
self.navigationController.navigationBar.layer.borderColor = [[UIColor whiteColor] CGColor];
self.navigationController.navigationBar.layer.borderWidth = 2; //Set border you can see the shadow
self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
self.navigationController.navigationBar.layer.shadowRadius = 3.0f;
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;
self.navigationController.navigationBar.layer.masksToBounds = NO;
Another thing
You have to
set self.layer.masksToBounds = NO;
The default value for this property is YES, which means that even though the shadow is rendered, it won't be rendered outside the bounds of the view, which means effectively that you don't see it at all.
If you're animating this view in any way, you should also add this line:
self.layer.shouldRasterize = YES;

self.navigationController.navigationBar.layer.shadowColor = [[UIColor blackColor] CGColor];
self.navigationController.navigationBar.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);
self.navigationController.navigationBar.layer.shadowRadius = 4.0f;
self.navigationController.navigationBar.layer.shadowOpacity = 1.0f;

I could achieve that in this way. I removed adding a shadow to the Navigation bar. Instead of that I put a same size view under the navigation bar. Set the background color of it to to the navigation bar color. Then added the shadow for that view. This worked perfectly.
-(void)setupNavigationBar
{
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage=[UIImage new];
self.navigationController.navigationBar.translucent=YES;
self.navigationController.navigationBar.topItem.titleView.tintColor=[UIColor whiteColor];
self.navigationController.navigationBar.titleTextAttributes=[NSDictionary dictionaryWithObject:[UIFont fontWithName:#"HelveticaNeue" size:15.0f] forKey:NSFontAttributeName];
self.navigationController.navigationBar.topItem.title=strNavigtionTitle;
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor whiteColor] forKey:NSForegroundColorAttributeName];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"backarrow"] style:UIBarButtonItemStylePlain target:self action:#selector(revealToggle :)];
[self.navigationController navigationBar].tintColor = [UIColor whiteColor];
UIView *shadow=[[UIView alloc] initWithFrame:CGRectMake(0, 0, dm.screenWidth, 64)];
[shadow setBackgroundColor:[UIColor colorWithRed:62.0/255.0 green:81.0/255.0 blue:119.0/255.0 alpha:1.0]];
shadow.layer.shadowColor=[UIColor colorWithRed:51/255 green:76/255 blue:104/255 alpha:1.0].CGColor;
shadow.layer.shadowOffset=CGSizeMake(0, 15);
shadow.layer.shadowOpacity=0.12;
shadow.layer.shadowRadius=4.5;
[self.view addSubview:shadow];
}

Related

How to set image title for UIView for CAPSPageMenu in objective c

I am new in IOS and creating an app.
I used CAPSPageMenu for page menu.Menu is working fine but i want to change
title as a image. I searched a lot,but all are negative.
PlusTypeViewController *controller1 = [[PlusTypeViewController alloc]initWithNibName:#"PlusTableView" bundle:nil];
controller1.title = #"PLUSr";
CapsulesViewController *controller2 = [[CapsulesViewController alloc]initWithNibName:#"CapsulesView" bundle:nil];
controller2.title = #"SUBSTITUTEr";
TabletsViewController *controller3 = [[TabletsViewController alloc] initWithNibName:#"Tablets" bundle:nil];
controller3.title = #"SUPPLIERS";
InjectionViewController *controller4 = [[InjectionViewController alloc] initWithNibName:#"Injection" bundle:nil];
controller4.title = #"INJECTION";
ShasheViewController *controller5 = [[ShasheViewController alloc] initWithNibName:#"Shesha" bundle:nil];
controller5.title = #"Shashe";
NSArray *controllerArray2 = #[controller1, controller2,controller3,controller4,controller5];
NSDictionary *parameterss = #{
CAPSPageMenuOptionScrollMenuBackgroundColor: [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:1.0],
//CAPSPageMenuOptionViewBackgroundColor: [UIColor colorWithRed:19.0/255.0 green:112.0/255.0 blue:103.0/255.0 alpha:1.0],
//CAPSPageMenuOptionSelectionIndicatorColor: [UIColor greenColor],
CAPSPageMenuOptionSelectionIndicatorColor:[UIColor colorWithRed:19.0/255.0 green:112.0/255.0 blue:103.0/255.0 alpha:1.0],
CAPSPageMenuOptionUnselectedMenuItemLabelColor:[UIColor colorWithRed:19.0/255.0 green:112.0/255.0 blue:103.0/255.0 alpha:1.0],
//CAPSPageMenuOptionSelectionIndicatorColor:[UIColor greenColor],
CAPSPageMenuOptionSelectedMenuItemLabelColor :[UIColor blackColor],
//CAPSPageMenuOptionBottomMenuHairlineColor: [UIColor colorWithRed:19.0/255.0 green:112.0/255.0 blue:103.0/255.0 alpha:1.0],
//CAPSPageMenuOptionBottomMenuHairlineColor: [UIColor blackColor],
CAPSPageMenuOptionMenuItemFont: [UIFont fontWithName:#"HelveticaNeue" size:13.0],
CAPSPageMenuOptionMenuHeight: #(30.0),
CAPSPageMenuOptionMenuItemWidth: #(90.0),
//CAPSPageMenuOptionCenterMenuItems: #(YES)
};
_secondPageMenu = [[CAPSPageMenu alloc] initWithViewControllers:controllerArray2 frame:CGRectMake(0.0, 0.0, self.view.frame.size.width, self.view.frame.size.height) options:parameterss];
[self.view addSubview:_secondPageMenu.view];
PLUSr is a demo title, i want to change it in image. Thanks in advance.
#pragma mark:- Navigation Bar
-(void)createCustomNavBar
{
UIView *topBarView =[[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 44)];
topBarView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0];
[self.view addSubview:topBarView];
UIButton *btnBack = [[UIButton alloc]initWithFrame:CGRectMake(2.5, 0, 44, 44)];
[btnBack setImage:[UIImage imageNamed:#"backs_icon_iPhone.png"] forState:UIControlStateNormal];
[btnBack addTarget:self action:#selector(backButtonAction) forControlEvents:UIControlEventTouchUpInside];
[topBarView addSubview:btnBack];
UIImageView *titleImageView=[[UIImageView alloc]init];
titleImageView.image= [UIImage imageNamed:#"sample.png"];
titleImageView.frame=CGRectMake(80, 0, SCREEN_WIDTH-160, 44);
[topBarView addSubview:titleImageView];
}
this is one of the solution. call this createCustomNavBar mathod. thanks
You can set image as a title of controller like below code,
First you need to embed Navigation Controller for navigate on controller and then write below code in viewDidLoad method of that controller
UIImage *image = [[UIImage alloc]initWithName:#"YOUR_IMAGE"];
UIImageView *imageView = [[UIImageView alloc]init];
imageView.image = image;
self.navigationItem.titleView = imageView;
Hope this will help you :)
NOTE : I am doing like this in Swift but if any correction for obj-c then pls change it.
Navigationitem has titleView property which can be used to set up custom view in our navigation view.
You can make a method like this and call in you viewDidLoad.
-(void)setTitleViewForNavigation {
self.navigationController.navigationBar.backgroundColor =[UIColor blueColor];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 200, 44)];
[imageView setImage:[UIImage imageNamed:#"placeholder"]];
imageView.backgroundColor = [UIColor redColor];
self.navigationItem.titleView = imageView;
[self.navigationItem setTitleView:imageView];
}
By using:
CAPSPageMenuOptionScrollMenuBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"yourImage"]

Remove between UITableView and UINavigationBar

I have an UITableView which I am trying to make the background color of the first cell match the color of the UINavigationBar, as seen in the screenshot below.
However, as you can see, there is a dark border between both objects which I don't know where is coming from.
Moreover, it is evident that the tone of the color used is not the same in both cases, despite using the same [UIColor colorWithRed:] code. This is not the main problem, but I wanted to mention this too.
Any thoughts?
EDIT
viewDidLoad:
self.tableView.separatorColor = [UIColor clearColor];
self.tableView.backgroundColor = [UIColor colorWithRed:0.97 green:0.97 blue:0.97 alpha:1.0];
self.tableView.scrollEnabled = NO;
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.clipsToBounds = YES;
self.navigationController.navigationBar.translucent = NO;
cellForRowAtIndexPath:
cell.backgroundColor = myColor;
Try this:
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
But if you want to remove the hairline alone and keeping the blur effect, try:
self.navigationController.navigationBar.clipsToBounds = YES;
and by the way, this is my actual code of testing:
- (void)viewDidLoad
{
[super viewDidLoad];
UIView *red = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 44, 44)];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.clipsToBounds = YES;
}
Sample output be:
Update:
Looks like -clipToBounds do not suits your implementation.
Here what i think suits yours:
self.navigationController.navigationBar.barTintColor = [UIColor colorWithRed:0 green:0.5 blue:0.97 alpha:1.0];
[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.translucent = NO;
Before: After:
Note: The [UIColor colorWithRed:0 green:0.5 blue:0.97 alpha:1.0] is just for example, assign your desired color to .barTintColor.
Perhaps
//0084D3
UIColor * color = [UIColor colorWithRed:0/255.0f green:132/255.0f blue:211/255.0f alpha:1.0f];
//006FCC
UIColor * color = [UIColor colorWithRed:0/255.0f green:111/255.0f blue:204/255.0f alpha:1.0f];
is what you need based from UIColor Code Generator :)
Hope this is helpful.. Cheers.. :)
The line you're seeing is the navigation bar's shadowImage. You can remove it by adding
self.navigationController.navigationBar.shadowImage = [UIImage new];
EDIT
Not sure if you've solved this already, but I set up a brand new project with a UITableViewController embedded in a UINavigationController and there's no line under the nav bar. Here's the configuration I did:
In viewDidLoad:
self.navigationController.navigationBar.translucent = NO;
[self.navigationController.navigationBar setBarTintColor:myColor];
self.tableView.backgroundColor = myColor;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
In tableView:cellForRowAtIndexPath:
cell.contentView.backgroundColor = myColor;
cell.textLabel.backgroundColor = myColor;
cell.textLabel.text = #"this";
Nothing special in Storyboard.

Need change title navbar color

Need change navigationbar title color.
Something like that:
self.navigationItem.title.color = [UIColor yellowColor];
-(void)viewDidLoad
{
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];
shadow.shadowOffset = CGSizeMake(0, 1);
// In dictionary you can set your own color
[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,shadow, NSShadowAttributeName,[UIFont fontWithName:#"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];
}
for more...
go to http://www.appcoda.com/customize-navigation-status-bar-ios-7/
hope this will help you
you can give any stylish you want to tittle of navigation bar by just doing
UILabel *lblNavTitle = [[UILabel alloc] initWithFrame:CGRectMake(x, y, width, height)];
lblNavTitle.backgroundColor = [UIColor clearColor];
lblNavTitle.textAlignment = NSTextAlignmentCenter;
lblNavTitle.textColor = [UIColor whiteColor];//this what you want
lblNavTitle.text = NSLocalizedString(#"Volunteers", #"");
[lblNavTitle sizeToFit];
self.navigationItem.titleView = lblNavTitle;

UINavigationBar title overlaps momentarily on VC load with Custom NavBar Height

I have a custom method in my AppDelegate:
-(void)setupNavBar{
UINavigationController *nav = (UINavigationController *)self.window.rootViewController;
[nav.navigationBar setBounds:CGRectMake(0,0,320,70)];
nav.navigationBar.translucent = YES;
[nav.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
nav.navigationBar.shadowImage = [UIImage new];
nav.navigationBar.translucent = YES;
nav.view.backgroundColor = [UIColor clearColor];
UIView *navBorder = [[UIView alloc] initWithFrame:CGRectMake(0, nav.navigationBar.frame.size.height-1, nav.navigationBar.frame.size.width, 1)];
// Change the frame size to suit yours //
[navBorder setBackgroundColor:[UIColor colorWithWhite:200.0f/255.f alpha:0.8f]];
[navBorder setOpaque:YES];
[nav.navigationBar addSubview:navBorder];
CGFloat verticalOffset = 25;
[nav.navigationBar setTitleVerticalPositionAdjustment:verticalOffset forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTintColor:[UIColor clearColor]];
[[UINavigationBar appearance] setTitleTextAttributes:#{
UITextAttributeTextColor: [UIColor whiteColor],
UITextAttributeFont: [UIFont fontWithName:#"Dosis-ExtraBold" size:33.0],
}];
}
I am presenting using a Nav Controller on storyboard and on the initial view controller everything looks great. However, when I push another VC (via segue) the title only half shows before the Navigationbar area seems to resize and redraw. Is there anyway to force a redraw in the ViewWillAppear so that the title text shows up whole straight away?
Have attached some images of the transition.
Thanks.
http://puu.sh/7AkJL
Try to use this:
- (void)viewDidLoad
{
//your code
self.navigationItem.titleView = [self initTitle: #"IN HAND"];
}
- (UIView *)initTitle:(NSString *) titleString
{
UIView *titleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 180, 44)]; //your size!
UILabel *navBarLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 180, 44)];
navBarLabel.text = titleString;
[navBarLabel setTextAlignment:NSTextAlignmentCenter];
navBarLabel.font = [UIFont fontWithName:#"Menlo-Regular" size:16.0f];
navBarLabel.textColor = [UIColor whiteColor];
[titleView addSubview:navBarLabel];
return titleView;
}

The top bar color change when we change of view

I have a problem with my top bar, i initialize a color in my MainViewController with a function that is used in the viewDidLoad :
-(void)_initCustomTopBar
{
NSLog(#"init");
UIColor *barColour = [UIColor colorWithRed:22.0f/255.0f green:61.0f/255.0f blue:121.0f/255.0f alpha:1.0f];
UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)];
colourView.opaque = NO;
colourView.alpha = .7f;
//colourView.backgroundColor = barColour;
self.navigationController.navigationBar.barTintColor = barColour;
self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
[self.navigationController.navigationBar.layer insertSublayer:colourView.layer atIndex:1];
NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont
fontWithName:#"Helvetica Neue" size:20], NSFontAttributeName,
[UIColor whiteColor], NSForegroundColorAttributeName, nil];
self.navigationController.navigationBar.titleTextAttributes = attributes;
}
But when i change of view, the top bar became gray and when i click on return the MainViewController top bar became gray too.
Have an idea for why it became gray ? And how correct that ?
Call this _initCustomTopBar in your viewWillAppear method
-(void)viewWillAppear:(BOOL)animated
{
[self _initCustomTopBar];
}

Resources