[SwiftUI Bootcamp] Intermediate3

Woozoo·2023년 1월 24일

[SwiftUI]

목록 보기

18/26

.mask()

struct MaskBootcamp: View {
    
    @State var rating: Int = 4
    
    var body: some View {
        ZStack {
            HStack {
                ForEach(1..<6) { index in
                    Image(systemName: "star.fill")
                        .font(.largeTitle)
                        .foregroundColor(rating >= index ? Color.yellow : Color.gray)
                        .onTapGesture {
                            rating = index
                        }
                }
            }
        }
    }
}

요런 뷰가 있다고 해보자
레이팅으로 별점을 매기는 뷰임
근데 지금 tap했을 때 딱딱 끊기는 느낌이 드는데 이걸 부드럽게 이어보자

starsView를 새로 만들고, 그 위에 Rectangle을 오버레이로 올려줌
그리고 .mask(마스크할 대상)을 해주면 끝!

rating이 그려지는 뷰의 width를 알기 위해서 GeometryReader를 사용하고,
Rectangle의 frame이 rating의 값에따라 변하게 만들어줌

근데 이렇게 했을 때 문제가 발생한다

rating을 낮추는 게 안됨
overlay로 가려져서 그럼
간단히 해결하는 방법은 overlay로 가려지는 뷰가 터치 안되게 해주면 됨

그리고 rating의 값이 변경되는 부분에 withAnimation 넣어주면 끝!

Sound Effects

soundManager라는 클래스를 만들어줬음
이 클래스가 뷰 자체를 바꾸거나 값을 전달할 일이 없고,
어떤 뷰에서든 바로 접근이 가능하게 해주기 위해서 static으로 instance를 전역으로 선언해줌

AVKit을 import 하고
Sound 파일을 url로 매핑해준다!
그리고 player?.play()로 실행을 해줌

SoundManager.instance로 playSound 해주면 끝!

그리구 실행해야할 사운드가 여러개면
enum으로 case를 나누고, forResource의 이름이 enum의 rawValue가 되게 해주면 됩니다!
enum은 String을 명시해줄 경우에 case들의 rawValue는 case 이름으로 들어감

Haptics / vibrations

class HapticManager {
    static let instance = HapticManager() //Singleton
    
    func notification(type: UINotificationFeedbackGenerator.FeedbackType) {
        let generator = UINotificationFeedbackGenerator()
        generator.notificationOccurred(type)
    }
    
    func impact(style: UIImpactFeedbackGenerator.FeedbackStyle) {
        let generator = UIImpactFeedbackGenerator(style: style)
        generator.impactOccurred()
    }    
}

struct HapticsBootcamp: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("success") { HapticManager.instance.notification(type: .success) }
            Button("warning") { HapticManager.instance.notification(type: .warning) }
            Button("error") { HapticManager.instance.notification(type: .error) }
            Divider()
            Button("soft") { HapticManager.instance.impact(style: .soft)}
            Button("light") { HapticManager.instance.impact(style: .light)}
            Button("medium") { HapticManager.instance.impact(style: .medium)}
            Button("rigid") { HapticManager.instance.impact(style: .rigid)}
            Button("heavy") { HapticManager.instance.impact(style: .heavy)}
        }
    }
}