Silver Challenge: Rebuild the Conversion Interface

This is what my ConversionViewController class looks like after the changes I made:

import UIKit

class ConversionViewController: UIViewController {

    override func loadView() {
        view = UIView()
        view.backgroundColor = UIColor(red: 0.96, green: 0.96, blue: 0.95, alpha: 1.00)
        
        let numberTop = CustomLabel(withText: "212", size: 70)
        numberTop.translatesAutoresizingMaskIntoConstraints = false

        let degreesFahrenheit = CustomLabel(withText: "degrees Fahrenheit", size: 36)
        degreesFahrenheit.translatesAutoresizingMaskIntoConstraints = false
        
        let isReally = CustomLabel(withText: "is really", size: 36, color: UIColor.black)
        isReally.translatesAutoresizingMaskIntoConstraints = false
        
        let numberBottom = CustomLabel(withText: "100", size: 70)
        numberBottom.translatesAutoresizingMaskIntoConstraints = false
        
        let degreesCelsius = CustomLabel(withText: "degrees Celsius", size: 36)
        degreesCelsius.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(numberTop)
        view.addSubview(degreesFahrenheit)
        view.addSubview(isReally)
        view.addSubview(numberBottom)
        view.addSubview(degreesCelsius)
        
        let TNTopConstraint = numberTop.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8)
        let TNXConstraint = numberTop.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        TNTopConstraint.isActive = true
        TNXConstraint.isActive = true
        
        let DFTopContraint = degreesFahrenheit.topAnchor.constraint(equalTo: numberTop.bottomAnchor, constant: 8)
        let DFXConstraint = degreesFahrenheit.centerXAnchor.constraint(equalTo: numberTop.centerXAnchor)
        DFTopContraint.isActive = true
        DFXConstraint.isActive = true
        
        let IRTopConstraint = isReally.topAnchor.constraint(equalTo: degreesFahrenheit.bottomAnchor, constant: 8)
        let IRXConstraint = isReally.centerXAnchor.constraint(equalTo: numberTop.centerXAnchor)
        IRTopConstraint.isActive = true
        IRXConstraint.isActive = true
        
        let BNTopConstraint = numberBottom.topAnchor.constraint(equalTo: isReally.bottomAnchor, constant: 8)
        let BNXConstraint = numberBottom.centerXAnchor.constraint(equalTo: numberTop.centerXAnchor)
        BNTopConstraint.isActive = true
        BNXConstraint.isActive = true
        
        let DCTopConstraint = degreesCelsius.topAnchor.constraint(equalTo: numberBottom.bottomAnchor, constant: 8)
        let DCXConstraint = degreesCelsius.centerXAnchor.constraint(equalTo: numberTop.centerXAnchor)
        DCTopConstraint.isActive = true
        DCXConstraint.isActive = true
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        print("ConversionViewController loaded its view.")
    }
}

typealias CustomLabel = UILabel

extension CustomLabel {
    convenience init(withText text: String, size font: CGFloat, color: UIColor = UIColor(red: 0.88, green: 0.35, blue: 0.16, alpha: 1.00)) {
        self.init()
        self.text = text
        self.font = UIFont.systemFont(ofSize: font, weight: .regular)
        self.textColor = color
    }
}

The biggest change I implemented was extending the UILabel type with a convenience initializer that lets me include the text, font size and optionally the color (this parameter in particular has a default value as most text is orange) when it’s created. I also used a third party site (https://www.uicolor.io/) to get the colors right, from the HEX value to a UIColor equivalent, and to keep them the exact same as the ones that were used when creating the view in Interface Builder.

1 Like

My answer of Silver challenge

ConversionViewController

 class ConversionViewController: UIViewController {
        
        let containerView = UIView()
        let lbFahrenheit = CustomLabel(textAlignment: .center, fontSize: 70,color: UIColor.orange)
        let titleFahrenheit = CustomLabel(textAlignment: .center, fontSize: 36,color: UIColor.orange)
        let textLabel = CustomLabel(textAlignment: .center, fontSize: 36,color: UIColor.black)
        let lbCelsius = CustomLabel(textAlignment: .center, fontSize: 70,color: UIColor.orange)
        let titleCelsius = CustomLabel(textAlignment: .center, fontSize: 36,color: UIColor.orange)
        
        override func loadView() {
            configureContainerView()
            setLayout()
        
        }
        
        override func viewDidLoad() {
            super.viewDidLoad()
            view.backgroundColor = .systemBackground

        }
      
        func configureContainerView() {
           view = containerView
            
        }

        func setLayout() {
            
            let padding: CGFloat = 8
            
            containerView.addSubview(lbFahrenheit)
            lbFahrenheit.text = "212"
            
            containerView.addSubview(titleFahrenheit)
            titleFahrenheit.text = "degrees Fahrenheit"
            
            containerView.addSubview(textLabel)
            textLabel.text = "is really"
            
            containerView.addSubview(lbCelsius)
            lbCelsius.text = "100"
            
            containerView.addSubview(titleCelsius)
            titleCelsius.text = "degrees Celsius"
            
            
            NSLayoutConstraint.activate([
                lbFahrenheit.topAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.topAnchor, constant: padding),
                lbFahrenheit.centerXAnchor.constraint(equalTo: containerView.safeAreaLayoutGuide.centerXAnchor),
                
                titleFahrenheit.topAnchor.constraint(equalTo: lbFahrenheit.bottomAnchor, constant: padding),
                titleFahrenheit.centerXAnchor.constraint(equalTo: lbFahrenheit.centerXAnchor),
           
                textLabel.topAnchor.constraint(equalTo: titleFahrenheit.bottomAnchor, constant: padding),
                textLabel.centerXAnchor.constraint(equalTo: titleFahrenheit.centerXAnchor),
               
                lbCelsius.topAnchor.constraint(equalTo: textLabel.bottomAnchor, constant: padding),
                lbCelsius.centerXAnchor.constraint(equalTo: textLabel.centerXAnchor),
                
                titleCelsius.topAnchor.constraint(equalTo: lbCelsius.bottomAnchor, constant: padding),
                titleCelsius.centerXAnchor.constraint(equalTo: lbCelsius.centerXAnchor)
            ])
        }
    }

CustomLabel

class CustomLabel: UILabel {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    init(textAlignment: NSTextAlignment, fontSize: CGFloat, color: UIColor) {
        super.init(frame: .zero)
        self.textAlignment = textAlignment
        self.font = UIFont.systemFont(ofSize: fontSize, weight: .regular)
        self.textColor = color
        configure()
    }
      
    private func configure() {
        adjustsFontSizeToFitWidth    = true
        minimumScaleFactor           = 0.9
        lineBreakMode                = .byTruncatingTail
        translatesAutoresizingMaskIntoConstraints = false
    }
}