swift 135 lines · 1 tab

UIKit Auto Layout programmatically

Sofia Martinez Jan 2026
1 tab
import UIKit

class ProfileViewController: UIViewController {
    private let profileImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.layer.cornerRadius = 50
        imageView.translatesAutoresizingMaskIntoConstraints = false
        return imageView
    }()

    private let nameLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 24, weight: .bold)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let bioLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 16)
        label.textColor = .secondaryLabel
        label.numberOfLines = 0
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private lazy var followButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("Follow", for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 16, weight: .semibold)
        button.backgroundColor = .systemBlue
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 8
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(followTapped), for: .touchUpInside)
        return button
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }

    private func setupUI() {
        view.backgroundColor = .systemBackground

        view.addSubview(profileImageView)
        view.addSubview(nameLabel)
        view.addSubview(bioLabel)
        view.addSubview(followButton)

        NSLayoutConstraint.activate([
            // Profile image
            profileImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            profileImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            profileImageView.widthAnchor.constraint(equalToConstant: 100),
            profileImageView.heightAnchor.constraint(equalToConstant: 100),

            // Name label
            nameLabel.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: 16),
            nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            nameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

            // Bio label
            bioLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
            bioLabel.leadingAnchor.constraint(equalTo: nameLabel.leadingAnchor),
            bioLabel.trailingAnchor.constraint(equalTo: nameLabel.trailingAnchor),

            // Follow button
            followButton.topAnchor.constraint(equalTo: bioLabel.bottomAnchor, constant: 24),
            followButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            followButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            followButton.heightAnchor.constraint(equalToConstant: 44)
        ])
    }

    @objc private func followTapped() {
        print("Follow button tapped")
    }
}

// MARK: - Stack View Example
class StackViewExample: UIViewController {
    private lazy var stackView: UIStackView = {
        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = 16
        stack.alignment = .fill
        stack.distribution = .fill
        stack.translatesAutoresizingMaskIntoConstraints = false
        return stack
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        view.addSubview(stackView)

        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])

        // Add arranged subviews
        let titleLabel = createLabel(text: "Title", fontSize: 24, weight: .bold)
        let descriptionLabel = createLabel(text: "Description text", fontSize: 16)
        let button = createButton(title: "Action")

        stackView.addArrangedSubview(titleLabel)
        stackView.addArrangedSubview(descriptionLabel)
        stackView.addArrangedSubview(button)
    }

    private func createLabel(text: String, fontSize: CGFloat, weight: UIFont.Weight = .regular) -> UILabel {
        let label = UILabel()
        label.text = text
        label.font = .systemFont(ofSize: fontSize, weight: weight)
        label.numberOfLines = 0
        return label
    }

    private func createButton(title: String) -> UIButton {
        let button = UIButton(type: .system)
        button.setTitle(title, for: .normal)
        button.backgroundColor = .systemBlue
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 8
        button.heightAnchor.constraint(equalToConstant: 44).isActive = true
        return button
    }
}
1 file · swift Explain with highlit

Auto Layout creates flexible UIs that adapt to different screen sizes and orientations. I define constraints programmatically using NSLayoutConstraint or anchors. The anchor API is more readable—view.topAnchor.constraint(equalTo: parent.topAnchor). Setting translatesAutoresizingMaskIntoConstraints = false disables autoresizing masks. Layout guides like safeAreaLayoutGuide respect notches and home indicators. Constraint priorities resolve conflicts when constraints compete. For dynamic layouts, I activate/deactivate constraint sets. Stack views simplify common layouts with automatic constraint management. Understanding content hugging and compression resistance prevents layout ambiguities. Debugging uses Xcode's visual debugger and constraint warnings.


Related snips

Share this code

Here's the card — post it anywhere.

UIKit Auto Layout programmatically — share card
Link copied