UIKit UILabel Storyboard tvOS MedienMonster

UIKitLabelStoryboard.swift

//
//  UIKitLabelStoryboard.swift
//  TemplateAppTvOS
//
//  Created by Mert Vurgun on 02.09.2024.
//

import UIKit

class UIKitLabelStoryboard: UIViewController {

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

    // MARK: - Setup UI

    private func setupUI() {
        view.backgroundColor = .darkGray
        
        // Create a main vertical stack view
        let mainStackView = UIStackView()
        mainStackView.axis = .vertical
        mainStackView.alignment = .center
        mainStackView.spacing = 40
        mainStackView.translatesAutoresizingMaskIntoConstraints = false
        mainStackView.layer.borderColor = UIColor.gray.cgColor
        mainStackView.layer.borderWidth = 1
        view.addSubview(mainStackView)

        NSLayoutConstraint.activate([
            mainStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            mainStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -100)
        ])

        // Top horizontal stack with UILabel examples
        let topHorizontalStack = UIStackView()
        topHorizontalStack.axis = .horizontal
        topHorizontalStack.alignment = .bottom
        topHorizontalStack.spacing = 40
        topHorizontalStack.translatesAutoresizingMaskIntoConstraints = false
        topHorizontalStack.layer.borderColor = UIColor.gray.cgColor
        topHorizontalStack.layer.borderWidth = 1
        mainStackView.addArrangedSubview(topHorizontalStack)
        
        // Add simple and attributed UILabels to the top horizontal stack
        topHorizontalStack.addArrangedSubview(createSimpleUILabelStack())
        topHorizontalStack.addArrangedSubview(createAttributedUILabelStack())
        
