Swift Components Tour – UISegmentedControl

In this lesson

  • UISegmentedControl basics
Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hi, Kyle here with Brax.tv. On our next stop on the Swift Components Tour, the UISegmentedControl. A segmented control is pretty much iOS’s radio button. That means that when you choose a value out of the choices, then all other choices are deselected. On older radios when you push the number one through six, say that the number one is pushed in, like this, then you change the station pushing the number three, then the number one will pop back out. So the only selected radio button is three, or in this case blue. It’s helpful when you have a small array of choices or options for a user and you only want them to choose one. The UISegmentedControl comes with plenty of customization options but here these white rounded rect segmented buttons are just the default look for the UISegmentedControl.


What I’ve done in this view controller to demonstration what the UISegmentedControl does, here at the top you can select a base color, either white or primary colors. At the bottom you select a mixing color, which is again white or primary colors. Everybody knows when you mix red and blue you get violet. Blue and blue you still get blue. Blue and yellow I always thought you were supposed to get green but here it is grey. And black text looks like an ugly yellow color. I’m going to have to call up one of my old art teachers and see what’s going on there. Every other combination seems to work fine for me, except blue and yellow is grey. I don’t understand it. But that’s not important, we’re not here to talk about primary colors. We are here to look at the storyboard.


The storyboard is fairly self explanatory. It looks pretty much how it does in the app, with both colors set to white. You can see here that in the storyboard we already have each segmented button populated with our options, we just did that up here in the attribute inspector. Since this is pretty simple let’s just look at the code and see how we’re working with the colors.


You can see we have a reference to both of the segmented buttons. And something you might not have noticed in the storyboard, that I’m calling the mixing view. The mixing view is just an overlaid UIView that’s taking up the same size as the background view. Or the view controller’s view. What’s happening in this baseSegmentDidChange method, which is on a value did change event from this first segmented control, is we’re setting the view controller’s view background color to the base segmented control’s selected index to this array of colors I have here. This array of colors I just set up to match the same colors that the segmented control has. You can see we selected blue here and we’re setting the view’s background color to the selected index of two. The index of two in this array is a blue color.


We’re doing something pretty similar in this mixing segmented control here, except when we select a color, here we selected red, we’re setting the mixing views background. Remember the mixing view is an overlaying UIView covering the entire background view of the view controller. We’re setting that to red with an alpha of 0.5 so it sort of gives the illusion of mixing the two colors without actually doing any math to mix them. And again, it works pretty well except yellow and blue. Who knows what’s going on there. Thanks for watching!