[ 코드베이스UI ] NSLayoutConstraint, Xcode에 이미지 등록하기

NSLayoutConstraint로 Constraint 작성 가능

Constraint는 뷰와 뷰 사이의 제약 조건을 의미한다. 

• leadingAnchor
• trailingAnchor
• topAnchor
• bottomAnchor
• widthAnchor
• heightAnchor
• centerXAnchor : 뷰에서 가로선의 센터
• centerYAnchor : 뷰에서 세로선의 센터 
• NSLayoutConstraint.activate([제약조건들]) : 제약 조건들을 넣고 코드 작성 시 제약 조건 활성화

---

UILable 코드 작성

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //UILabel 선언
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI세팅 메서드
    private func configureUI(){
        view.backgroundColor = .yellow  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        label.text = "안녕하세요"
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false //오토레이아웃 활성화하기 위해 필요한 코드
        
        view.addSubview(label)  // view안에 서브뷰로 label 추가. 이 코드를 작성하지 않으면 label 이 안 보임
        NSLayoutConstraint.activate([  //제약조건 활성화
            label.widthAnchor.constraint(equalToConstant: 80), //라벨의 너비는 80과 같게 세팅
            label.heightAnchor.constraint(equalToConstant: 40),
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor), //view의 centerXAnchor와 label의 centerXAnchor를 같게 가져간다.
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

 

 

 

---

UIButton 코드 작성

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //UIButton 선언
    let button = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI세팅 메서드
    private func configureUI(){
        view.backgroundColor = .white  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        button.setTitle("Click", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.layer.cornerRadius = 10 //버튼 모서리 둥글게
        
        view.addSubview(button)
        NSLayoutConstraint.activate([
            button.widthAnchor.constraint(equalToConstant: 120),
            button.heightAnchor.constraint(equalToConstant: 60),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

 

 

 

---

Xcode에서 이미지 추가하기

NewFile → Asset Catalog → 파일명 image 생성

 

 

드래그앤드랍으로 이미지 추가해준다.

 

 

 

---

UIImageView

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //UIImageView 선언
    let imageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI세팅 메서드
    private func configureUI(){
        view.backgroundColor = .white  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        
        imageView.image = UIImage(named: "seattle")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(imageView)
        NSLayoutConstraint.activate([
            imageView.widthAnchor.constraint(equalToConstant: 300),
            imageView.heightAnchor.constraint(equalToConstant: 300),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}