[iOS - swift] 스택 뷰 stack view (axis, alignment, distribution, hugging, comporession)

StackView에서 사용할 것

• distribution은 axis 방향
• alignment는 axis 반대 방향

• 속성
  • axis
  • alignment
  • distribution
• 내부 뷰들의 auto layout 설정

StackView 속성

• stackView.axis = .horizontal (default)
  • horizontal
  • vertical
• stackView.alignment = .fill (default)
  • fill: 내부 view들을 stackView.axis의 반대 방향으로 stretch

• stackView.distribution = .fill (default)
  • fill: 스택뷰 방향쪽으로 남은 공간에 stretch되는 형태
  • Fill Proportionally: 내부 view들이 intrinsic content size가 존재하며, 이 값을 참고로 동일한 비율을 유지되도록 설정

스택뷰와 내부 뷰들의 auto layout

• 내부 뷰들의 autolayout
  • 주의 내부 뷰들의 크기를 frame, bounds로 설정해도 영향을 주지 못하므로 auto layout로 크기 적용
  • horizontal stackView스택뷰이면 내부뷰들의 width를 설정

    lazy var leftView: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        view.snp.makeConstraints { (make) in
            make.width.equalTo(100)
        }
        return view
    }()

    lazy var centerView: UIView = {
        let view = UIView()
        view.backgroundColor = .green
        view.snp.makeConstraints { (make) in
            make.width.equalTo(100)
        }
        return view
    }()

    lazy var rightView: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        view.snp.makeConstraints { (make) in
            make.width.equalTo(100).priority(999)
        }
        return view
    }()

• stackView의 auto layout

    lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [leftView, centerView, rightView])
        stackView.axis = .horizontal // default
        stackView.distribution = .fill // default
        stackView.alignment = .fill // default
        view.addSubview(stackView)

        stackView.snp.makeConstraints { (make) in
            make.left.top.right.equalToSuperview()
            make.height.equalTo(500)
        }

        return stackView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        print(stackView.arrangedSubviews)
    }

Constnet Hugging, Content Compression 설정

• hugging, compression 개념 참고
• 사용: StackView에 자동으로 내장된 contentView안에 내부 뷰들의 hugging, comporession 값을 부여하여 layout 설정
• 상수 값

*hugging 의 default값은 250 / compression의 default값은 750 rightButton.setContentHuggingPriority(.defaultLow, for: .horizontal) .defaultLow = UILayoutPriority(rawValue: 250.0) .defaultHigh = UILayoutPriority(rawValue: 750.0) .required = UILayoutPriority(rawValue: 1000.0)

import UIKit
import SnapKit

class ViewController: UIViewController {

    // MARK: - View

    lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [leftImageView, leftLabel, rightButton])
        stackView.axis = .horizontal // default
        stackView.distribution = .fill // default
        stackView.alignment = .fill // default
        view.addSubview(stackView)

        stackView.snp.makeConstraints { (make) in
            make.left.right.equalToSuperview()
            make.top.equalTo(view).offset(50)
            make.height.equalTo(30)
        }

        leftLabel.snp.makeConstraints { (make) in
            make.right.lessThanOrEqualTo(rightButton.snp.left)
        }

        rightButton.setContentHuggingPriority(.defaultHigh, for: .horizontal) // 250 -> 750
        rightButton.setContentCompressionResistancePriority(.required, for: .horizontal) // 750 -> 1000

        return stackView
    }()

    lazy var leftImageView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "link"))
        imageView.snp.makeConstraints {
            $0.width.equalTo(30)
        }
        return imageView
    }()

    lazy var leftLabel: UILabel = {
        let label = UILabel()
        label.backgroundColor = .lightGray
        label.text = "링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크링크"
        return label
    }()

    lazy var rightButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "chevron.right"), for: .normal)
        return button
    }()

    // MARK: - Function

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        print(stackView)
    }
}

* 참고

uynguyen.github.io/2020/07/18/iOS-Introducing-Stack-Views/