ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Ch7. Controls & User Input
    Ray Wenderlich/SwiftUI 2021. 2. 7. 20:12

    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())
    

    'Ray Wenderlich > SwiftUI' 카테고리의 다른 글

    Ch12. Conditional Views  (0) 2021.02.14
    Ch11. Lists & Navigation  (0) 2021.02.07
    Ch9. State & Data Flow  (0) 2021.02.07
    Ch8. Introducint Stacks & Containers  (0) 2021.02.07
    Ch7. Controls & User Input  (0) 2021.02.07
    Ch6. Intro to controls: Text & Image  (0) 2021.02.07

    댓글 0

Designed by Tistory.