Now we’re going to add a 2d picker view to our app, however this time we favor some thing barely different: we choose a segmented control. This is a specialised variety of picker that indicates a handful of selections in a horizontal list, and it works first-rate when you have solely a small decision to pick out from.

Our structure already has two sections: one for the quantity and wide variety of people, and one the place we’ll exhibit the remaining end result – it’s simply displaying checkAmount for now, however we’re going to restore it soon.

In the center of these two sections I’d like you to add a 0.33 to exhibit tip percentages:

Section { Picker("Tip percentage", selection: $tipPercentage) { ForEach(0 ..< tipPercentages.count) { Text("\(self.tipPercentages[$0])%") } } }

That counts thru all the selections in our tipPercentages array, changing every one into a textual content view. Just like the preceding picker, SwiftUI will convert that to a single row in our list, and slide a new display of selections in when it’s tapped.

Here, though, I prefer to exhibit you how to use a segmented manage instead, due to the fact it appears a good deal better. So, please add this modifier to the tip picker:

.pickerStyle(SegmentedPickerStyle())

That should go at the end of the picker’s closing brace, like this:

Section { Picker("Tip percentage", selection: $tipPercentage) { ForEach(0 ..< tipPercentages.count) { Text("\(self.tipPercentages[$0])%") } } .pickerStyle(SegmentedPickerStyle()) }

If you run the application now you’ll see matters are beginning to come together: customers can now enter the quantity on their check, pick out the range of people, and pick how an awful lot tip they desire to go away – now not bad!

But matters aren’t pretty what you think. One hassle app builders face is that we take for granted that our app does what we meant it to do – we designed it to remedy a unique problem, so we mechanically understand what the whole lot means.

Try to seem to be at our consumer interface with sparkling eyes, if you can:

“Amount” makes feel – it’s a field customers can kind a wide variety into.
“Number of people” is additionally notably self-explanatory.
The label at the backside is the place we’ll exhibit the total, so proper now we can skip that.
That center section, even though – what are these percentages for?
Yes, we be aware of they are to choose how an awful lot tip to leave, however that isn’t apparent on the screen. We can – and ought to do better.

One choice is to add some other textual content view at once earlier than the segmented control, which we should do like this:

Section { Text("How much tip do you want to leave?") Picker("Tip percentage", selection: $tipPercentage) { ForEach(0 ..< tipPercentages.count) { Text("\(self.tipPercentages[$0])%") } } .pickerStyle(SegmentedPickerStyle()) }

That works OK, however it doesn’t seem to be awesome – it appears like it’s an object all by way of itself, as a substitute than a label for the segmented control.

A a great deal higher concept is to adjust the part itself: SwiftUI lets us add views to the header and footer of a section, which in this occasion we can use to add a small explanatory prompt. In fact, we can use the identical textual content view we simply created, simply moved up to be the area header as a substitute than a unfastened label internal it.

Here’s how that appears in code:

Section(header: Text("How much tip do you want to leave?")) { Picker("Tip percentage", selection: $tipPercentage) { ForEach(0 ..< tipPercentages.count) { Text("\(self.tipPercentages[$0])%") } } .pickerStyle(SegmentedPickerStyle()) }It’s a small change to the code, but I think the end result looks a lot better – the text now looks like a prompt for the segmented control directly below it.