|
| 1 | +// |
| 2 | +// ImperativeViewController.swift |
| 3 | +// UILabel_Typography_Extensions |
| 4 | +// |
| 5 | +// Created by Geri Borbás on 14/03/2022. |
| 6 | +// |
| 7 | + |
| 8 | +import UIKit |
| 9 | +import SwiftUI |
| 10 | + |
| 11 | + |
| 12 | +class ImperativeViewController: UIViewController { |
| 13 | + |
| 14 | + override func viewDidLoad() { |
| 15 | + super.viewDidLoad() |
| 16 | + |
| 17 | + // Colors. |
| 18 | + view.backgroundColor = UI.Color.background |
| 19 | + overrideUserInterfaceStyle = .dark |
| 20 | + |
| 21 | + |
| 22 | + let headerLabel = UILabel() |
| 23 | + headerLabel.textColor = UIColor(named: "Mars") |
| 24 | + headerLabel.font = UIFont(name: "HelveticaNeue-CondensedBlack", size: 100) |
| 25 | + headerLabel.lineHeight = 80 |
| 26 | + headerLabel.letterSpacing = 100 * -0.02 |
| 27 | + headerLabel.text = "Mars" |
| 28 | + |
| 29 | + let subtitleLabel = UILabel() |
| 30 | + subtitleLabel.textColor = .label |
| 31 | + subtitleLabel.font = UIFont(name: "HelveticaNeue", size: 20) |
| 32 | + subtitleLabel.lineHeight = 30 |
| 33 | + subtitleLabel.letterSpacing = 20 * 0.28 |
| 34 | + subtitleLabel.text = "Martian (/ˈmɑːrʃən/)" |
| 35 | + |
| 36 | + let image = UIImageView(image: .init(named: "Mars")) |
| 37 | + |
| 38 | + let introLabel = UILabel() |
| 39 | + introLabel.textColor = .label |
| 40 | + introLabel.font = UIFont(name: "HelveticaNeue-Medium", size: 12) |
| 41 | + introLabel.numberOfLines = 0 |
| 42 | + introLabel.lineHeight = 20 |
| 43 | + introLabel.letterSpacing = 12 * 0.30 |
| 44 | + introLabel.text = "Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System, being larger than only Mercury. In English, Mars carries the name of the Roman god of war and is often referred to as the \"Red Planet\". The latter refers to the effect of the iron oxide prevalent on Mars's surface.".uppercased() |
| 45 | + |
| 46 | + let titleLabel = UILabel() |
| 47 | + titleLabel.textColor = .label |
| 48 | + titleLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 21) |
| 49 | + titleLabel.numberOfLines = 0 |
| 50 | + titleLabel.lineHeight = 30 |
| 51 | + titleLabel.letterSpacing = 21 * 0.10 |
| 52 | + titleLabel.underline = .single |
| 53 | + titleLabel.text = "History" |
| 54 | + |
| 55 | + let paragraphLabel = UILabel() |
| 56 | + paragraphLabel.textColor = .label.withAlphaComponent(0.5) |
| 57 | + paragraphLabel.font = UIFont(name: "HelveticaNeue-Medium", size: 13) |
| 58 | + paragraphLabel.numberOfLines = 0 |
| 59 | + paragraphLabel.lineHeight = 20 |
| 60 | + paragraphLabel.text = "The days and seasons are comparable to those of Earth, because the rotation period as well as the tilt of the rotational axis relative to the ecliptic plane are similar. Mars is the site of Olympus Mons, the largest volcano and highest known mountain on any planet in the Solar System, and of Valles Marineris, one of the largest canyons in the Solar System. The smooth Borealis basin in the Northern Hemisphere covers 40% of the planet and may be a giant impact feature. Mars has two moons, Phobos and Deimos, which are small and irregularly shaped.\n\nMars has been explored by several uncrewed spacecraft. Mariner 4 was the first spacecraft to visit Mars; launched by NASA on 28 November 1964, it made its closest approach to the planet on 15 July 1965. Mariner 4 detected the weak Martian radiation belt, measured at about 0.1% that of Earth, and captured the first images of another planet from deep space. The latest spacecraft to successfully land on Mars are CNSA's Tianwen-1 lander and Zhurong rover, landed on 14 May 2021." |
| 61 | + |
| 62 | + let stackView = UIStackView() |
| 63 | + stackView.axis = .vertical |
| 64 | + stackView.spacing = 5 |
| 65 | + stackView.addArrangedSubview(headerLabel) |
| 66 | + stackView.addArrangedSubview(subtitleLabel) |
| 67 | + stackView.addArrangedSubview(image) |
| 68 | + stackView.addArrangedSubview(introLabel) |
| 69 | + stackView.addArrangedSubview(titleLabel) |
| 70 | + stackView.addArrangedSubview(paragraphLabel) |
| 71 | + stackView.setCustomSpacing(30, after: introLabel) |
| 72 | + stackView.setCustomSpacing(30, after: titleLabel) |
| 73 | + |
| 74 | + let scrollView = UIScrollView() |
| 75 | + scrollView.clipsToBounds = false |
| 76 | + |
| 77 | + // Hierarchy. |
| 78 | + view.addSubview(scrollView) |
| 79 | + scrollView.addSubview(stackView) |
| 80 | + |
| 81 | + // Constraints. |
| 82 | + scrollView.translatesAutoresizingMaskIntoConstraints = false |
| 83 | + scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true |
| 84 | + scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true |
| 85 | + scrollView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor).isActive = true |
| 86 | + scrollView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor).isActive = true |
| 87 | + stackView.translatesAutoresizingMaskIntoConstraints = false |
| 88 | + stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: UI.padding.top).isActive = true |
| 89 | + stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -UI.padding.bottom).isActive = true |
| 90 | + stackView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: UI.padding.left).isActive = true |
| 91 | + stackView.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -UI.padding.right).isActive = true |
| 92 | + |
| 93 | + // Vertical scrolling. |
| 94 | + stackView.widthAnchor.constraint( |
| 95 | + equalTo: scrollView.widthAnchor, |
| 96 | + constant: -UI.padding.left - UI.padding.right |
| 97 | + ).isActive = true |
| 98 | + } |
| 99 | +} |
| 100 | + |
| 101 | + |
| 102 | +struct ImperativeViewController_Previews: PreviewProvider { |
| 103 | + static var previews: some View { |
| 104 | + Group { |
| 105 | + PreviewView(for: MarsViewController()) |
| 106 | + .environment(\.colorScheme, .light) |
| 107 | + .edgesIgnoringSafeArea(.all) |
| 108 | + } |
| 109 | + } |
| 110 | +} |
0 commit comments