100 days of SwiftUI - Day16, Day17, Day18

드디어 본격적인 보이는? 프로그램의 시작!. SwiftUI 를 이용해, 뿜빠이 프로그램을 만들었다.

//
//  ContentView.swift
//  WeSplit
//
//  Created by HanTJ on 11/16/24.
//

import SwiftUI

struct ContentView: View {
    @State private var checkAmount = 0.0
    @State private var numberOfPeople = 2
    @State private var tipPercentage = 20
    @FocusState private var amountIsFocused: Bool
    @State private var totalAmount: Double = 0
    @State private var newTipPercentage: Double = 0
    
    let tipPercentages = [10, 15, 20, 25, 0 ]
    
    var totalPerPerson: Double {
        let peopleCount = Double(numberOfPeople + 2)
        let tipSelection = Double(tipPercentage)
        
        let tipValue = checkAmount / 100 * tipSelection
        let grandTotal = checkAmount + tipValue
        totalAmount = grandTotal
        let amountPerPerson = grandTotal / peopleCount
        
        return amountPerPerson
    }
    var body: some View {
        NavigationStack{
            Form {
                Section {
                    TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currency?.identifier ?? "USD"))
                        .keyboardType(.decimalPad)
                        .focused($amountIsFocused)
                    
                    Picker("Number of people", selection: $numberOfPeople) {
                        ForEach(2..<100) {
                            Text("\($0) people")
                        }
                    }
                    .pickerStyle(.navigationLink)
                }
                
                Section("1인당 금액") {
                    Text(totalPerPerson, format: .currency(code: Locale.current.currency?.identifier ?? "USD" ))
                }
                
                Section("How much tip do you want to leave?") {
                    Picker("Tip percentage", selection: $tipPercentage) {
                        ForEach(tipPercentages, id: \.self ) {
                            Text($0, format: .percent)
                        }
                    }
                    .pickerStyle(.segmented)
                    
                    Slider(value: $newTipPercentage, in: 0...100, step: 1.0)
                }
                
                Section("전체 금액") {
                    Text(totalAmount, format: .currency(code: Locale.current.currency?.identifier ?? "USD" ))
                }
            }
            .navigationTitle("WeSplit")
            .toolbar {
                if amountIsFocused {
                    Button("Done") {
                        amountIsFocused = false
                    }
                }
            }
        }
    }
}

#Preview {
    ContentView()
}

 

전체 금액을 입력하고, 사람수를 입력하고, 양키답게 팁을 선택하면 1명당 얼마를 내야 하는지 보여주는 프로그램이다. 

 

struct 로 뷰는 구현하기에 할당해야 하는 변수들은 @State 를 붙여줘야 한다. 

@FocusState로 focus가 되는것에 대한 변수선언도 가능 ( focus가 일어나는 ui 에 .focused 를 이용해서 바인딩! )

NavigationStack 으로 상단 부분이 침범되지 않게 컴포넌트를 감쌀수 있다. 

Form으로 입력폼들을 감싼다

.toolbar 옵션으로 상단부분에 무언가 추가 가능 <- 여기서는 Button 을 넣었다. 

Section 으로 컴포넌트들을 그룹짓는다. 제목도 넣을 수 있음

TextField 값을 입력받는데 쓰는 컴포넌트, 포맷을 주어서 보이는 형식 지정 가능

.속성으로 입력시 표시되는 키보드 설정 가능 ( .keyboardType(.decimalPad) )

Text 일반적인 값 표시 하기

Picker 선택해야 하는 것들을 표시할때 씀. 

.pickerStyle(.navigationLink) 별도 창에서 선택창 보여줌

Slider 슬라이더 표기 step은 Double 만 되니, 바인딩 변수는 Double로 선언해야 되더라..