헷갈리는 UIKit 속성과 SnapKit 제약 속성

UIView 속성들

속성	설명
backgroundColor	뷰의 배경색을 설정
isHidden	뷰의 숨김 여부를 설정
alpha	뷰의 투명도를 설정
clipsToBounds	하위 뷰가 벗어나는 영역을 잘라낼지 여부를 설정
layer	뷰의 콘텐츠 레이어에 대한 설정을 관리 (ex: 그림자, 테두리 설정 등)

let view = UIView()

view.backgroundColor = .blue
view.isHidden = false
view.alpha = 0.5
view.clipsToBounds = true
view.layer.cornerRadius = 10

 

 

 

UIButton 속성들

UIButton 클래스는 UIView 클래스를 상속받으며, 추가적으로 다음과 같은 속성들을 초기 설정할 수 있다.

속성	설명
setTitle(_:for:)	버튼의 타이틀을 설정
setTitleColor(_:for:)	버튼의 타이틀 색상을 설정
titleLabel	버튼의 타이틀 레이블에 대한 속성들을 관리 (ex: 폰트, 정렬 등)
addTarget(_:action:for:)	버튼의 액션 메서드를 추가하고, 해당 메서드가 호출될 이벤트를 설정

let button = UIButton()

button.setTitle("Click me", for: .normal)
button.setTitleColor(.white, for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 16)
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

 

 

 

UIStackView 주요 속성들

UIStackView 클래스는 뷰를 배열로 관리하고, 해당 뷰들을 한 줄이나 한 열로 정렬한다.

arrangedSubviews	정렬된 서브뷰들의 배열을 설정
axis	스택뷰의 정렬 방향 (수직 또는 수평)을 설정
distribution	스택뷰의 서브뷰들의 배치 방식을 설정(균등 배치, 균등 간격 등)
alignment	스택뷰 내의 서브뷰들의 정렬 방식을 설정(상하 정렬, 가운데 정렬 등)
spacing	서브뷰들 간의 간격을 설정

let stackView = UIStackView()

stackView.addArrangedSubview(label)
stackView.axis = .vertical
stackView.distribution = .fillEqually
stackView.alignment = .center
stackView.spacing = 10

 

 

 

 

UIStackView 주요 메서드

addSubview()	UIView 클래스의 메서드로, UIStackView 클래스가 상속받은 것입니다. 이 메서드는 주어진 뷰를 호출하는 뷰의 하위 뷰 리스트에 추가합니다. addSubview는 UIStackView에서 직접적으로 호출할 수 있는 메서드는 아니지만, UIView의 하위 클래스인 UIStackView에서도 사용할 수 있습니다. 예를 들어, UIStackView에 새로운 서브뷰를 추가하려면 addArrangedSubview를 사용하는 것이 더 적합합니다.
addArrangedSubview(_:)	지정된 인덱스에 뷰를 정렬된 서브뷰 배열에 삽입. 이 메서드를 사용하여 특정 위치에 뷰를 추가
insertArrangedSubview(_:at:)	지정된 인덱스에 뷰를 정렬된 서브뷰 배열에 삽입합니다. 이 메서드를 사용하여 특정 위치에 뷰를 추가
removeArrangedSubview(_:)	주어진 뷰를 정렬된 서브뷰 배열에서 제거합니다. 이 메서드는 뷰를 삭제할 때 사용
setCustomSpacing(_:after:)	두 서브뷰 사이의 사용자 정의 간격을 설정합니다. 특정 뷰 다음에 간격을 설정할 때 유용

import UIKit

// UIStackView 생성
let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .center
stackView.spacing = 10

// Label 생성 및 설정
let label1 = UILabel()
label1.text = "Label 1"
label1.backgroundColor = .blue
label1.textAlignment = .center

// UIStackView에 Label을 addArrangedSubview를 사용하여 추가
stackView.addArrangedSubview(label1)

// UIStackView를 화면에 추가하는 코드 (예시에서 생략)


//=======================================================

// UIStackView 생성
let stackView = UIStackView()
stackView.axis = .vertical
stackView.alignment = .center
stackView.spacing = 10

// Label 생성 및 설정
let label2 = UILabel()
label2.text = "Label 2"
label2.backgroundColor = .green
label2.textAlignment = .center

// UIStackView에 직접 서브뷰를 추가
stackView.addSubview(label2)

// SnapKit을 사용하여 추가한 뷰의 제약 조건 설정
label2.snp.makeConstraints { make in
    make.top.equalToSuperview().offset(20)
    make.leading.equalToSuperview().offset(20)
    make.width.equalTo(200)
    make.height.equalTo(50)
}

// UIStackView를 화면에 추가하는 코드 (예시에서 생략)

 

 

 

---

SnapKit 제약 조건 속성들

SnapKit 속성들은 Auto Layout 제약 조건을 설정할 때 사용된다. 

makeConstraints	제약 조건을 만들기 위한 메서드
equalTo	해당 뷰의 크기나 위치를 다른 뷰와 같게 설정
eqalToSuperview	부모 뷰에 대해 동일성을 설정
width, height	뷰의 너비나 높이를 설정
leading, trailing	뷰의 leading (왼쪽) 또는 trailing (오른쪽) 제약 조건을 설정
top, bottom	뷰의 top 또는 bottom 제약 조건을 설정
centerX, centerY	뷰의 centerX (가로 중앙) 또는 centerY (세로 중앙) 제약 조건을 설정

// centerX, centerY 예제
view.snp.makeConstraints { make in
    make.centerX.equalToSuperview()
    make.centerY.equalToSuperview()
}

// width, height 예제
view.snp.makeConstraints { make in
    make.width.equalTo(100)
    make.height.equalTo(50)
}

// leading, top, trailing, bottom 예제
view.snp.makeConstraints { make in
    make.leading.equalToSuperview().offset(20)
    make.top.equalToSuperview().inset(30)
    make.trailing.equalToSuperview().offset(-20)
    make.bottom.equalToSuperview().inset(30)
}

// edges 예제
view.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20))
}