        // Add UILabels with different text styles to the main stack view
        mainStackView.addArrangedSubview(createAttributedTextAndHTMLStack())
    }

    // MARK: - UILabel Examples

    // Simple UILabels with different font styles
    private func createSimpleUILabelStack() -> UIStackView {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .center
        stackView.spacing = 10
        
        let titleLabel = createLabel(text: "UILabel with Text", font: .systemFont(ofSize: 20, weight: .bold), textColor: .systemGreen)
        let headlineLabel = createLabel(text: "Headline", font: .systemFont(ofSize: 30, weight: .bold), textColor: .black)
        let subheadingLabel = createLabel(text: "Subheading", font: .systemFont(ofSize: 24, weight: .regular), textColor: .black)
        let displayLabel = createLabel(text: "Display", font: .systemFont(ofSize: 34, weight: .bold), textColor: .black)
        let bodyLabel = createLabel(text: "Body text", font: .systemFont(ofSize: 20, weight: .regular), textColor: .black)
        let captionLabel = createLabel(text: "Caption text", font: .systemFont(ofSize: 16, weight: .regular), textColor: .gray)
        
        stackView.addArrangedSubview(titleLabel)
        stackView.addArrangedSubview(headlineLabel)
        stackView.addArrangedSubview(subheadingLabel)
        stackView.addArrangedSubview(displayLabel)
        stackView.addArrangedSubview(bodyLabel)
        stackView.addArrangedSubview(captionLabel)
        
        return stackView
    }

    // Attributed UILabels with different styles
    private func createAttributedUILabelStack() -> UIStackView {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .center
        stackView.spacing = 10
        
        let titleText = NSMutableAttributedString(string: "UILabel with AttributedText")
        titleText.addAttribute(.font, value: UIFont.systemFont(ofSize: 20, weight: .bold), range: NSRange(location: 0, length: 8))
        titleText.addAttribute(.foregroundColor, value: UIColor.systemGreen, range: NSRange(location: 0, length: 8))
        let titleLabel = createAttributedLabel(attributedText: titleText)
        
        let headlineText = NSMutableAttributedString(string: "Headline")
        headlineText.addAttribute(.font, value: UIFont.systemFont(ofSize: 30, weight: .bold), range: NSRange(location: 0, length: 8))
        headlineText.addAttribute(.foregroundColor, value: UIColor.black, range: NSRange(location: 0, length: 8))
        let headlineLabel = createAttributedLabel(attributedText: headlineText)
        
        let subheadingText = NSMutableAttributedString(string: "Subheading")
        subheadingText.addAttribute(.font, value: UIFont.systemFont(ofSize: 24, weight: .regular), range: NSRange(location: 0, length: 10))
        subheadingText.addAttribute(.foregroundColor, value: UIColor.black, range: NSRange(location: 0, length: 10))
        let subheadingLabel = createAttributedLabel(attributedText: subheadingText)
        
        let displayText = NSMutableAttributedString(string: "Display")
        displayText.addAttribute(.font, value: UIFont.systemFont(ofSize: 34, weight: .bold), range: NSRange(location: 0, length: 7))
        displayText.addAttribute(.foregroundColor, value: UIColor.black, range: NSRange(location: 0, length: 7))
        let displayLabel = createAttributedLabel(attributedText: displayText)
        
        let bodyText = NSMutableAttributedString(string: "Body text")
        bodyText.addAttribute(.font, value: UIFont.systemFont(ofSize: 20, weight: .regular), range: NSRange(location: 0, length: 9))
        bodyText.addAttribute(.foregroundColor, value: UIColor.black, range: NSRange(location: 0, length: 9))
        let bodyLabel = createAttributedLabel(attributedText: bodyText)
        
        let captionText = NSMutableAttributedString(string: "Caption text")
        captionText.addAttribute(.font, value: UIFont.systemFont(ofSize: 16, weight: .regular), range: NSRange(location: 0, length: 12))
        captionText.addAttribute(.foregroundColor, value: UIColor.gray, range: NSRange(location: 0, length: 12))
        let captionLabel = createAttributedLabel(attributedText: captionText)
        
        stackView.addArrangedSubview(titleLabel)
        stackView.addArrangedSubview(headlineLabel)
        stackView.addArrangedSubview(subheadingLabel)
        stackView.addArrangedSubview(displayLabel)
        stackView.addArrangedSubview(bodyLabel)
        stackView.addArrangedSubview(captionLabel)
        
        return stackView
    }
    
    // Demo of attributed text with color, size, and HTML conversion
    private func createAttributedTextAndHTMLStack() -> UIStackView {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .center
        stackView.spacing = 20
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        let simpleTextLabel = createLabel(
            text: "Simple Text with Custom Color",
            font: .systemFont(ofSize: 20, weight: .regular),
            textColor: .systemBlue
        )
        simpleTextLabel.numberOfLines = 0
        stackView.addArrangedSubview(simpleTextLabel)
        
        let attributedText = NSMutableAttributedString(string: "Attributed Text with Styled Colors")
        attributedText.addAttribute(.foregroundColor, value: UIColor.red, range: NSRange(location: 0, length: 10))
        attributedText.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 24), range: NSRange(location: 11, length: 4))
        attributedText.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 17, length: 6))
        attributedText.addAttribute(.font, value: UIFont.italicSystemFont(ofSize: 20), range: NSRange(location: 24, length: 6))
        
        let attributedLabel = createAttributedLabel(attributedText: attributedText)
        attributedLabel.numberOfLines = 0
        stackView.addArrangedSubview(attributedLabel)
        
        let htmlLabel = createHTMLLabel()
        stackView.addArrangedSubview(htmlLabel)
        
        return stackView
    }

    // MARK: - HTML UILabel Example
    
    private func createHTMLLabel() -> UILabel {
        let htmlText = """
        <h1 style="font-size: 36px;">This is an H1 header</h1>
        <h2 style="font-size: 30px;">This is an H2 header</h2>
        <p style="font-size: 24px;">This is a paragraph with <b>bold</b> and <i>italic</i> text.</p>
        <ul style="font-size: 20px;">
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
            <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>
        """

        let htmlAttributedString = try? NSAttributedString(
            data: Data(htmlText.utf8),
            options: [.documentType: NSAttributedString.DocumentType.html,
                      .characterEncoding: String.Encoding.utf8.rawValue],
            documentAttributes: nil)
        
        let htmlLabel = UILabel()
        htmlLabel.attributedText = htmlAttributedString ?? NSAttributedString(string: "")
        htmlLabel.textAlignment = .left
        htmlLabel.numberOfLines = 0
        
        return htmlLabel
    }

    // MARK: - Helper Functions
    
    private func createLabel(text: String, font: UIFont, textColor: UIColor) -> UILabel {
        let label = UILabel()
        label.text = text
        label.font = font
        label.textColor = textColor
        label.textAlignment = .left
        return label
    }
    
    private func createAttributedLabel(attributedText: NSAttributedString) -> UILabel {
        let label = UILabel()
        label.attributedText = attributedText
        label.textAlignment = .left
        label.numberOfLines = 0
        return label
    }
}