Recently when working on an iOS project our awesome design team created a neat element, but I was concerned it would be a lot of work to create as nothing in the standard UIKit really looked like it.
See that neat button based selection bar in the design. I believe it was inspired by facebook’s new status screen seen here.
After a quick look through cocoa controls, and github such a thing didn’t exist as prebuilt component or I don’t know what the terms are to search for it so I set out to create it. At first I considered doing the whole thing as a custom UIView, however this seemed tedious, then it struck me, I could create this as a UIToolbar. Basically we just need a strip of the toolbar background from our design and we can use that in a custom UIToolbar subclass to draw it with our custom image.
Take a 2 pixel slice of your custom toolbar background. From this image you will want to save one version at 100% and one at 50% assuming that you are designing for retina.
Create new subclass of UIToolbar and add the following drawRect code:
- (void)drawRect:(CGRect)rect UIImage *image = [[UIImage imageNamed:@"toolbar_bg.png"] stretchableImageWithLeftCapWidth:1 topCapHeight:0]; [image drawInRect:CGRectMake( 0, 0, self.frame.size.width, self.frame.size.height )]; @end
Basically we are overriding the normal drawing of the gradient by drawing our custom image. The stretchable image allows use to use a small slice that gets repeated rather than an image the entire size of our component.
You may notice that the toolbar is not drawn with our custom background yet. The drawRect code executes at runtime so you want see the custom drawing until the program is run.
Below is the finished product running in the simulator, looking and functioning very similarly to the design.
Finally we can make the toolbar follow our keyboard by setting up a UITextField and setting the input accessory as our toolbar.
This will give the toolbar the effect of sitting on top of the keyboard.