UIKit UIView Box Storybook tvOS MedienMonster

UIKitViewBoxStorybook.swift

//
//  UIKitViewBoxStorybook.swift
//  TemplateAppTvOS
//
//  Created by Mert Vurgun on 2.09.2024.
//

import UIKit

class UIKitViewBoxStorybook: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    // MARK: - Setup UI
    
    private func setupUI() {
        view.backgroundColor = .systemGray

        // Create a main grid-like stack view
        let mainStackView = UIStackView()
        mainStackView.axis = .vertical
        mainStackView.alignment = .fill
        mainStackView.distribution = .fillEqually
        mainStackView.spacing = 20
        mainStackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(mainStackView)
        
        NSLayoutConstraint.activate([
            mainStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            mainStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            mainStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            mainStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
        
        // Add rows of boxes
        let boxStyles: [BoxStyle] = [.simpleWhiteBox, .shadowedSimpleBox, .corneredBox,
                                     .shadowedCorneredBox, .gradientBackgroundBox, .borderedBox,
                                     .borderedAndShadowedBox, .animatedBorderColorBox, .animatedBackgroundBox]

        for rowIndex in 0..<3 {
            let rowStackView = UIStackView()
            rowStackView.axis = .horizontal
            rowStackView.alignment = .fill
            rowStackView.distribution = .fillEqually
            rowStackView.spacing = 20
            mainStackView.addArrangedSubview(rowStackView)
            
            for colIndex in 0..<3 {
                let styleIndex = rowIndex * 3 + colIndex
                if styleIndex < boxStyles.count {
                    rowStackView.addArrangedSubview(createBoxView(style: boxStyles[styleIndex]))
                } else {
                    let placeholderBox = UIView()
                    rowStackView.addArrangedSubview(placeholderBox)
                }
            }
        }
    }

    // MARK: - Box Styles
    
    private enum BoxStyle {
        case simpleWhiteBox
        case shadowedSimpleBox
        case corneredBox
        case shadowedCorneredBox
        case gradientBackgroundBox
        case borderedBox
        case borderedAndShadowedBox
        case animatedBorderColorBox
        case animatedBackgroundBox
    }
    
    // MARK: - Create Box View
    
    private func createBoxView(style: BoxStyle) -> UIView {
        let boxView = UIView()
        
        switch style {
        case .simpleWhiteBox:
            configureSimpleWhiteBox(boxView)
            
        case .shadowedSimpleBox:
            configureShadowedSimpleBox(boxView)
            
        case .corneredBox:
            configureCorneredBox(boxView)
            
        case .shadowedCorneredBox:
            configureShadowedCorneredBox(boxView)
            
        case .gradientBackgroundBox:
            configureGradientBackgroundBox(boxView)
            
        case .borderedBox:
            configureBorderedBox(boxView)
            
        case .borderedAndShadowedBox:
            configureBorderedAndShadowedBox(boxView)
            
        case .animatedBorderColorBox:
            configureAnimatedBorderColorBox(boxView)
            
        case .animatedBackgroundBox:
            configureAnimatedBackgroundBox(boxView)
        }
        
        return boxView
    }
    
    // MARK: - Box Configurations
    
    private func configureSimpleWhiteBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        addLabel(to: boxView, text: "Simple White Box")
    }
    
    private func configureShadowedSimpleBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        boxView.layer.shadowColor = UIColor.black.cgColor
        boxView.layer.shadowOpacity = 0.5
        boxView.layer.shadowOffset = CGSize(width: 0, height: 5)
        boxView.layer.shadowRadius = 10
        addLabel(to: boxView, text: "Shadowed Simple Box")
    }
    
    private func configureCorneredBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        boxView.layer.cornerRadius = 15
        addLabel(to: boxView, text: "Cornered Box")
    }
    
    private func configureShadowedCorneredBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        boxView.layer.cornerRadius = 15
        boxView.layer.shadowColor = UIColor.black.cgColor
        boxView.layer.shadowOpacity = 0.5
        boxView.layer.shadowOffset = CGSize(width: 0, height: 5)
        boxView.layer.shadowRadius = 10
        addLabel(to: boxView, text: "Shadowed Cornered Box")
    }
    
    private func configureGradientBackgroundBox(_ boxView: UIView) {
        let gradientView = GradientCardView(frame: boxView.bounds)
        gradientView.translatesAutoresizingMaskIntoConstraints = false
        boxView.addSubview(gradientView)
        gradientView.layer.cornerRadius = 15
        gradientView.clipsToBounds = true
        
        NSLayoutConstraint.activate([
            gradientView.leadingAnchor.constraint(equalTo: boxView.leadingAnchor),
            gradientView.trailingAnchor.constraint(equalTo: boxView.trailingAnchor),
            gradientView.topAnchor.constraint(equalTo: boxView.topAnchor),
            gradientView.bottomAnchor.constraint(equalTo: boxView.bottomAnchor)
        ])
        
        addLabel(to: gradientView, text: "Gradient Background Box")
    }
    
    private func configureBorderedBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        boxView.layer.borderColor = UIColor.systemBlue.cgColor
        boxView.layer.borderWidth = 3
        boxView.layer.cornerRadius = 15
        addLabel(to: boxView, text: "Bordered Box", textColor: .systemBlue)
    }
    
    private func configureBorderedAndShadowedBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        boxView.layer.borderColor = UIColor.systemRed.cgColor
        boxView.layer.borderWidth = 3
        boxView.layer.cornerRadius = 15
        boxView.layer.shadowColor = UIColor.black.cgColor
        boxView.layer.shadowOpacity = 0.5
        boxView.layer.shadowOffset = CGSize(width: 0, height: 5)
        boxView.layer.shadowRadius = 10
        addLabel(to: boxView, text: "Bordered & Shadowed", textColor: .systemRed)
    }
    
    private func configureAnimatedBorderColorBox(_ boxView: UIView) {
        boxView.backgroundColor = .white
        boxView.layer.borderColor = UIColor.systemGreen.cgColor
        boxView.layer.borderWidth = 3
        boxView.layer.cornerRadius = 15
        
        let animation = CABasicAnimation(keyPath: "borderColor")
        animation.fromValue = UIColor.red.cgColor
        animation.toValue = UIColor.white.cgColor
        animation.duration = 0.8
        animation.autoreverses = true
        animation.repeatCount = .infinity
        boxView.layer.add(animation, forKey: "borderColorAnimation")
        
        addLabel(to: boxView, text: "Animated Border Color", textColor: .red)
    }
    
    private func configureAnimatedBackgroundBox(_ boxView: UIView) {
        let gradientView = AnimatedGradientCardView(frame: boxView.bounds)
        gradientView.translatesAutoresizingMaskIntoConstraints = false
        boxView.addSubview(gradientView)
        gradientView.layer.cornerRadius = 15
        gradientView.clipsToBounds = true
        
        NSLayoutConstraint.activate([
            gradientView.leadingAnchor.constraint(equalTo: boxView.leadingAnchor),
            gradientView.trailingAnchor.constraint(equalTo: boxView.trailingAnchor),
            gradientView.topAnchor.constraint(equalTo: boxView.topAnchor),
            gradientView.bottomAnchor.constraint(equalTo: boxView.bottomAnchor)
        ])
        
        addLabel(to: gradientView, text: "Animated Gradient Background", textColor: .white)
    }
    
    // MARK: - Helper to Add Label
    
    private func addLabel(to boxView: UIView, text: String, textColor: UIColor = .black) {
        let label = UILabel()
        label.text = text
        label.textAlignment = .center
        label.textColor = textColor
        label.font = UIFont.boldSystemFont(ofSize: 16)
        label.translatesAutoresizingMaskIntoConstraints = false
        boxView.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: boxView.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: boxView.centerYAnchor)
        ])
    }
}

private class GradientCardView: UIView {
    private let gradientLayer = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }

    private func setupGradient() {
        gradientLayer.colors = [UIColor.systemBlue.cgColor, UIColor.systemGreen.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        gradientLayer.cornerRadius = 15
        layer.insertSublayer(gradientLayer, at: 0)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
}

private class AnimatedGradientCardView: UIView {
    private let gradientLayer = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGradient()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGradient()
    }

    private func setupGradient() {
        gradientLayer.colors = [UIColor.systemRed.cgColor, UIColor.systemYellow.cgColor, UIColor.systemGreen.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
        gradientLayer.frame = bounds
        gradientLayer.cornerRadius = 15
        layer.addSublayer(gradientLayer)
        
        animateGradient()
    }

    private func animateGradient() {
        let colorChangeAnimation = CABasicAnimation(keyPath: "colors")
        colorChangeAnimation.duration = 3.0
        colorChangeAnimation.toValue = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor, UIColor.systemPink.cgColor]
        colorChangeAnimation.autoreverses = true
        colorChangeAnimation.repeatCount = .infinity
        gradientLayer.add(colorChangeAnimation, forKey: "colorChange")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
}