Custom UINavigationBar with custom height in center - ios

I have reviewed almost all questions on OS related to custom NavigationBar but unable to find those solutions helpful. Please have a look on following screenshot,
Red portion represents an icon (small image) in the center of navigationBar.
Please suggest some solution. Thanks in advance.
EDIT: I want to implement that for all UINavigationBar in app. I mean on each view
NOTE: I do not know who is down voting my question but i want to ask a question from those persons. Do you have any solution for my problem? If not, then why you are down voting my question? I will not be able to get help in this way. It's totally wrong.

You can subclass UINavigationBar.
#import "VSNavigationBar.h"
#interface VSNavigationBar ()
#property (nonatomic, weak) UIView *noseView;
#end
#implementation VSNavigationBar
-(void)layoutSubviews
{
[super layoutSubviews];
static CGFloat width = 80;
if (!_noseView) {
UIView *noseView = [[UIView alloc] initWithFrame:CGRectMake(self.bounds.size.width / 2 - width / 2, 0, width, width)];
self.noseView = noseView;
self.noseView.backgroundColor = self.barTintColor;
self.noseView.layer.cornerRadius = self.noseView.frame.size.width / 2;
[self addSubview:_noseView];
}
_noseView.frame = CGRectMake(self.bounds.size.width / 2 - width / 2, 0, width, width);
}
#end
And in your Storyboard you would select the NavigationController scene, in the tree view on the left select Navigation Bar and on the right side select the identity inspector and change the class to the subclass.

you need to create an image that looks like central part of the image you have provided and say -
UIImage *image = [UIImage imageNamed: #"logo.png"];
UIImageView *imageview = [[UIImageView alloc] initWithImage: image];
self.navigationItem.titleView = image view;
If you are trying to get circular effect like the bottom of the image you provided, in that case you need to have same image as above and set it as background image of navbar -
[navigationBar setBackgroundImage:[UIImage imageNamed: #"yourImage"] forBarMetrics:UIBarMetricsDefault];

Related

Set Tableview background with Image and Label

I have searched all over but haven't found the answer that works for me.
I just want a tableview background to be set with an Image and a Text below the image when there are no items in the tableview. Like this:
http://i.stack.imgur.com/7DZa5.png
It also has to be in the center and has to work in both iPhone and IPad.
I have tried setting the tableview background to an ImageView but I can't get the label to be positioned below the image. I have also tried creating a separate .xib file for this but I can't get it to work. Please help!
Do you believe in magic ? Kidding...
I believe its not the background of table view. Whenever the array populating your table view contains no data, you need to remove the table view (_tableView.hidden = YES; WILL WORK) and add this custom view with your image and label.
Why don't you set the UITableView's background property to clear. Then just set the image as the background of the view it self? Using AutoLayout will help you keep it centre at all times.
Hi i have done it using ImageView and setting a label inside the imageview.. then adding the imageview as the background for the tableview. It works on iphone and ipad. here is the code:
UIImage *image = [UIImage imageNamed:#"ico_file_list_not_found.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
imageView.image = image;
[imageView setContentMode:UIViewContentModeCenter];
UILabel *messageLbl = [[UILabel alloc] initWithFrame:CGRectMake(self.tableView.bounds.size.width/2 - image.size.width / 2 + (image.size.width/7),
self.tableView.bounds.size.height/2 + image.size.height / 2
, 120, 21)];
messageLbl.text = #"No files found.";
[imageView addSubview:messageLbl];
self.tableView.backgroundView = imageView;
thank you
It work for you
1> IBOutlet lblTextlable and imgNoItem
2> you set the UITableView's background property to clear.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
if (arrTableListItem.count==0) {
lblTextlable.hidden = false;
imgNoItem.hidden = false;
}
else {
lblTextlable.hidden = true;
imgNoItem.hidden = true;
}
return arrTableListItem.count;
}
As I see in that image, it's the label and image. So the code logic maybe as follow:
If there is no item in list view, hide it and "show" the image / label.
If there are at least one item in the list view, show the list view and hide the Image / Label.

UIImageView Bounds, Frame

I know there are lots of similar questions here and I checked the famous one, and then grasped the difference between Bounds, and Frame.
Now I have some problem related to them. I played around with them , but it didn't show as I expected.
What I don't understand here is:
Why the frame origin of Y is 44.000000 below the top even I set the UIImageView at the left corner?
Because bounds should be
"The bounds of an UIView is the rectangle, expressed as a location (x,y) and size (width,height) relative to its own coordinate system (0,0)." (Cocoa: What's the difference between the frame and the bounds?)
I thought the frame also should start at the left corner here.
#import "ViewController.h"
#interface ViewController ()
//#property (weak, nonatomic) IBOutlet UIImageView *image;
#property (weak, nonatomic) IBOutlet UIImageView *image2;
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//UIImage *imageView = [UIImage imageNamed:#"stanford"];
// self.image.alpha = 1;
// self.image.contentMode = 1;
// self.image.image = imageView;
// [self.image setAlpha:0.1];
// [self.image setContentMode:UIViewContentModeCenter];
// [self.image setImage:imageView];
NSURL *url = [[NSURL alloc] initWithString:#"http://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Pitbull_2%2C_2012.jpg/472px-Pitbull_2%2C_2012.jpg"];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *imageData = [UIImage imageWithData:data];
[self.image2 setBounds:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.image2 setImage:imageData];
NSLog(#"frame.orign.x:%f,frame.origin.y:%f",self.image2.frame.origin.x,self.image2.frame.origin.y);
}
The 44 magic number value actually comes from the navigation bar :) Whereas the height of the status bar is 20 points.
If you want your image to cover the entire screen then you will need to either get rid of your status bar, or make your status bar translucent so that content can be displayed underneath.
If you don't set your status bar/navigation bar to translucent, then the point of origin 0,0 would start just underneath the bars as you are experiencing now.
status bar is set using
[[UIApplication sharedApplication] setStatusBarStyle: UIStatusBarStyleBlackTranslucent];
The navigation bar, if you have one displayed can be set using this
theNavigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent;
Only then will your following code display your content across the full screen
[self.image2 setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)]
This is because setting the bars to translucent will have have them displayed as overlays instead.
The 44 comes from the nav bar which takes up that much height

View background as the current set background image?

I'm developing an app which takes a common background for most of the views displayed on the screen, so let's say I have this background image for my app:
Now imagine I add a table view and I want my table view section view background to be the app background image specific part it should match in its current position. How do I achieve that effect? I tried setting alpha to 0 but obviously this is what happens when I scroll my table:
What I want it to look like always:
What happens when I scroll:
I also tried setting background image layer's mask property but since it only works for one view layer it's not the right thing to do in this case.
I know I'm not explaining myself really well, but I hope you understand at least what I want to do.
You can do this by cutting out the part of the image you need then setting it has the background for the nav bar.
Here is a category to cut out part of the image:
.h
#import <UIKit/UIKit.h>
#interface UIImage (Crop)
-(UIImage*)cropFromRect:(CGRect)fromRect;
#end
.m
#import "UIImage+Crop.h"
#implementation UIImage (Crop)
-(UIImage*)cropFromRect:(CGRect)fromRect
{
fromRect = CGRectMake(fromRect.origin.x * self.scale,
fromRect.origin.y * self.scale,
fromRect.size.width * self.scale,
fromRect.size.height * self.scale);
CGImageRef imageRef = CGImageCreateWithImageInRect(self.CGImage, fromRect);
UIImage* crop = [UIImage imageWithCGImage:imageRef scale:self.scale orientation:self.imageOrientation];
CGImageRelease(imageRef);
return crop;
}
#end
Then in your viewDidLoad:
//Cut out part of image where nav bar sits
UIImage *navBG = [[UIImage imageNamed:#"cVyuX.png"] cropFromRect:CGRectMake(0, 20, 320, 44)];
//Set nav bar image
[[UINavigationBar appearance] setBackgroundImage:navBG forBarMetrics:UIBarMetricsDefault];
//Remove gray seperator
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
I was able to produce this:
Set your tableView background to be clearColor and do the same for your tableViewCells. Then you must hide the separator lines.
tableView.backgroundColor = [UIColor clearColor];
//in your tableView cellForRowPath method
cell.backgroundColor = [UIColor clearColor];
cell.separatorStyle = UITableViewCellSeparatorStyleNone;

Popup displaying image on iPhone app?

I want to show an image in popup view which also contains the close button.
I have searched for that but I did not found any thing about that.
Please help me??
Just try out following simple way -
You can create one UIView that contains UIImageView and UIButton.
Whenever you want to show the the image just assign image to the UIImageView and and show the UIView.
And when you want to hide the the image just hide the UIView on pressing UIButton (i.e close button).
Hope this will help you.
try this for popup
1) ALPopup
2) BlureModelView
3) Ogactionchooser
4) Other and This
- (IBAction)btn:(id)sender {
UIView *contentView;
UIImageView *dot;
contentView = [[UIView alloc] initWithFrame:CGRectMake(0,0,300,350)];
contentView.backgroundColor = [UIColor whiteColor];
contentView.layer.cornerRadius = 5.0;
dot =[[UIImageView alloc] initWithFrame:CGRectMake(50,40,200,200)];
dot.image = [UIImage imageNamed:"DSC_0055.JPG.jpg"];
dot.contentMode = UIViewContentModeScaleAspectFit;
[contentView addSubview: dot];
[[KGModal sharedInstance] showWithContentView:contentView andAnimated:YES];
}
}
https://github.com/kgn/KGModal

