SwiftUI 예제 튜토리얼

레이아웃에 VStack 추가하기

• 코드 에디터에서 Text 뷰 항목 선택
• 키보드의 Command 키를 누른 상태에서 Text 뷰 항목 클릭
• Embed in VStack 선택

  struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
        }
    }
  }
  

---

스택에 슬라이더 뷰 추가하기

• ’+’ 버튼을 클릭(라이브러리 패널 열기)
• 뷰 리스트에서 Slider 를 프리뷰 캔버스에 드래그 앤 드롭

  struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
            Slider(value: Value)
        }
    }
  }
  

---

상태 프로퍼티 추가하기

• 슬라이더: Text 뷰를 회전시킬 총량을 제어
• Slider 뷰와 현재의 회전 값을 저장하게 될 상태 프로퍼티 간에 바인딩

  struct ContentView: View {
  
    @State private var rotation: Double = 0 // 상태 프로퍼티
      
    var body: some View {
        VStack {
            Text("Hello, World!")
            Slider(value: $rotation, in: 0 ... 360, step: 0.1)
        }
    }
  }
  

  0부터 360까지의 범위로 0.1씩 증가
  바인딩: ‘$’

---

Text 뷰에 수정자 추가하기

• 라이브러리 패널 열기
• 두번째 탭으로 전환
• Font 수정자를 Text 뷰 항목 위로 드래그 앤 드롭
• 추가된 수정자 선택
• 애트리뷰트 인스펙터( Attributes inspector ) 패널에서 Large Title 폰트로 변경
• 애트리뷰트 인스펙터 내에 Weight 메뉴 설정을 Heavy로 변경(폰트 굵기)

  var body: some View {
    VStack {
        Text("Hello, World!")
            .font(.largeTitle)
            .fontWeight(.heavy)
        Slider(value: $rotation, in: 0 ... 360, step: 0.1)
    }
  }
  

---

회전과 애니메이션 추가하기

• 회전효과

  .
  .
  Text("Hello, World!")
    .font(.largeTitle)
    .fontWeight(.heavy)
    .rotationEffect(.degrees(self.rotation))
  .
  .
  

  참조체를 읽는 것이기 때문에 ‘$’를 붙이지x

• 애니메이션 효과

  Text("Hello, World!")
    .font(.largeTitle)
    .fontWeight(.heavy)
    .rotationEffect(.degrees(self.rotation))
    .animation(.easeInOut(duration: 5), value: false)
  

  5초 동안 자연스럽게 회전

---

스택에 TextField 추가하기

사용자가 입력하는 텍스트가 입력되어 Text 뷰에 표시

struct ContentView: View {
    
    @State private var rotation: Double = 0
    @State private var text: String = "Welcome to SwiftUI" // default
    
    var body: some View {
        VStack {
            
            Text(text)
                .font(.largeTitle)
                .fontWeight(.heavy)
                .rotationEffect(.degrees(self.rotation))
                .animation(.easeInOut(duration: 5), value: false)
                
            Slider(value: $rotation, in: 0 ... 360, step: 0.1)
            
            TextField("Enter text here", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())

---

색상 피커 추가하기

Picker 뷰: Text 뷰의 글자 색상(foreground color)을 사용자가 선택

import SwiftUI

struct ContentView: View {
    
    var colors: [Color] = [.black, .red, .green, .blue] // 색상 객체 배열
    var colornames = ["Black", "Red", "Green", "Blue"] // 색상 이름 배열
    
    @State private var colorIndex = 0 // 배열 인덱스 값을 저장하는 상태 프로퍼티
    @State private var rotation: Double = 0
    @State private var text: String = "Welcome to SwiftUI"

• Picker 뷰 추가

  Picker(selection: $colorIndex, label: Text("Color")) {
    ForEach (0 ..< colornames.count) {
        Text(self.colornames[$0])
    }
  }
  

  colorIndex 상태 프로퍼티에서 현재 선택된 것을 저장
  colorNames 배열에 있는 각각의 색상 이름을 표시

• Text 뷰 색상 변경

  Text(text)
    .font(.largeTitle)
    .fontWeight(.heavy)
    .rotationEffect(.degrees(self.rotation))
    .animation(.easeInOut(duration: 5), value: false)
    .foregroundColor(self.colors[self.colorIndex])
  

---

레이아웃 정리하기

1. 뷰 주변에 여백 추가: padding() 수정자

    Slider(value: $rotation, in: 0 ... 360, step: 0.1)
        .padding()
                       
    TextField("Enter text here", text: $text)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .padding()
                       
    Picker(selection: $colorIndex, label: Text("Color")) {
        ForEach (0 ..< colornames.count) {
            Text(self.colornames[$0])
        }
    }
    .padding()
   

2. 뷰들의 간격을 균등하게: Spacer 뷰

    VStack {
        Spacer()
        Text(text)
            .font(.largeTitle)
            .fontWeight(.heavy)
            .rotationEffect(.degrees(self.rotation))
            .animation(.easeInOut(duration: 5), value: false)
            .foregroundColor(self.colors[self.colorIndex])
        Spacer()
        Slider(value: $rotation, in: 0 ... 360, step: 0.1)
            .padding()
        TextField("Enter text here", text: $text)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
        Picker(selection: $colorIndex, label: Text("Color")) {
            ForEach (0 ..< colornames.count) {
                Text(self.colornames[$0])
            }
        }
        .padding()
    }
   

3. Text 뷰와 Slider 뷰 사이를 더 명확하게 분리: Divider 뷰

    VStack {
        Spacer()
        Text(text)
            .font(.largeTitle)
            .fontWeight(.heavy)
            .rotationEffect(.degrees(self.rotation))
            .animation(.easeInOut(duration: 5), value: false)
            .foregroundColor(self.colors[self.colorIndex])
        Spacer()
        Divider()
   

   라인이 생김