How to replace UINavigationBar with CustomHeader in iOS7 - iphone

I would like to use a Custom header instead of default UINavigationBar. I am able to do it well, until I encountered a condition to keep the backward compatibility with iOS6 too. I have my previous question here ,un-answered.
Recently for Facebook App, I can see in iOS7, the blue-color header bar well aligned. To me it looks like its a custom header, I am not sure. FaceBook-Header
Now the problem is that, I am stuck with implementation of my custom app header. My Custom header height is 48px which goes behind the "network status bar" on top & I am getting only approx 35pixel as the rest is behind the "network status bar" like this.
Here are my goals to achieve.
I want a custom header. - Done
I don't want to use UINavigationBar. - Done
I want the support for iOS 5.0 till 7.0 - Stuck
Here is what it looks when I am using Custom header
Here is what it looks with UINavigationBar
How I can make app headers to appear like "FaceBook header" with "Custom Header" without getting underneath the "top network Header bar". If I Increase the height of Status Bar, it will look odd in iOS6 & older, but fits well in iOS7. I want to choose the right approach.
Any expert help is highly appreciated.

You need to place UIToolbar in xib,
and add background image in toolbar,
self.navigationController.navigationBarHidden = YES;
[self.toolBar setBackgroundImage:[UIImage imageNamed:#"background.png"] forToolbarPosition:UIToolbarPositionAny barMetrics: UIBarMetricsDefault];
add bar button,
UIButton *facebookButton = [UIButton buttonWithType:UIButtonTypeCustom];
[facebookButton setImage:[UIImage imageNamed:#"facbookBarImage.png"] forState:UIControlStateNormal];
[facebookButton addTarget:self action:#selector(action:)forControlEvents:UIControlEventTouchUpInside];
[facebookButton setFrame:CGRectMake(0, 0, 53, 31)];
UIBarButtonItem *facebookBarButton = [[UIBarButtonItem alloc] initWithCustomView: facebookButton];
self.toolBar.items = [NSArray arrayWithObjects: facebookBarButton,nil];

After some Research on Compatibility, I have come across a working solution to make a Custom header with no UINavigationBar & achieving what I was looking for. Feel free to use this approach.
Here are my results : iOS7 and Older iOS.
The approach is to figure out edgesForExtendedLayout (available in iOS 7). If we are on iOS7 then decide the height of "Custom Header" (probably 10Pixel more than what we keep in older version, so as to pad the extra 10Pixel underneath the "Top Network status bar").
Figure out the iOS7 compatibility for edgesForExtendedLayout here
CGFloat y;
if ([self respondsToSelector:#selector(edgesForExtendedLayout)]) {
self.edgesForExtendedLayout = UIRectEdgeNone;
y= 58;
}else {
y = 48;
}
Make Custom header with height of y here
self.customHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, appDimensions.width, y)];
Custom buttons on customHeaderView here
self.sideMenuButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.sideMenuButton setFrame:CGRectMake(0, y-45, 45, 45)];
So Now if I run this on iOS7, I see my header with enough height of 48pixel (more than what we have in Human Interface Guidelines for Touch Area (44 x 44)) even being 10 pixel is underneath the "Top network status bar).
If I run this in iOS < iOS7, I will have my custom header of 48 Pixel, starting right beneath the "Top network status bar"
Hope this helps other.

Related

Button with background image - iPhone 5 resize issue

I have been looking everywhere on here and Google, but I still have this weird issue that I can't figure. I have an app pictures below, with 4 UIButtons that have a background image applied:
When I resize/run on the iPhone 5, the top button resizes in a very strange way:
How do I get all the UIButtons to resize the same way with the iPhone 5? Is it possible? Do I need to use a different method?
I really hope this is not a duplicate, but I am completely stumped. If I change the UIButtons around in other positions along the UIView, a different one will resize, or strange gap spacing will show up.... I don't understand. Thanks for any help!
EDIT: I am using iOS 6 on Xcode 4.5. I am testing on an iPhone 4S and an iPhone 5. I have AutoLayout checked. If I use Pin (just found it) I can get the UIButton to keep its height.
To clarify my question. I want the UIButtons to resize so they occupy the same percentage of the screen.... I want the proportions to be the same, instead of simply adding a bunch of empty space. I hope that make it more clear
One of the features you can use is called AutoLayout. Its provided with Xcode to make it easier adjusting things for the 4 inch screen. You can find a good example here: http://www.raywenderlich.com/20881/beginning-auto-layout-part-1-of-2
But as far as I know AutoLayout works only with iOS 6 which makes it "not so useful yet". I have been using a class called UIDevice, source of which can be found here: https://github.com/erica/uidevice-extension and check if the platform type is iPhone 5. I have it set up in a method which setups GUI when the view loads. Example of my implementation:
UIImage *backgroundImage;
if ([[UIDevice currentDevice] platformType] == UIDevice5iPhone)
{
//I have a 4 inch screen present
myButton.frame = CGRectMake(x, y, w, h); //Set the frame as you would like it to look on the iPhone 5
backgroundImage = [[UIImage alloc] initWithCGImage:[UIImage imageNamed:#"main_background-568h#2x"].CGImage scale:2.0 orientation:UIImageOrientationUp];
}
else
{
//I have a 3.5 inch screen present
myButton.frame = CGRectMake(x, y, w, h); //Set the frame as you would like it to look on the iPhone 3, 3gs, 4, 4s...
backgroundImage = [[UIImage imageNamed:#"main_background"] retain];
}
self.view.backgroundColor = [UIColor colorWithPatternImage:backgroundImage];
[backgroundImage release];
Hope it clears a bit.
you should firstly disable the use AutoLayout this option is under the "Show the file inspector"

How do you style iOS components?

I am just getting started in iOS development after working in Android since the early days and I am a bit confused on how you style/skin iPhone components.
I saw that there is a way to change the color for some components (is that what they are called?) in properties but how can I go even further?
For example, how could I be designing a custom button, or custom listview?
There are several elements here you are asking, so my answer might not be enough for everything you want.
You can for instance use this page here that give you a real nice tutorial for doing some customization to UI components:
http://www.raywenderlich.com/4344/user-interface-customization-in-ios-5
For UITableViews there are other steps you would have to take. For instance, this very good tutorial:
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
If you create custom UI elements to replicate standard UI elements in
all but appearance, you should instead consider using the appearance
customization programming interfaces available in iOS 5 and later.
via HIG
Which i suggest viewing this to get the best understanding of the interface builder
For a Button as an image:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [UIImage imageNamed:#"myFile.png"];
button.frame = CGRectMake(x, y, image.size.width, image.size.height);
[button setImage:image forState:UIControlStateNormal];
[myView addSubview:button];
or with the interface builder:
select "Custom Button" as the type and then select the image you want
from a drop-down menu.

Custom UIButton iphone

I want to change the color of my UIButton. I did this:
UIButton *alreadySubscriber = [[UIButton alloc] initWithFrame:CGRectMake(12, maxy-65, 262.0, 50)];
alreadySubscriber.layer.cornerRadius = 10.0f;
[alreadySubscriber setBackgroundColor:[UIColor orangeColor]];
[alreadySubscriber setTitle:#"Already a subscriber" forState:UIControlStateNormal];
The color of the button changes, but no longer see the effect of bright light booby top. how can I fix this?
We're unable to programmatically set this 'bubble effect' for the UIButton I'm afraid. The only way to go about it far as I can tell is to go for a custom button with an image (or two images for the normal and active states).
The resource Eugene put up earlier seems pretty good in fact.
I don't really know what kind of booby light are you talking about, but have you tried using images for your buttons? I'd suggest using two different images like those you can create here http://dabuttonfactory.com/.
You should create as a custom button and add the image/color as background.

Using UISegmentedControl as button

In my code I am using a UISegmentedControl as a "button" with only ONE segment and the momentary property set to YES. In versions of the SDK prior to iOS 4, this was not a problem, but it appears that now iOS 4 requires that there be at least 2 segments. The following code throws an exception:
NSArray *titles = [NSArray arrayWithObject:#"Button Title"];
myButton = [[UISegmentedControl alloc] initWithItems:titles];
and now in Interface Builder you cannot even create a UISegmentedControl with less than 2 segments. It logs the following error when building:
"The number of segments property of a segmented control must be greater than or equal to 2."
I'm kinda stumped. Any work arounds for this? I tried to create a UISegmentedControl with two buttons and then remove one programmatically and that "works" as it doesn't cause the app to crash. I get a button in iOS 3 and nothing in iOS 4. Any ideas?
Have you tried this:
[myButton removeAllSegments];
[myButton insertSegmentWithTitle:#"Press this" atIndex:0 animated:NO];
Really strange. It still works fine for me both in iOS4 simulator and device (this is a real working snippet from my code):
NSArray *laterContent = [NSArray arrayWithObjects: #"Maybe later", nil];
UISegmentedControl *later = [[UISegmentedControl alloc] initWithItems:laterContent];
CGRect frame = CGRectMake( 20,
98,
self.alert.bounds.size.width/2 - 30,
30);
later.frame = frame;
later.selectedSegmentIndex = -1;
[later addTarget:self action:#selector(laterAction:) forControlEvents:UIControlEventValueChanged];
later.segmentedControlStyle = UISegmentedControlStyleBar;
later.tintColor = [UIColor colorWithRed:130.0f/255.0f green:74.0f/255.0f blue:54.0f/255.0f alpha:0.8f];
later.momentary = YES;
later.alpha = 0.9;
It's not exactly a code-related solution but: I hit a similar issue and ended up drawing my own similar looking resources in Photoshop. It was not terribly difficult to do and removed a particular bad "code smell", IMO.
I found if you have a previous project with a single-segment UISegmentedControl, you can open both that project and your new one in Interface Builder and drag (or copy/paste) the single-segment UISegmentedControl to your new view controller. It will work fine in both your app and Interface Builder, just don't change the number of segments from 1 to anything else as it won't let you go back. I'm using Xcode 4.6.2 and iOS 6.
The editor in Interface Builder won't let you change the number of segments to be less than 1, but you can make a segmented control in IB by editing the .xib xml manually.
Right click on the .xib containing the segmented control
Choose Open As -> Source Code from the popup menu.
Find "<segments> which is the beginning of the xml array of segments. The whole thing should look like:
<segments>
<segment title="Segment 1 Title"/>
<segment title="Segment 2 Title"/>
</segments>
Just delete <segment title="Segment 2 Title"/> so there is only one segment element.
Right click the .xib again and choose Open As -> Interface Builder - iOS to go back to interface builder.
You should also probably set the segmented control to "momentary" mode.
I don't get any errors compiling or running this. Of course, this is a hack, and may break things in some circumstances or in a future iOS release.
Well two possibilities:
1) Create a button and the set background image as the single dot of the UISegmentedControl
If your SegmentedControl is a class variable just replace the #property
#property (nonatomic, retain) IBOutlet UIButton *button;
In the viewDidLoad-function add the following
-(void) viewDidLoad
{
[super viewDidLoad];
...
self.button = [UIButton alloc] init];
[self.button setBackgroundImage:[UIImage imageNamed:#"segmentedDot.png"] forState:(UIControlState)UIControlStateNormal];
}
2) Set the amount of segments to three of your UISegmentedControl and afterwards set the width to 20 - now only the dot in the middle will be shown.
Dont forget, if the user interacts with the UISegmentedControl, set the currentElement again to the second segment, else the dot will be in light grey instead of white state.
3) Place a button or a small view over the unwanted second dot of the UISegmentedControl in InterfaceBuilder. Make sure the backgroundcolor is even.
When you are using a button set the state for "user interaction" in attribute inspector to disabled. As type I would chose "custom" since you won't have some borders in your button ;)
Now male again sure, that always the first dot is the active Element.
However I think solution one should be the way you should go, since Apple thought something about it, when they disabled the 1-dot-SegmentedControl. Since you are using the Control as a button the Element you are looking fpr should be a button. ;)
There's no workaround in iOS 4. If you need this functionality, file a bug (enhancement request) at bugreport.apple.com.
You can also use removeSegmentAtIndex:animated:. If you create a segmented control in a storyboard or xib with two segments, you can remove one like this:
[self.sortButton removeSegmentAtIndex:1 animated:NO];

Inverting UIBarButtonItem "Play" for use as a Back Button?

Okay, simple enough.
I'm coding up a simple web view, and I'm providing a few Safari-like controls for navigation.
Play seems to be the obvious choice for the forward button, but I'd like to have a Back Button as well, as seen in several Apple and third party apps.
Is there a way to invert the icon, so that it points backwards, or are all the apps using this setup using images to replicate this functionality?
Unicode is your friend here.
Create a UIBarButtonItem (in Interface Builder or in code) and set it to "Custom" where you can enter text for the button.
Now use these Unicode characters to simulate the back & forward buttons:
◄ and ►
I use it in my apps and it looks great.
I know this was answered long ago, however just to add...
Yes, you can use Unicode but it does not look the same as the standard ios button. And if you have strict requirements to match ios look than you will need to at least make an image for the back button, in this case by simply downloading the play image and flipping it.
UIImage *image = [UIImage imageNamed:#"backButton.png"];
UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
[btnBack setImage:image forState:UIControlStateNormal];
btnBack.frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);
UIBarButtonItem * btnItem = [[UIBarButtonItem alloc] initWithCustomView:btnBack];
[btnItem addTarget:self action:#selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
// add it to your bar
self.navigationItem.leftBarButtonItem = btnItem;
(wrote it without spell checking... so beware of spelling errors that may have resulted)
// button images are here.
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
You could use atPeek to extract the play button png from an app that uses it, and then use any image manipulation program to flip it.