[Music] This app will allow user input with a date picker and two steppers. Combined, these will allow the user to

specify their desired wake-up time, usual sleep duration, and daily coffee consumption. We'll start

by adding three properties to store this information for the SwiftUI views. We'll declare `@State private var wakeUp = Date.now`

like that. Then, `@State private var sleepAmount = 8.0` and `@State private var coffeeAmount = 1`. Now, inside the `body` property,

we'll place three sets of components wrapped in a `VStack`, sorry, a `NavigationView`. So we'll start with that. Replace the default code with this:

a `NavigationView` with a `VStack` inside. This will say, "When do you want to wake up?" with a font of

`headline`. Then we'll have a date picker like this, saying "Please enter a time," with its selection bound to `$wakeUp`.

I'm going to make sure we display only the hour and minute components; we don't care about the exact date, of course.

And then I'll hide the labels for that date picker. There's more code to come inside

that `VStack`, like so. We've specified hour and minute display components. We care about the time

someone wants to wake up, not the day, obviously. And labels are hidden; we don't get that extra label for the picker, but

it's still there for VoiceOver and similar accessibility features. Next, we're going to add a stepper so users can choose

roughly how much sleep they want. We'll give this an `in` range of 4 through 12 and a step of 0.25, so quarter-

hours. We have a range of sensible values here. If we combine that with a formatted method, we can get rid of all those extra

zeros and just show 8 or 8.5 and similar, and so on.  More to come in comments.

I'm going to say we have a text of the desired amount of sleep, again font of headline, and then a

stepper. We'll do sleep amount, do formatted... oops, formatted. There we go. Uh, with hours in the value of dollar sleep

amount in the range of 4 through 12 and a step of 0.25, so quarter-hour steps.

Every single time, finally we're going to add one last stepper and label to handle how much coffee they drink. This time we'll use a

range of 1 through 20 because surely 20 cups a day is enough for anyone. Inside the VStack we're going to say

text: "Daily coffee intake", again font of headline, then our final control that's a stepper. So, stepper with the title of

coffee amount, cups, like that. Uh, that'll be bound to the value of coffeeAmount in the range of 1

through 20, like so. The final thing we're going to add is a button to let us just calculate the

best time they should go to sleep. We could do this with a simple button at the end of our VStack right here, but to

spice things up a little bit, we're going to put a button in the title bar instead. And so first we need an actual method to

call. Uh, so we're going to make a new method below our view body down here, called `func calculate`

bedtime, like that. And now we'll use the toolbar modifier to add a button to that navigation bar. So we'll say here, uh, we

got toolbar with button: "Calculate", action: calculateBedtime. And while we're here, we're also going to add a... put that in the wrong thing.

Sorry, my mistake. That should be in the VStack, not the navigation stack. It should be... uh, there. Uh, we'll also add a

Navigation title to the top bar here, which will be, uh, like this. Better rest, that's our little view here, as you

can see the buttons at the top right corner. By default, in iOS, um, it'll automatically move to the top left

corner for right-to-left languages, but that's it. And that's, at this point, our basic UI done. It won't do anything

yet, because, of course, we haven't filled in this calculated bedtime method just yet, but at least the UI is good enough

Building a basic layout – BetterRest SwiftUI Tutorial 5/7

I'm a full-time Swift author and speaker, and I run Hacking with Swift – the world's largest site dedicated to teaching developers how to build apps with Swift and SwiftUI. I've written books about iOS, macOS, watchOS, and much more – I enjoy hacking around with Swift regardless of the platform, and love passing on what I learned to others.

For more information you can visit my site at hackingwithswift.com, or follow me on Twitter @twostraws.

Paul Hudson

날짜 선택기와 두 개의 스테퍼를 사용하여 사용자 입력을 받는 앱

원하는 기상 시간, 평소 수면 시간, 일일 커피 섭취량을 지정

`@State` 변수를 사용하여 `wakeUp`, `sleepAmount`, `coffeeAmount` 속성 선언

`NavigationView` 안에 `VStack`을 사용하여 UI 구성

`NavigationView`와 `VStack`을 사용하여 레이아웃 구성

날짜 선택기를 사용하여 기상 시간 설정 (`$wakeUp`에 바인딩)

시간과 분만 표시하도록 설정, 날짜는 표시하지 않음

레이블 숨기기 (접근성 기능 유지)

UI 구성: 수면 시간 및 커피 섭취량 설정

스테퍼를 사용하여 수면 시간 설정 (4~12시간, 0.25시간 단위)

텍스트와 스테퍼를 사용하여 원하는 수면 시간 표시

스테퍼를 사용하여 일일 커피 섭취량 설정 (1~20컵)

텍스트와 스테퍼를 사용하여 일일 커피 섭취량 표시

UI 구성: 계산 버튼 및 탐색 바 설정

계산 버튼 추가 (`calculateBedtime` 메서드 호출)

탐색 바에 버튼 추가 (`toolbar` 수정자 사용)

기본 UI 완성 (계산 기능은 아직 구현되지 않음)

다음 단계: `calculateBedtime` 메서드 구현

Building a basic layout – BetterRest SwiftUI Tutorial 5/7

Building a basic layout – BetterRest SwiftUI Tutorial 5/7

스크립트