SwiftUI 실습 1

이때까지 공부할것을 실습하는 프로젝트를 생성한다 프로젝트에는 텍스트, 텍스트 입력, 상태 프로퍼티, 슬라이더, 피커를 이용해서 만들것이다

Slider 추가

슬라이더 기능을 추가해서 표시한다

import SwiftUI

struct ContentView: View {
        @State private var rotation: Double = 0.0
    
        var body: some View {
            VStack{
                Text("hello world")
                Slider(value: $rotation,in: 0 ... 360, step: 1)
                    .padding()
            }
        }
}

value에는 변화 시킬 대상을 의미하고 in은 최대 최소 범위, step은 1칸단 이동 크기 이다

 

회전 기능 추가하기 rotationEffect 수정자

slider에서 변경된 값을 이용해서 text를 회전 시킨다

import SwiftUI

struct ContentView: View {
        @State private var rotation: Double = 0.0
    
        var body: some View {
            VStack{
                Text("hello world")
                    .font(.title)
                    .rotationEffect(.degrees(rotation)) //회전 기능
                    .animation(.easeInOut(duration: 5), value: rotation)
              // 변경에 대한 애니메이션
                Slider(value: $rotation,in: 0 ... 360, step: 1)
                    .padding()
            }
        }
}

animation 수정자를 통해서 변경시 천천이 이동하도록 했다

약 180도 회전

애니메이션 유형	설명	예시 코드
easeIn	애니메이션이 느리게 시작하고 빠르게 끝납니다.	.animation(.easeIn, value: state)
easeOut	애니메이션이 빠르게 시작하고 느리게 끝납니다.	.animation(.easeOut, value: state)
easeInOut	애니메이션이 느리게 시작하고 중간에 빨라졌다가 다시 느리게 끝납니다.	.animation(.easeInOut, value: state)
linear	일정한 속도로 애니메이션이 진행됩니다.	.animation(.linear, value: state)
spring	스프링 효과처럼 자연스럽게 튀는 느낌을 주는 애니메이션입니다.	.animation(.spring(), value: state)
interpolatingSpring	지정된 강도와 감쇠 비율로 자연스러운 스프링 효과를 제공합니다.	.animation(.interpolatingSpring(stiffness: 50, damping: 1), value: state
interactiveSpring	사용자 상호작용 중에 사용할 수 있는 스프링 애니메이션입니다.	.animation(.interactiveSpring(), value: state)

 

텍스트 입력

상태 스테이트를 하나 더 이용해서 문자열을 입력 받는다

import SwiftUI

struct ContentView: View {
        @State private var rotation: Double = 0.0
        @State private var text: String = "안녕하세요!"
        var body: some View {
            VStack{
                Text(text)
                    .font(.title)
                    .rotationEffect(.degrees(rotation))
                    .animation(.easeOut(duration: 3), value: rotation)
                Slider(value: $rotation,in: 0 ... 360, step: 1)
                    .padding()
                TextField("Enter Text", text: $text) // 해당 뷰 추가
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding()
            }
        }
}

 

색상 피커 추가

picker 뷰로 여러개중 하나를 선택하는 뷰이다 주로 날짜나 성별등을 선택할 때 넣는다

import SwiftUI

struct ContentView: View {
    var colors: [Color] = [.red, .blue, .green, .yellow, .orange]
    var colornames: [String] = ["Red", "Blue", "Green", "Yellow", "Orange"]
    
    @State private var rotation: Double = 0.0
    @State private var text: String = "안녕하세요!"
    @State private var colorIndex = 0
    
    var body: some View {
        VStack{
            Text(text)
                .font(.title)
                .rotationEffect(.degrees(rotation))
                .animation(.easeOut(duration: 3), value: rotation)
          			.foregroundStyle(colors[colorIndex])
            Divider() // 선추가
            Slider(value: $rotation,in: 0 ... 360, step: 1)
                .padding()
            TextField("Enter Text", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Picker(selection: $colorIndex ,label: Text("Color")){
                ForEach(0..<colors.count, id: \.self){
                    Text(colornames[$0]) // 표시할 글자
                        .foregroundColor(colors[$0]) // 글자의 색
                }
            }
            .pickerStyle(.wheel) // 피커 스타일
        }
    }
}

 

picker 스타일

.wheel
.segmented
.menu