Skill Level Beginner
- [Narrator] You've probably used the segment control before, like I have here in the example file on the bottom. It's great for some simple uses, but lacks flexibility. Besides using only text or single colored icons, it doesn't' even work in vertical. Let's look at another solution, using button arrays. I've set up for you a vertical staff view of buttons, though I could've laid this out, on a layout anywhere on this view. Open up the assistant editor.
I've hooked up everything for you but the buttons. So control drag from the Pizza button, to the assistant editor. While you could use the stack view arranged subviews array, a more flexible option is a collection of outlets with the outlet collection selection. Now, since this is actually a stack view, I could use the arranged subviews array that's part of the stack view, but to make this flexible and you can use it with anything outside of a stack view and just do straight out of layout, I'm going to do it a different way.
There's another kind of outlet here called an outlet collection, and I'm going to select that. That's actually an array of outlets. And I'm going to name it Dessert Selection, like so, and it's a type UIButton, and I'm going to connect it. And now what I can do is take the connector there, and I'm going to drag it to each one of the buttons. So I select all the buttons in there.
And now we have a collection in an array of buttons. Now you've probably done this before, but you can do sort of the same thing with an action, and make it a collection of actions. So again, I'm going to control drag from Pizza, and this time, I'm going to make an action, going to make it didSelectDessert, type, and we definitely want UIButton here, and go ahead and connect that, and again, I can just drag from here to each one of my buttons, that way I have them in the correct order, and I've got it set up.
So now I've got a collection of buttons for an outlet, and a collection of buttons for an action. With that, I can close up the assistant editor, I'm going to head over to the View Controller, and close all this up. And what I'm going to do, in our code here, is set the rest of this up. Each button now has two states, selected and deselected. So what we're going to do is deselect everything every time we select a dessert, and I set up a method for that already called allDeselected, which I'll write in a minute.
And then, I'm going to select the Dessert button that I selected, so I'm going to do select Dessert button and that will be sender. And that's the key thing, now how you go about doing that, that changes. Now the power of that array shows up here, in the deselection. I can iterate through the buttons to shut them all off, which in this case, I'm going to add a drop shadow, which I made for you in the bottom here, and what we'll do is, we'll have a drop shadow that will look like the button is floating when it's off and it'll be behind the button if it's close to surface which means you've selected that button.
So for all the selection, what I'm going to do is just do four button in dessertSelection, and I'm just going to put the shadow on for button. Selecting a Dessert button will be just shadowOff, and that gives the selected button a pressed down look. All right, with that, we'll finish it off by just deselecting all my buttons, and for that, I'm going to go down here for viewDidLoad, and I'm going to do an allDeselected to initialize everything correctly.
Now I can go ahead and run this, I'm going to run an iPhone XR, so go head and run. It'll build and then load the simulator, and you'll see that we've got a drop shadow behind each one of the buttons and if I push a button, it looks like it depresses. So a nice, subtle, cool way of selecting buttons. But of course, it doesn't do anything yet, so we're going to have to try to make it do something, and for that we're going to need another function called selectedIndex.
So I'm going to stop this, and just above viewDidLoad here, I'm going to add another function selectedIndex. Selected index, and I'm going to make an optional integer and I'll show you why in a second, like so. What that will do will be return optional index of our selected button, and the way I'm going to do this, I'm going to use an index where with a predicate that says something about the button being selected.
In my case, I have a shadow radius that I can use, it can be something else in your button. It could be a color or something else, depending on how you're going to design this button. It doesn't have to be any one particular thing. So what we're going to do is do return, and I'm going to do dessertSelection, and I'm going to find the index, from my dessertSelection, where and that needs a predicate, so I'm going to put in here a closure, that starts with a button that returns bool in and what'll be is button dot layer shadow radius equals one point zero which happens to be, if you look down here, the shadow off shadow radius.
So that's when I'm going to do setup, if this comes unfounded, it'll be nil, which is the way that index works, and you can see that in the array tricks, tip if you want to go look on back a couple weeks ago. Now what I can do with this, is then go back up to didSelectDessert here and make some changes, and I'm going to change the label's text 'cause I made a selection label here and since everything is going to be optionals, I'm going to, first, unwrap them.
So we do an if let selection equals selected index comma, and then unwrap the text. If let text equals sender dot title label dot text, if both of those can be unwrapped, go ahead and change the selection label dot text, and I'm going to make that quote number, and I'll put my selection in here.
Now, I'm going to do this for a user and not for a developer, as developers can start things with zero. Users like to start things with one, so I'm going to change this to one through four instead of zero through three and so, I'll add one in this case just for user friendliness, and then I'll add the text, so I have which selection it is. Alright, with that in place, I may want to worry about the case where I don't have any selection, and so, I'm just going to put an else here and selection label dot text equals no selection, which shouldn't happen, but it's always good to cover for bugs, and go ahead and run that.
Now if I push Mochi button, I get number two Mochi, and number three Rosettes, number four Napoleon, and there's my dessert pizza, and you can see its all working. This was a simple version of what you can do with an array of buttons. Unlike the segmented control, you can arrange this anyway you can arrange a button, and you can format it and change its attributes any way you do with a button, so you get a huge amount of flexibility in your choice of controls.