Silver Challenge: Rebuild the Conversion Interface

iOS Programming (7th Edition) 5. Programmatic Views
1

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.

2 Likes
2

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
    }
}
3

@fabfe31 I stole the RGBs from your example hahaha they were the most painful part of this entire challenge

Hate writing repeated lines so liberal usage of for loops

import UIKit

class ConversionViewController: UIViewController {
    
    override func loadView() {
        view = UIView()
        view.backgroundColor = UIColor.init(red: 245, green: 244, blue: 241, alpha: 1)
        
        var allLabels: [UILabel] = []
        let fahrenheitNumber = UILabel(text: "212")
        let fahrenheitUnit = UILabel(text: "degrees Fahrenheit", size: 17)
        let isReallyLabel = UILabel(text: "is really", color: CIColor.black, size: 17)
        let celsiusNumber = UILabel(text: "100")
        let celsiusUnit = UILabel(text: "degrees Celsius", size: 17)
        
        allLabels.append(fahrenheitNumber)
        allLabels.append(fahrenheitUnit)
        allLabels.append(isReallyLabel)
        allLabels.append(celsiusNumber)
        allLabels.append(celsiusUnit)
        
        for label in allLabels {
            view.addSubview(label)
            label.translatesAutoresizingMaskIntoConstraints = false
        }
        
        let fahrenheitNumberTopConstraint = fahrenheitNumber.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 8)
        fahrenheitNumberTopConstraint.isActive = true
        let fahrenheitNumberCenterConstraint = fahrenheitNumber.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor)
        fahrenheitNumberCenterConstraint.isActive = true
        
        for i in 1...allLabels.count-1 {
            let prevLabel = allLabels[i-1]
            let curLabel = allLabels[i]
            let centerXConstraint = curLabel.centerXAnchor.constraint(equalTo: fahrenheitNumber.centerXAnchor)
            centerXConstraint.isActive = true
            let bottomTopConstraint = curLabel.topAnchor.constraint(equalTo: prevLabel.bottomAnchor, constant: 8)
            bottomTopConstraint.isActive = true
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        print("ConversionViewController loaded its view")
    }
}

extension UILabel {
    convenience init(text: String, color: CIColor = CIColor(red: 0.88, green: 0.35, blue: 0.16), size: CGFloat = 70) {
        self.init()
        self.text = text
        self.textColor = UIColor.init(ciColor: color)
        self.font = UIFont.systemFont(ofSize: size)
    }
}