vibrant-materials.swift

//
//  System Materials Playground
//  fivestars.blog
//
//  Created by Federico Zanetello on 9/6/19.
//

import UIKit
import PlaygroundSupport

final class ContainerViewController: UIViewController {

  lazy var lightViewController: ColorViewController = {
    $0.overrideUserInterfaceStyle = .light
    return $0
  }(ColorViewController())

  lazy var darkViewController: ColorViewController = {
    $0.overrideUserInterfaceStyle = .dark
    return $0
  }(ColorViewController())

  override func loadView() {
    super.loadView()

    let view = UIView()
    let redView = UIView()
    view.backgroundColor = .orange

    let stackView = UIStackView()
    stackView.distribution = .fillEqually
    stackView.axis = .vertical
    stackView.spacing = 5

    stackView.addArrangedSubview(lightViewController.view)
    stackView.addArrangedSubview(darkViewController.view)

    view.addSubview(stackView)
    view.addSubview(redView)

    self.view = view

    setupConstraints(redView: redView, stackView: stackView)
  }

  func setupConstraints(redView: UIView, stackView: UIView) {
    redView.translatesAutoresizingMaskIntoConstraints = false
    stackView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
      redView.topAnchor.constraint(equalTo: view.topAnchor),
      redView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      redView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      redView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
      stackView.topAnchor.constraint(equalTo: redView.topAnchor, constant: 5),
      stackView.leadingAnchor.constraint(equalTo: redView.leadingAnchor, constant: 5),
      stackView.trailingAnchor.constraint(equalTo: redView.trailingAnchor, constant: -5),
      stackView.bottomAnchor.constraint(equalTo: redView.bottomAnchor, constant: -5)
      ])
  }
}

class ColorViewController : UIViewController {
  override func loadView() {
    super.loadView()

    let horizontalStackView = UIStackView()
    horizontalStackView.distribution = .fillEqually
    horizontalStackView.spacing = 5

    let blurEffects: [UIBlurEffect.Style] = [.systemUltraThinMaterial,
                                             .systemThinMaterial,
                                             .systemMaterial,
                                             .systemThickMaterial] // .systemChromeMaterial???

    for blurEffectStyle in blurEffects {
      let blurEffect = UIBlurEffect(style: blurEffectStyle)
      let blurView = UIVisualEffectView(effect: blurEffect)

      blurView.layer.cornerCurve = .continuous
      blurView.layer.cornerRadius = 20
      blurView.clipsToBounds = true

      horizontalStackView.addArrangedSubview(blurView)

      let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect, style: .secondaryLabel)
      let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
      blurView.contentView.addSubview(vibrancyView)

      let vibrantLabel = UILabel()
      vibrantLabel.font = UIFont.preferredFont(forTextStyle: .largeTitle, compatibleWith: self.traitCollection)
      vibrantLabel.text = "Hello"
      vibrancyView.contentView.addSubview(vibrantLabel)

      setupContraints(blurView: blurView, vibrancyView: vibrancyView, vibrantLabel: vibrantLabel)
    }
    view = horizontalStackView
  }

  func setupContraints(blurView: UIView, vibrancyView: UIView, vibrantLabel: UIView) {
    vibrancyView.translatesAutoresizingMaskIntoConstraints = false
    vibrantLabel.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
      vibrancyView.topAnchor.constraint(equalTo: blurView.topAnchor),
      vibrancyView.leadingAnchor.constraint(equalTo: blurView.leadingAnchor),
      vibrancyView.trailingAnchor.constraint(equalTo: blurView.trailingAnchor),
      vibrancyView.bottomAnchor.constraint(equalTo: blurView.bottomAnchor),
      vibrantLabel.centerXAnchor.constraint(equalTo: vibrancyView.centerXAnchor),
      vibrantLabel.centerYAnchor.constraint(equalTo: vibrancyView.centerYAnchor)
    ])
  }
}

let containerViewController = ContainerViewController()
containerViewController.preferredContentSize = CGSize(width: 600, height: 100)
PlaygroundPage.current.liveView = containerViewController