More Eye Candy Goodness
One of my favorite things about iPhone ermmm iOS Apps is the hot UI's - I also love to bite these looks and recreate them :) One of the hot trends right now is the Raised / Custom center button UITabBar.
DailyBooth's Custom UITabBar
Instagram's Custom UITabBar
Path's Custom UITabBar
So again this is a super cool effect that is easy to pull off and adds alot of eye candy to your app. It is especially good for apps that have a "main" purpose in these three examples it's taking a photo. But it could just as easily be posting a message, checking in to a new location, scanning a QR code, whatever your hear desires.
So What Exactly Are They Doing?
As you can tell from the screen shots these all look like the standard UITabBar except for the middle button. Now out of the box the UITabBar excepts UITabBarItems and unlike UIButton there is no API that allows us to pass in a custom View to be used. Now while we could go about recreating the whole UITabBar to do what we want, why not use the standard one and then just add the center button to the stand UITabBar's view. That is a much simpler option :)
ZOMG That's So Simple, Now Where Is The Code
So first thing I did was subclass UITabBar, that way I get all the other functionality for free. In the constructor I pass in a few parameters. The first is the normal image I want to use for the Center Button, second it the image I want to use for the highlighted (touched) state of the Center Button and last is a delegate of the code that I want to execute when the center button is pressed. That looks like this:
1: public UIRaisedCenterButtonTabBar (UIImage normal, UIImage highlighted, NSAction tapped) : base ()
2: {
3: normalState = normal;
4: highlightedState = highlighted;
5: if (tapped != null)
6: Tapped += tapped;
7: }
8:
as you can see I then set some variables based on what I pass in. Most of the magic is going to happen in the ViewWillAppear routine, so let's override that and put in our special sauce. First we new up a UIButton of the custom type. Set our two images (normal and highlighted). And as you saw in our examples not all of these buttons are going to be raised, some of them are just going to be custom. So we calculate the height difference between the images we passed in and the standard UITabBar frame, if it's the same or smaller, we set our Center Buttons "Center" to that of the UITabBar, otherwise we calculate the offset. We hook up our Tapped event to the TouchUpInside of our button. I went with the TouchUpInside so that we could also see the Highlighted image and then fire our code. Finally Add our center button to the UITabBar's view and make sure that we bring it to the front.
1: public override void ViewWillAppear (bool animated)
2: {
3: base.ViewWillAppear (animated);
4:
5: if (centerButton == null){
6:
7: centerButton = UIButton.FromType(UIButtonType.Custom);
8: centerButton.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleLeftMargin | UIViewAutoresizing.FlexibleBottomMargin | UIViewAutoresizing.FlexibleTopMargin;
9: centerButton.SetImage(normalState, UIControlState.Normal);
10: centerButton.SetImage(highlightedState, UIControlState.Highlighted);
11: centerButton.Frame = new RectangleF(0,0,normalState.Size.Width, normalState.Size.Height);
12: float heightDiff = normalState.Size.Height - TabBar.Frame.Size.Height;
13: PointF center = TabBar.Center;
14: if (heightDiff < 0 ) {
15: centerButton.Center = center;
16: }
17: else {
18: center.Y = center.Y - heightDiff /2.0f;
19: centerButton.Center = center;
20: }
21:
22: if (Tapped != null){
23: centerButton.TouchUpInside += delegate(object sender, EventArgs e) {
24: Tapped();
25: };
26: }
27: this.View.AddSubview(centerButton);
28: this.View.BringSubviewToFront(centerButton);
29: }
30: }
Now we are almost done; but if we run the code at this point we will see that rotating our iDevice our shiny new Center Button will disappear behind the UITabBar, thank goodness that's an easy fix :). Let's override the DidRotate routine, this routine lets us know that we have in fact rotated, and make sure that we bring our Center Button view to the front.
1: public override void DidRotate (UIInterfaceOrientation fromInterfaceOrientation)
2: {
3: base.DidRotate (fromInterfaceOrientation);
4:
5: if (centerButton != null){
6: this.View.BringSubviewToFront(centerButton);
7: }
8: }
This is what it looks like
That Was Easy!
So here is another super easy way that you can give your iOS apps some more flare. Make sure you check out the DailyBoothCustomTabBar code over on
my github Fork it, make it improvements, use it to make your apps sexy!
Original Concept by Peter Boctor over at
iDevrecipes
