Optimize the interface of your Mac Catalyst app

22:04 - Hide Navigation Bar in Mac Idiom

if traitCollection.userInterfaceIdiom == .mac {
    navigationController?.setNavigationBarHidden(true, animated: false)
}

29:33 - Idiom vs conditional compilation block

// Idiom vs conditional compilation block

if traitCollection.userInterfaceIdiom == .mac {
    // "Optimize Interface for Mac" specific code
}


#if targetEnvironment(macCatalyst)
    // Mac Catalyst specific code
#endif


if traitCollection.userInterfaceIdiom == .mac {
    // "Optimize Interface for Mac" specific code
} else if traitCollection.userInterfaceIdiom == .pad {
    #if targetEnvironment(macCatalyst)
        // Mac Catalyst specific code
    #else
        // iPad specific code
    #endif
}

31:26 - SwiftUI GroupBox

// Nested GroupBoxes

struct ContentView: View {
    var body: some View {
        GroupBox {
            VStack {
                Text("High level information")
                GroupBox {
                    Text("Some elaborate details")
                }
            }
        }
    }
}

32:00 - SwiftUI Toggle

// DefaultToggleStyle

struct ContentView: View {
    @State var completed: Bool = false

    var body: some View {
        Toggle("Complete?", isOn: $completed)
    }
}

32:35 - SwiftUI Button

// System Button with SF Symbol

struct ContentView: View {
    var body: some View {
        Button(action: { }, label: {
            HStack {
                Image(systemName: "rays")
                Text("Click Me!")
            }
        })
    }
}

32:56 - SwiftUI DatePicker

// DefaultDatePickerStyle

struct ContentView: View {
    @State var dueDate = Date()

    var body: some View {
        DatePicker("Due:", selection: $dueDate)
    }
}

33:14 - SwiftUI Picker

// DefaultPickerStyle

struct ContentView: View {
    @State var sizeIndex = 2

    var body: some View {
        Picker("Size:", selection: $sizeIndex) {
            Text("Small").tag(1)
            Text("Medium").tag(2)
            Text("Large").tag(3)
        }
    }
}

33:55 - SwiftUI Nineties Style Button

// Custom gradient button

struct CustomNinetiesButtonStyle: ButtonStyle {
    var angle: Angle = .degrees(54.95)

    func gradient(shifted: Bool) -> AngularGradient {
        let lightTeal = Color(#colorLiteral(red: 0.2785285413, green: 0.9299042821, blue: 0.9448828101, alpha: 1))
        let yellow    = Color(#colorLiteral(red: 0.9300076365, green: 0.8226149678, blue: 0.59575665, alpha: 1))
        let pink      = Color(#colorLiteral(red: 0.9437599778, green: 0.3392140865, blue: 0.8994731307, alpha: 1))
        let purple    = Color(#colorLiteral(red: 0.5234025717, green: 0.3247769475, blue: 0.9921132922, alpha: 1))
        let softBlue  = Color(#colorLiteral(red: 0.137432307, green: 0.5998355746, blue: 0.9898411632, alpha: 1))

        let gradient = Gradient(stops:
                                    [.init(color:lightTeal, location: 0.2),
                                     .init(color: softBlue, location: 0.4),
                                     .init(color: purple, location: 0.6),
                                     .init(color: pink, location: 0.8),
                                     .init(color: yellow, location: 1.0)])

        return AngularGradient(gradient: gradient, center: .init(x: 0.25, y: 0.55), angle: shifted ? angle : .zero)
    }

    func makeBody(configuration: ButtonStyleConfiguration) -> some View {
        let background = NinetiesBackground(isPressed: configuration.isPressed,
                                            pressedGradient: gradient(shifted: false),
                                            unpressedGradient: gradient(shifted: true))
        return configuration.label
            .foregroundColor(configuration.isPressed ? Color.pink : Color.white)
            .modifier(background)
    }

    struct NinetiesBackground: ViewModifier {
        let isPressed: Bool
        let pressedGradient: AngularGradient
        let unpressedGradient: AngularGradient

        func body(content: Content) -> some View {
            let foreground = content
                    .padding(.horizontal, 24)
                    .padding(.vertical, 14)
                    .foregroundColor(.white)
            return foreground
                .background(Capsule().fill(isPressed ? pressedGradient : unpressedGradient))
        }
    }
}
struct ContentView: View {

    var body: some View {
      Button("Awesome", action: {})
          .buttonStyle(CustomNinetiesButtonStyle())
    }
}