Source code for advanced design in SwiftUI - Apple TV Remote Dial

AppleTVRemoteMainDial.swift

//
//  AppleTVRemoteMainDial.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//  Created by Adam Fordyce on 26/06/2021.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

private let nearBlack = Color.white(0.02)

private let backgroundGradient = LinearGradient([.white(0.85), .white(0.65)], to: .bottomTrailing)
private let outerDialGradient = LinearGradient([.white(0.18), nearBlack], to: .bottomTrailing)
private let innerDialGradient = RadialGradient([.white(0.14), nearBlack], center: UnitPoint(0.8, 0.8), from: 40, to: 240)
private let innerDialHighlightGradient = LinearGradient([.white(0.7), .white(0.9)], to: .bottomTrailing)

struct AppleTVRemoteMainDial: View {
    var body: some View {
        
        let outerDialCircle = Circle().fill(outerDialGradient)
        
        ZStack {
            RoundedRectangle(70)
                .fill(backgroundGradient)
                .shadowColor(.black, 20, x: 10, y: 10)
            ZStack {
                outerDialCircle
                    .shadow(4, x: 2, y: 2)
                Group {
                    outerDialCircle
                    outerDialCircle
                        .rotate(180.degrees)
                        .frame(290)
                }
                .blur(16)
                Group {
                    innerDialGradient
                        .clipCircle()
                    Circle()
                        .stroke(innerDialHighlightGradient, lineWidth: 1)
                        .offset(1.5, 1.5)
                        .blur(1)
                    Circle()
                        .stroke(nearBlack, lineWidth: 4)
                }
                .frame(210)
                ForEach(0..<4) { index in
                    Circle()
                        .fillColor(.white(0.65))
                        .frame(7)
                        .xOffset(160)
                        .rotate(90.degrees * index)
                }
            }
            .frame(360)
        }
    }
}

struct AppleTVRemoteMainDial_Previews: PreviewProvider {
    struct AppleTVRemoteMainDial_Harness: View {
        
        var body: some View {
            AppleTVRemoteMainDial()
                .frame(400)
                .padding(50)
                .foregroundColor(.white(0.9))
                .backgroundColor(.white(0.1))
        }
    }
    
    static var previews: some View {
        AppleTVRemoteMainDial_Harness()
            .previewSizeThatFits()
    }
}