Swift Components Tour – UIButton

In this lesson

This chapter of the Swift Components Tour is the UIButton. Tap it to run code!

Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hello world! This is Kyle with Brax.tv and we are at another stop on the Swift Components Tour. Today’s stop is the UIButton. The UIButton is probably the most simple UI control. I say this because you pretty much tap the UIButton to run some code. Here’s what I’ve got going on in the app.


This top UIButton is basically here to show two things. One, that a button does not necessarily have to do anything, it can just sit there and look pretty. Which leads us to two, looking pretty. You can set an image, in this case a NimbleNoggin.io banner, to the buttons view. Since its not connected to any code and I haven’t edited any functionality yet, when you tap it, it still will flash and highlight like a normal button. That is something you that you can mess with, with the UIButton, customizing how it responds to a tap and it’s appearance in it’s different states. We can look at this bottom button which says do something awesome. We really want to do know what that something awesome is that we can do here. But the button is disable, the text is grayed out.  We click on it or tap on it, nothing happens.


These three buttons in the middle are some buttons that are actually hooked up to code. They are pretty self explanatory but we will tap through them anyway. The first one, randomize background color. You tap it and the background color randomizes. Buttons have a nice white border that you can see when the background color is randomized. The next UIButton says add background image. We tap that and I’m basically adding this same background image that you see in the MasterViewController table menu to this view. Also, if we randomize the background color again, it will cover that up. This change title button, I don’t really remember what it does but we can see what happens. Hmmm, let’s just put that back.


Let’s just check out the storyboard. It is right here, poking out from behind the app a little bit. You can see my five buttons. For each button I have dragged out a UIButton onto the ViewController. Normally in iOS 8 the UIButton does not have any borders or background colors, or anything. It is just text. What I’ve done with each button so that we can see it on all of the different randomized background colors is that I’ve added a UIView background view, I’m doing air quotes here, background view to each UIButton so that it has a black backdrop behind the button. These four buttons down here are actually normal UIButtons with no background color, or image, of anything, just like this but displayed over this black background. This bottom button all we’ve done differently is uncheck this enabled box so that the text is grayed out and the button won’t respond to any touch events. What’s different about the top button is that it is resized to be bigger, basically to fit the aspect ratio of the image that I’m using. Which is just an image that we have in our XCAssets folder right here. How about some code?


Most of the code is responding to the touch events of the UIButtons but on viewDidLoad I’m just doing some view prettifying, making it look a little nicer. Here we have an IBOutletCollection with all the black button backgrounds. What I’m doing to them is setting a white border to go around them so that they do stand out a little more on the different colored backgrounds. And setting the layers corner radius property to a value other than the default zero. They do have a little bit of a rounded edge. In our methods that each buttons is sending a message to, this first one randomizes the background color, we’re setting the view.background color to a random UI Color. This is just one way to get a random background color. You can do that a few different ways, but I’m basically dividing a random number by UINT32 maximum value, which will give us a value between zero and one, which you normally use when building a UIColor.  We’re doing that for red, green and blue, and setting the alpha as one, and casting each of those to a CGFloat, which is what these parameters except for their arguments.


With the next button, add background image, we’re not doing anything with the UIImageView, which is usually where you might see a background image. There is a way to use UIColor and UIImage together so that it will display your image at its natural resolution and just repeat that going to the right and down. We can actually see the image repeating going down but not to the right. As you can tell right here, and right here, there’s a line going across the screen where the bottom of the first image in the pattern meets up with the top of the next image in the pattern. They don’t perfectly connect so you do see a little bit of that break up there.


By far, the most interesting method and button in this view controller is the change title button. I didn’t mean for it to surprise anyone, and I know it did, it was way out there, but what we do when this button is pressed is if the title matches what the title is supposed to be then change the title to butts. Otherwise, set it back to what the title is supposed to be. Basically we’re toggling the title between these two possible great titles for this view controller. Thanks for watching!

Additional Info

Register to get access to additional resources and info.