StackViewをコードだけで実装してみた

はじめに

アプリ開発に興味があり、主にSwiftやUIkitの勉強しています。
自分が詰まったところなどを中心に発信していこうと思っています。

StackViewをコードだけで実装してたことがなかったので
今回チャレンジしてみました。

サンプルコード

import UIKit

final class UIStackViewVC: UIViewController {

    private let redLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .systemRed
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let greenLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .systemGreen
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let yellowLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .systemYellow
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let blueLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .systemBrown
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    private let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.backgroundColor = .systemCyan
        stackView.distribution = .fillEqually
        stackView.alignment = .center
        stackView.spacing = 8
        stackView.axis = .horizontal
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        stackView.addArrangedSubview(redLabel)
        stackView.addArrangedSubview(greenLabel)
        stackView.addArrangedSubview(yellowLabel)
        stackView.addArrangedSubview(blueLabel)
        view.addSubview(stackView)

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

            redLabel.heightAnchor.constraint(equalToConstant: 50),
            greenLabel.heightAnchor.constraint(equalToConstant: 50),
            yellowLabel.heightAnchor.constraint(equalToConstant: 50),
            blueLabel.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
}

StackViewの制約はどこを変数にするのか考えながらやるといいのかなと思います。
今回はlabelのwidthを変数にすることでlabelの数を変更した場合でも
柔軟に対応できるようになってます。