Skip to content

Instantly share code, notes, and snippets.

@felquis
Created December 8, 2024 05:52
Show Gist options
  • Save felquis/9d9114af5171d49d07ba82a7d8b5b6e9 to your computer and use it in GitHub Desktop.
Save felquis/9d9114af5171d49d07ba82a7d8b5b6e9 to your computer and use it in GitHub Desktop.
My first SwiftUI Hello World - View centered vertically and horizontally, on every tap it changes colors and count number of taps
//
// ViewController.swift
// CenterElement
//
import UIKit
import SwiftUI
class ViewController: UIViewController {
var squareView: UIView!
var label: UILabel!
var tapCount: Int = 0
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
view.backgroundColor = .white
// add the view to the main view
squareView = UIView()
view.addSubview(squareView)
// add text to the square
label = UILabel()
squareView.addSubview(label)
squareView.backgroundColor = .black
squareView.translatesAutoresizingMaskIntoConstraints = false
// define the constrants for centering the square view
NSLayoutConstraint.activate([
squareView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.3).withPriority(.defaultLow),
// Let the squareView grow based on the label's width
squareView.widthAnchor.constraint(greaterThanOrEqualTo: label.widthAnchor, constant: 16),
squareView.heightAnchor.constraint(equalTo: squareView.widthAnchor),
squareView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
squareView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
// make the square interactive
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(squareTapped))
squareView.addGestureRecognizer(tapGesture)
squareView.isUserInteractionEnabled = true
squareView.layer.cornerRadius = 20
squareView.clipsToBounds = true
// use the custom roundCorners helper
squareView.layer.maskedCorners = [.layerMaxXMinYCorner]
// squareView text styles
label.text = "Hello World"
label.textColor = .white
label.textAlignment = .center
label.font = UIFont.boldSystemFont(ofSize: 16)
label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
label.centerXAnchor.constraint(equalTo: squareView.centerXAnchor),
label.centerYAnchor.constraint(equalTo: squareView.centerYAnchor),
label.widthAnchor.constraint(lessThanOrEqualTo: squareView.widthAnchor, multiplier: 0.9)
])
}
@objc func squareTapped() {
tapCount += 1
let corners: CACornerMask
// Animate the color changes
UIView.animate(withDuration: 0.25, delay: 0, options: [.allowUserInteraction, .curveEaseInOut]) {
self.view.backgroundColor = .random
self.squareView.backgroundColor = .random
self.label.textColor = .random
}
label.text = "Hello World \(tapCount)"
switch tapCount % 4 {
case 0:
corners = [.layerMaxXMinYCorner]
case 1:
corners = [.layerMaxXMaxYCorner]
case 2:
corners = [.layerMinXMaxYCorner]
case 3:
corners = [.layerMinXMinYCorner]
default:
corners = []
}
squareView.layer.maskedCorners = corners
}
}
extension UIColor {
static var random: UIColor {
return UIColor(
red: .random(in: 0...1),
green: .random(in: 0...1),
blue: .random(in: 0...1),
alpha: 1.0
)
}
}
extension UIView {
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(
roundedRect: self.bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius)
)
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
extension NSLayoutConstraint {
func withPriority(_ priority: UILayoutPriority) -> NSLayoutConstraint {
self.priority = priority
return self
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment