 UIKit 기본 문법

UIKit UI 설계 기본 문법 모음

1. 뷰 생성 (UI 컴포넌트 만들기)

let label = UILabel()
let button = UIButton()
let imageView = UIImageView()
let textField = UITextField()

2. 속성 설정 (텍스트, 색상...)

label.text = "안녕"
label.textColor = .black
label.font = UIFont.systemFont(ofSize: 18)

button.setTitle("push", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .blue

imageView.image = UIImage(named: "cat")
imageView.contentMode = .scaleAspectFit

3. 코너 둥글게, 테두리 설정

view.layer.cornerRadius = 10
view.layer.borderWidth = 1
view.layer.borderColor = UIColor.gray.cgColor

4. 뷰 추가하기 (화면에 올리기)

view.addSubview(label)
view.addSubview(button)

5. Auto Layout 설정 준비

label.translatesAutoresizingMaskIntoConstraints = false

뷰에 오토레이아웃을 적용하려면 translatesAutoresizingMaskIntoConstraints = false 꼭 해줘야 함

6. Auto Layout 제약 설정 (NSLayoutConstraint)

NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    label.widthAnchor.constraint(equalToConstant: 100),
    label.heightAnchor.constraint(equalToConstant: 40)
])

7. 버튼 클릭 액션 연결

button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

@objc func buttonTapped() {
    print("버튼 눌림")
}

8. 배경색, 화면 크기 관련

view.backgroundColor = .white
print(view.frame.width) // 뷰 너비 확인

9. StackView로 정렬

let stackView = UIStackView(arrangedSubviews: [label, button])
stackView.axis = .vertical
stackView.spacing = 10
stackView.alignment = .center
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)

10. 뷰 위치/크기 설정 (frame)

label.frame = CGRect(x: 50, y: 100, width: 200, height: 40)

frame 방식은 Auto Layout이랑 혼용 시 충돌날 수 있으니 주의 !!!!

UI 만들기 기본 순서

뷰 선언 (UILabel, UIButton)
속성 설정 (텍스트, 색, 폰트)
뷰 추가 (addSubview)
오토레이아웃 설정 (translatesAutoresizingMaskIntoConstraints = false, NSLayoutConstraint.activate)
(액션 연결)

---

1. frame / bounds

frame : 부모 뷰 기준 위치와 크기
bounds : 자기 자신 기준의 위치(보통 (0, 0))와 크기

view.frame = CGRect(x: 50, y: 100, width: 200, height: 100)
print(view.bounds) // origin은 보통 (0, 0)

2. insetBy(dx:dy:)

크기를 안쪽으로 줄이거나 바깥쪽으로 늘림

let smaller = view.frame.insetBy(dx: 10, dy: 10) // 안쪽으로 10씩 줄임
let larger = view.frame.insetBy(dx: -10, dy: -10) // 바깥쪽으로 커짐

3. offsetBy(dx:dy:)

뷰의 위치만 이동 (크기는 그대로)

let moved = view.frame.offsetBy(dx: 20, dy: -30)

4. center

뷰의 중심 좌표 (CGPoint)

view.center = CGPoint(x: 100, y: 200)

5. sizeThatFits(_:)

내용에 맞는 사이즈 계산 (실제 크기는 바뀌지 않음)

let fittingSize = label.sizeThatFits(CGSize(width: 200, height: CGFloat.greatestFiniteMagnitude))

6. sizeToFit()

내용에 맞게 실제 크기를 자동으로 조절

label.sizeToFit()

7. layoutIfNeeded()

오토레이아웃 적용 즉시 반영

view.layoutIfNeeded() // 강제로 레이아웃 다시 계산

8. addSubview(_:)

뷰를 화면에 올릴 때 사용

view.addSubview(button)

9. bringSubviewToFront() / sendSubviewToBack()

뷰의 앞뒤 순서 조정

view.bringSubviewToFront(label)

CGRect 관련 함수

함수	설명
.insetBy(dx:dy:)	테두리를 안/밖으로 조정
.offsetBy(dx:dy:)	위치 이동
.contains(CGPoint)	특정 점이 그 안에 있는지 확인
.intersects(CGRect)	두 사각형이 겹치는지 확인