Ch7. Controls & User Input

Ch7. Controls & User Input

Power to the user: the TextField

title과 text binding으로 생성할 수 있다.

title: placeholder

binding: textfield에 보이는 텍스트와 프로퍼티를 연결

@State var name: String = ""

...

TextField("Type your name...", text: $name)

Spacer

VStack {
  Spacer() // <-- 1st spacer to add
  
  WelcomeMessageView()
  TextField("Type your name...", text: $name)
  
  Spacer() // <-- 2nd spacer to add
} .background(WelcomeBackgroundImage())

Spacer적절하게 사용해서 여백조정하기

Styling the TextField

기본적으로 제공되는 TextFieldStyle을 따르는 style이 몇개 있음

/// A specification for the appearance and interaction of a text field.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol TextFieldStyle {
}

• Default
• Plain
• RoundedBorder

TextFieldStyle을 따르는 커스텀 Style도 물론 제작가능

struct KuchiTextStyle: TextFieldStyle {
    public func _body(
        configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(EdgeInsets(top: 8, leading: 16,
                                bottom: 8, trailing: 16))
            .background(Color.white)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(lineWidth: 2)
                    .foregroundColor(.blue)
            )
            .shadow(color: Color.gray.opacity(0.4),
                    radius: 3, x: 1, y: 2)
    }
}

// 사용예시
TextField("Type your name...", text: $name)
  .textFieldStyle(KuchiTextStyle())

Creating a custom modifier

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol ViewModifier {

    /// The type of view representing the body.
    associatedtype Body : View

    /// Gets the current body of the caller.
    ///
    /// `content` is a proxy for the view that will have the modifier
    /// represented by `Self` applied to it.
    func body(content: Self.Content) -> Self.Body

    /// The content view type passed to `body()`.
    typealias Content
}

struct BorderedViewModifier: ViewModifier {
    
    func body(content: Content) -> some View {
        content
            .padding(EdgeInsets(top: 8, leading: 16,
                                bottom: 8, trailing: 16))
            .background(Color.white)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(lineWidth: 2)
                    .foregroundColor(.blue)
            )
            .shadow(color: Color.gray.opacity(0.4),
                    radius: 3, x: 1, y: 2)
        
    }
}

// View extension에서 ModifiedContent과 조합해서 쓰면 꿀맛
extension View {
  func bordered() -> some View {
    ModifiedContent(
      content: self,
      modifier: BorderedViewModifier()
    )
  }
}

ObservableObject 프로토콜을 따른다는 것은

• View안에서 사용할 수 있다.

• 그리고 State가 변하면 View업데이트를 시킬 수 있다.

 

@EnvironmentObject 속성은 앱 전체에 걸쳐서 사용하는 값이라는 뜻이다.

Ch9에서 ObservableObject와 @Environment에 대해서 다룰 예정

 

Reacting to input: validation

보통 우리는 value값의 변화를 subscribe하여 validation을 하거나 delegate를 통해서 validation했다. ㅇㅈ?

SwiftUI에서는 좀 다르다. Modifier를 통해서 validation을 한다. 끝이다.

.disabled(!userManager.isUserNameValid())