Shadow in separate view from UIImage for dynamic adjustments

I would like to obtain this effect (http://stackoverflow.com/questions/7023271/how-to-adjust-drop-shadow-dynamically-during-an-uiimageview-rotation) but from a more complex image than just a red square ! If the link ever gets broken, it's a about how to adjust drop shadow dynamically during an UIImageView rotation.
So I tried implementing something but I just can't get the shadow in a separate layer... Here is my code, very simple, but doesn't work:
// here is my code
- (void)viewDidLoad {
[super viewDidLoad];
testView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:#"handNoShadow.png"]];
testViewShadow = [[UIView alloc] initWithFrame:testView.frame];
testViewShadow.layer.shadowPath = [[testView layer] shadowPath];
testViewShadow.layer.shadowOpacity = 1.0;
testViewShadow.layer.shadowOffset = CGSizeMake(10, 10);
testViewShadow.layer.shadowRadius = 5.0;
[self.view addSubview:testViewShadow];
[self.view addSubview:testView];
}
PS: i did #import
I do get an image but no shadow... =(
Any lead, help, code, link... is welcome !
Thanks
possible cause:
your testViewShadow.clipToBounds property is set to YES (should be NO)
your testViewShadow do the drawing of the shadow correctly but another UIView is on top and mask it. Check your Z order. Either the order in Storyboard/Nib file (or the order you added the subviews programmatically). Last in the list (or last one added) is on top. For my app I had to put the UIView that need a shadow last so that no other view mask it.

Resources