Created
December 8, 2024 05:52
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// 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