05 ~ 06. Scroll View & Form

Scroll View

---

struct View_Group: View {
   var body: some View {
       VStack {
           Group {
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
           }
           .font(.largeTitle.bold())
           .foregroundColor(.red)

           Group {
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
           }
           .font(.largeTitle.italic())
           .foregroundColor(.yellow)

           Group {
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
               Text("Hello, World!")
           }
           .font(.largeTitle.monospaced())
           .foregroundColor(.green)
       }
   }
}

SwiftUI가 제공하는 대부분의 View는 Scroll을 기본적으로 지원하지 않는다.
따라서 위와 같이 화면을 벗어날 만큼 많은 View가 Scene에 존재해도 이를 확인할 방법이 없다.

struct View_Group: View {
   var body: some View {
       ScrollView {
           VStack {
               Group {
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
               }
               .font(.largeTitle.bold())
               .foregroundColor(.red)

               Group {
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
               }
               .font(.largeTitle.italic())
               .foregroundColor(.yellow)

               Group {
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
                   Text("Hello, World!")
               }
               .font(.largeTitle.monospaced())
               .foregroundColor(.green)
           }
       }
   }
}

SwiftUI는 이를 Scroll View에 Embed 하는 방식으로 해결한다.
ScrollView가 제공하는 속성은 다음과 같다.

• Axes
  '.vertical'과 '.horizontal'로 스크롤의 방향을 지정할 수 있다.
• showIndicators
  'true'와 'false'로 스크롤바의 표시 여부를 지정할 수 있다.

ScrollView

Apple Developer Documentation

 

Form

---

Form은 값을 입력하는 창을 의미한다.

UIKit으로 이러한 화면을 구성하는 경우 작업량이 많아지고, 제약조건으로 인한 Layout 문제도 신경 써야 한다.
SwiftUI도 Stack으로 조금 더 간편하게 구성할 수 있지만, 아예 이를 대체할 View를 제공한다.

struct View_Form: View {
   @State private var email = ""
   @State private var password = ""
   @State private var address = ""
   @State private var age = 0
   @State private var receiveEmail = false

   var body: some View {
      VStack {
         TextField("Email", text: $email)
         SecureField("Password", text: $password)
         TextField("Address", text: $address)

         Stepper("Age: \(age)", value: $age)
         Toggle(isOn: $receiveEmail, label: { Text("Receive Email") })
      }
   }
}

간단하게 Stack으로 구현한 코드를

struct View_Form: View {
   @State private var email = ""
   @State private var password = ""
   @State private var address = ""
   @State private var age = 0
   @State private var receiveEmail = false

   var body: some View {
      Form {
         TextField("Email", text: $email)
         SecureField("Password", text: $password)
         TextField("Address", text: $address)

         Stepper("Age: \(age)", value: $age)
         Toggle(isOn: $receiveEmail, label: { Text("Receive Email") })
      }
   }
}

Form으로만 바꿔 주면 된다.
Form은 기본적으로 Scroll을 지원하고, VStack과 동일하게 Section으로 자유롭게 메뉴를 구분할 수도 있다.

struct View_Form: View {
   @State private var email = ""
   @State private var password = ""
   @State private var address = ""
   @State private var age = 0
   @State private var receiveEmail = false

   var body: some View {
      Form {
          Section {
              TextField("Email", text: $email)
              SecureField("Password", text: $password)
          } header: {
              Text("Account")
          }

          Section {
              TextField("Address", text: $address)

              Stepper("Age: \(age)", value: $age)
              Toggle(isOn: $receiveEmail, label: { Text("Receive Email") })
          } header: {
              Text("Personal Info")
          }
      }
   }
}

정말 간단하게 회원가입 인터페이스를 구현할 수 있다.