TTAlertView is a drop-in replacement for UIAlertView that allows the developer to customize the presentation of an alert. TTAlertView uses the familiar interface of UIAlertView, so you don’t have to worry about rewriting any of your code – just drop it in, add some assets, and -bam!- you have a unique, customized alert view for your app!
Using TTAlertView is simple. TTAlertView uses the familiar
show methods to create and display your alert view. From there TTAlertView handles laying out and animating the view.
Lets see some code:
1 2 3 4 5 6 7 8 9
… which gives you this:
Of course, this alert hasn’t been customized at all, so it looks lame. Let’s see what adding in some custom images can do for us…
To customize this alert view, we’re going to set the background image for
containerView (the box containing the title, message, and buttons). Since TTAlertView handles the layout and, most importantly, the sizing of the
containerView, using a resizable UIImage here is best practice – this guarantees that no matter the size of the
containerView, the image will be stretched appropriately to fit.
We’re also going to add some button images using TTAlertView’s
setButtonBackgroundImage:forState:atIndex: method. With this method we will set images for the button’s normal and highlighted states, again using resizable UIImages. (If you’re using textured button images or button images with text baked in, worry not – we’ll cover how to use these types of assets in a future blog post!)
Here’s some more code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
… and voilá!
We’re done here
A quick shout-out to one of our favorite clients: Go Try It On. GTIO provided the assets used in the stylized alert example seen above – the assets were taken from the custom alert view in GTIO’s app, which is where TTAlertView was pioneered!
This is just a taste of TTAlertView’s potential. In future posts we will cover more ways to use TTAlertView – like using fixed-size images, tweaking the layout, and supplying custom view hierarchies. Stay tuned!